Prevent reader pages from getting cut off on small screens
In case the pages were larger in width then the screen, they got cut off and were not fully viewable.
This commit is contained in:
@@ -37,6 +37,7 @@ import {
|
|||||||
getPagerForReadingMode,
|
getPagerForReadingMode,
|
||||||
isContinuousReadingMode,
|
isContinuousReadingMode,
|
||||||
isContinuousVerticalReadingMode,
|
isContinuousVerticalReadingMode,
|
||||||
|
shouldApplyReaderWidth,
|
||||||
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
|
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
|
||||||
import { useMouseDragScroll } from '@/modules/core/hooks/useMouseDragScroll.tsx';
|
import { useMouseDragScroll } from '@/modules/core/hooks/useMouseDragScroll.tsx';
|
||||||
import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
|
import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
|
||||||
@@ -82,6 +83,8 @@ const BaseReaderViewer = forwardRef(
|
|||||||
readingMode,
|
readingMode,
|
||||||
shouldOffsetDoubleSpreads,
|
shouldOffsetDoubleSpreads,
|
||||||
readingDirection,
|
readingDirection,
|
||||||
|
readerWidth,
|
||||||
|
pageScaleMode,
|
||||||
setScrollbarXSize,
|
setScrollbarXSize,
|
||||||
setScrollbarYSize,
|
setScrollbarYSize,
|
||||||
isVisible: isOverlayVisible,
|
isVisible: isOverlayVisible,
|
||||||
@@ -103,7 +106,10 @@ const BaseReaderViewer = forwardRef(
|
|||||||
| 'transitionPageMode'
|
| 'transitionPageMode'
|
||||||
| 'retryFailedPagesKeyPrefix'
|
| 'retryFailedPagesKeyPrefix'
|
||||||
> &
|
> &
|
||||||
Pick<IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection'> &
|
Pick<
|
||||||
|
IReaderSettings,
|
||||||
|
'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection' | 'readerWidth' | 'pageScaleMode'
|
||||||
|
> &
|
||||||
Pick<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
|
Pick<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
|
||||||
Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
|
Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
|
||||||
TReaderTapZoneContext & {
|
TReaderTapZoneContext & {
|
||||||
@@ -237,7 +243,11 @@ const BaseReaderViewer = forwardRef(
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
overflow: 'auto',
|
overflow: 'auto',
|
||||||
...applyStyles(isContinuousVerticalReadingMode(readingMode), { alignItems: 'center' }),
|
...applyStyles(
|
||||||
|
isContinuousVerticalReadingMode(readingMode) &&
|
||||||
|
shouldApplyReaderWidth(readerWidth, pageScaleMode),
|
||||||
|
{ alignItems: 'center' },
|
||||||
|
),
|
||||||
}}
|
}}
|
||||||
onClick={(e) => !isDragging && handleClick(e)}
|
onClick={(e) => !isDragging && handleClick(e)}
|
||||||
onScroll={() =>
|
onScroll={() =>
|
||||||
@@ -291,6 +301,8 @@ export const ReaderViewer = withPropsFrom(
|
|||||||
'readingMode',
|
'readingMode',
|
||||||
'shouldOffsetDoubleSpreads',
|
'shouldOffsetDoubleSpreads',
|
||||||
'readingDirection',
|
'readingDirection',
|
||||||
|
'readerWidth',
|
||||||
|
'pageScaleMode',
|
||||||
'setScrollbarXSize',
|
'setScrollbarXSize',
|
||||||
'setScrollbarYSize',
|
'setScrollbarYSize',
|
||||||
'isVisible',
|
'isVisible',
|
||||||
|
|||||||
Reference in New Issue
Block a user