Fix reader width #567
Fix reader width #567
Conversation
|
the single page does not take 100% of the width and is not centered when the height is < 100vh |
Ah your right, I gotta update the other pagers. |
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 <[email protected]>
chancez
force-pushed
the
pr/chancez/reader_width_fill
branch
from
60689cd to
74f9032
Compare
|
So I fixed it for the single page layout. I was gonna update the DoublePage layouts to support adjustable width, but I cannot figure out how to make it take 100% of the width with horizontal layout because the flex direction has to be |
|
Ah I think I figured that out, it's related to the height set in the imageStyle in |
|
Ok got double paged readers to work with the reader width setting too. |
chancez
force-pushed
the
pr/chancez/reader_width_fill
branch
from
8933bff to
e0e914b
Compare
chancez
force-pushed
the
pr/chancez/reader_width_fill
branch
4 times, most recently
from
55c5cdd to
e795654
Compare
|
now the pages of the double pager do not take up 100% of the width anymore 😅 |
Signed-off-by: Chance Zibolski <[email protected]>
chancez
force-pushed
the
pr/chancez/reader_width_fill
branch
from
e795654 to
4514c91
Compare
|
CSS is hard. |
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
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
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.
Before.
Notice 100%, is not actually taking 100% of the page width.
After:
fit to page width
21% width
100% width
