From d844ad3f5d7a7ebcbff5fd41fcded314113ce1af Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 15 Dec 2024 22:37:11 +0100 Subject: [PATCH] Use full height and width of viewport on iOS - render appbar background color on ios status bar - handle "home indicator" safe area inset --- index.html | 4 +++- src/App.tsx | 4 ++-- .../core/components/tabs/TabsWrapper.tsx | 15 +++++---------- .../virtuoso/StyledGroupedVirtuoso.tsx | 2 +- .../components/DefaultNavBar.tsx | 9 ++++++--- .../components/DesktopSideBar.tsx | 1 + .../components/MobileBottomBar.tsx | 18 +++++++++++++++++- .../reader/components/ReaderPageNumber.tsx | 2 +- .../overlay/ReaderOverlayHeaderMobile.tsx | 1 + .../mobile/ReaderBottomBarMobile.tsx | 3 ++- 10 files changed, 39 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index a0780420..c115e3e3 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,9 @@ - + + + { maxWidth: `calc(100vw - (100vw - 100%) - ${navBarWidth}px)`, position: 'relative', mt: `${appBarHeight}px`, - mb: `${bottomBarHeight}px`, + pb: `calc(${bottomBarHeight}px + ${!bottomBarHeight ? 'env(safe-area-inset-bottom)' : '0px'})`, }} > @@ -181,7 +181,7 @@ export const App: React.FC = () => ( - + diff --git a/src/modules/core/components/tabs/TabsWrapper.tsx b/src/modules/core/components/tabs/TabsWrapper.tsx index 81261c82..7300df60 100644 --- a/src/modules/core/components/tabs/TabsWrapper.tsx +++ b/src/modules/core/components/tabs/TabsWrapper.tsx @@ -7,14 +7,9 @@ */ import Box, { BoxProps } from '@mui/material/Box'; -import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; -export const TabsWrapper = ({ children, ...props }: BoxProps) => { - const { appBarHeight } = useNavBarContext(); - - return ( - - {children} - - ); -}; +export const TabsWrapper = ({ children, ...props }: BoxProps) => ( + + {children} + +); diff --git a/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx b/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx index b931f555..5da4a647 100644 --- a/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx +++ b/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx @@ -22,7 +22,7 @@ export const StyledGroupedVirtuoso = ({ {...props} style={{ ...style, - height: `calc(100vh - ${heightToSubtract}px - ${appBarHeight}px - ${bottomBarHeight}px)`, + height: `calc(100vh - ${heightToSubtract}px - ${appBarHeight}px - ${bottomBarHeight}px - ${!bottomBarHeight ? 'env(safe-area-inset-bottom)' : '0px'})`, }} /> ); diff --git a/src/modules/navigation-bar/components/DefaultNavBar.tsx b/src/modules/navigation-bar/components/DefaultNavBar.tsx index 92d54e52..2078d463 100644 --- a/src/modules/navigation-bar/components/DefaultNavBar.tsx +++ b/src/modules/navigation-bar/components/DefaultNavBar.tsx @@ -91,7 +91,9 @@ export function DefaultNavBar() { const appBarRef = useRef(null); useResizeObserver( appBarRef, - useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]), + useCallback(() => { + setAppBarHeight(appBarRef.current?.clientHeight ?? 0); + }, [appBarRef.current]), ); useLayoutEffect(() => { if (!override.status) { @@ -132,6 +134,7 @@ export function DefaultNavBar() { sx={{ position: 'fixed', marginLeft: actualNavBarWidth, + pt: 'env(safe-area-inset-top)', width: `calc(100% - ${actualNavBarWidth}px)`, zIndex: theme.zIndex.drawer, }} @@ -142,7 +145,7 @@ export function DefaultNavBar() { sx={{ position: 'absolute', left: 0, - width: navBarWidth, + width: `calc(${navBarWidth}px + env(safe-area-inset-left))`, ...(!isCollapsed && { display: 'none' }), alignItems: 'center', }} @@ -155,7 +158,7 @@ export function DefaultNavBar() { { const { t } = useTranslation(); + const theme = useTheme(); const { setBottomBarHeight } = useNavBarContext(); const location = useLocation(); const navigate = useNavigate(); @@ -36,7 +38,21 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) return ( theme.zIndex.drawer - 1 }} + sx={{ + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + pb: 'env(safe-area-inset-bottom)', + pl: 'env(safe-area-inset-left)', + pr: 'env(safe-area-inset-right)', + zIndex: theme.zIndex.drawer - 1, + }} + style={{ + ...(theme.applyStyles('dark', { + '--Paper-overlay': 'unset', + }) as Omit), + }} elevation={3} > { position: 'fixed', left: readerNavBarWidth, right: 0, - bottom: (theme) => `calc(${theme.spacing(1)} + ${scrollbarXSize}px)`, + bottom: (theme) => `max(calc(${theme.spacing(1)} + ${scrollbarXSize}px), env(safe-area-inset-bottom))`, alignItems: 'center', transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`, }} diff --git a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx index d3f699e4..1338d973 100644 --- a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx +++ b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx @@ -64,6 +64,7 @@ export const ReaderOverlayHeaderMobile = ({ isVisible }: MobileHeaderProps) => { left: 0, right: `${scrollbarYSize}px`, p: 2, + pt: (theme) => `env(safe-area-inset-top, ${theme.spacing(2)})`, backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95), pointerEvents: 'all', }} diff --git a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx index c98d90c0..cfe32101 100644 --- a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx +++ b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx @@ -45,7 +45,7 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB sx={{ position: 'fixed', right: `${scrollbarYSize}px`, - bottom: `${scrollbarXSize}px`, + bottom: 0, left: 0, gap: 2, pointerEvents: 'all', @@ -56,6 +56,7 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB sx={{ alignItems: 'center', backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95), + pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`, }} >