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

Fix reader width (#567)

Browse Source 
* Fix reader width

The margin: auto on the Box container for the image was preventing 100% width
to actually mean 100%.

Now that 100% is actually possible, I think fitPageToWindow makes more
sense as a default. Additionally, since the image can fill 100% of the
page, it can cover the ReaderNavBar, so set the z-index of the
ReaderNavBar so it's rendered on top of the image and clickable.

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>

* Support configuring reader width for DoublePage readers

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>

* Fix single page of DoublePageReader not being able to take up full width

In case the parent container is flex row, the container does not automatically take up 100% of the available width, thus, the page also was not able to take up 100% of the width

* Fix applying reader width to double pages

The set reader width can't be applied to each page of the double pages because otherwise it will already take up 100% of the available width with the setting only being at 50%.

Instead, the set width has to be divided by 2, so that both pages take up the set reader width

* Prevent double page spinner from being larger than 100% of the available width

* Update width styling of the page spinner

* Always center pages in the middle of the screen

* Take up full height fitting page to window height

---------

Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
This commit is contained in:
Chance Zibolski
2024-01-26 11:51:08 -08:00
committed by GitHub
parent e0c5e0521d
commit 4d75474b39
10 changed files with 63 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/reader/ReaderSettingsOptions.tsx
View File

@@ -12,7 +12,7 @@ import MenuItem from '@mui/material/MenuItem';
import { useTranslation } from 'react-i18next';
import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings';
import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
import { isFillsPageReaderType } from '@/components/reader/Page.tsx';
import { isHorizontalReaderType } from '@/components/reader/Page.tsx';
interface IProps extends IReaderSettings {
setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes) => void;
@@ -30,7 +30,7 @@ export function ReaderSettingsOptions({
readerWidth,
}: IProps) {
const { t } = useTranslation();
const fitPageToWindowEligible = !isFillsPageReaderType(readerType);
const fitPageToWindowEligible = !isHorizontalReaderType(readerType);
return (
<List>
<ListItem>