Use set reader width on small devices (#602)
On small devices (greater height than width) the width was always set to 100vw ignoring the set reader width via the settings
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect, forwardRef, useRef } from 'react';
|
import { forwardRef, useRef } from 'react';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
import { useTheme } from '@mui/material/styles';
|
import { useTheme } from '@mui/material/styles';
|
||||||
import { useMediaQuery } from '@mui/material';
|
import { useMediaQuery } from '@mui/material';
|
||||||
@@ -17,24 +17,6 @@ export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
|
|||||||
['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
|
['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
|
||||||
|
|
||||||
export function imageStyle(settings: IReaderSettings): any {
|
export function imageStyle(settings: IReaderSettings): any {
|
||||||
const [dimensions, setDimensions] = useState({
|
|
||||||
height: window.innerHeight,
|
|
||||||
width: window.innerWidth,
|
|
||||||
});
|
|
||||||
useEffect(() => {
|
|
||||||
function handleResize() {
|
|
||||||
setDimensions({
|
|
||||||
height: window.innerHeight,
|
|
||||||
width: window.innerWidth,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize);
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', handleResize);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const isHorizontal = isHorizontalReaderType(settings.readerType);
|
const isHorizontal = isHorizontalReaderType(settings.readerType);
|
||||||
if (settings.fitPageToWindow || isHorizontal) {
|
if (settings.fitPageToWindow || isHorizontal) {
|
||||||
return {
|
return {
|
||||||
@@ -52,7 +34,7 @@ export function imageStyle(settings: IReaderSettings): any {
|
|||||||
return {
|
return {
|
||||||
marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
|
marginBottom: settings.readerType === 'ContinuesVertical' ? '15px' : 0,
|
||||||
minWidth: '10vw',
|
minWidth: '10vw',
|
||||||
width: dimensions.width < dimensions.height ? '100vw' : `${settings.readerWidth}%`,
|
width: `${settings.readerWidth}%`,
|
||||||
maxWidth: '100%',
|
maxWidth: '100%',
|
||||||
objectFit: 'contain',
|
objectFit: 'contain',
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user