ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Properly center images in "single page mode"

Browse Source 
While the reader width was set images weren't centered correctly in the images wrapper element
This commit is contained in:
schroda
2024-12-17 01:01:58 +01:00
parent 38bcf4aecc
commit e4253633c9
2 changed files with 8 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/reader/components/viewer/ReaderPage.tsx
View File

@@ -97,7 +97,7 @@ export const ReaderPage = forwardRef(
...applyStyles(!display, { ...applyStyles(!display, {
display: 'none', display: 'none',
}), }),
...getImageMarginStyling(readingMode.value, doublePage, position), ...getImageMarginStyling(doublePage, position),
...applyStyles(marginTop !== undefined, { ...applyStyles(marginTop !== undefined, {
mt: `${marginTop}px`, mt: `${marginTop}px`,
}), }),
@@ -119,7 +119,7 @@ export const ReaderPage = forwardRef(
objectFit: 'contain', objectFit: 'contain',
objectPosition: position, objectPosition: position,
userSelect: 'none', userSelect: 'none',
...getImageMarginStyling(readingMode.value, doublePage, position), ...getImageMarginStyling(doublePage, position),
...applyStyles(marginTop !== undefined, { ...applyStyles(marginTop !== undefined, {
mt: `${marginTop}px`, mt: `${marginTop}px`,
}), }),

13
src/modules/reader/utils/ReaderPager.utils.tsx
View File

@@ -205,22 +205,13 @@ export const getImageWidthStyling = (
} }
}; };
export const getImageMarginStyling = ( export const getImageMarginStyling = (doublePage: boolean, objectFitPosition?: 'left' | 'right'): CSSObject => ({
readingMode: IReaderSettings['readingMode'], m: 'auto',
doublePage: boolean,
objectFitPosition?: 'left' | 'right',
): CSSObject => ({
...applyStyles(!isContinuousReadingMode(readingMode), {
my: 'auto',
...applyStyles(doublePage, { ...applyStyles(doublePage, {
// the applied margin is the opposite of the objectFitPosition // the applied margin is the opposite of the objectFitPosition
...applyStyles(objectFitPosition === 'right', { ml: 'auto ' }), ...applyStyles(objectFitPosition === 'right', { ml: 'auto ' }),
...applyStyles(objectFitPosition === 'left', { mr: 'auto ' }), ...applyStyles(objectFitPosition === 'left', { mr: 'auto ' }),
}), }),
}),
...applyStyles(isContinuousReadingMode(readingMode), {
m: 'auto',
}),
}); });
export const createSinglePageData = (url: string, index: number): ReaderStatePages['pages'][number]['primary'] => ({ export const createSinglePageData = (url: string, index: number): ReaderStatePages['pages'][number]['primary'] => ({