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

Use full height and width of viewport on iOS

Browse Source 
- render appbar background color on ios status bar
- handle "home indicator" safe area inset
This commit is contained in:
schroda
2024-12-15 22:37:11 +01:00
parent ffe824e603
commit d844ad3f5d
10 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -3,7 +3,9 @@
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/> <link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/> <meta name='viewport' content='minimum-scale=1, initial-scale=1, viewport-fit=cover, width=device-width'>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#000000"/> <meta name="theme-color" content="#000000"/>
<meta <meta
name="description" name="description"

4
src/App.tsx
View File

@@ -108,7 +108,7 @@ const MainApp = () => {
maxWidth: `calc(100vw - (100vw - 100%) - ${navBarWidth}px)`, maxWidth: `calc(100vw - (100vw - 100%) - ${navBarWidth}px)`,
position: 'relative', position: 'relative',
mt: `${appBarHeight}px`, mt: `${appBarHeight}px`,
mb: `${bottomBarHeight}px`, pb: `calc(${bottomBarHeight}px + ${!bottomBarHeight ? 'env(safe-area-inset-bottom)' : '0px'})`,
}} }}
> >
<ErrorBoundary> <ErrorBoundary>
@@ -181,7 +181,7 @@ export const App: React.FC = () => (
<BackgroundSubscriptions /> <BackgroundSubscriptions />
<CssBaseline enableColorScheme /> <CssBaseline enableColorScheme />
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<Box sx={{ flexShrink: 0 }}> <Box sx={{ flexShrink: 0, position: 'relative', height: '100vh' }}>
<DefaultNavBar /> <DefaultNavBar />
</Box> </Box>
<Routes> <Routes>

15
src/modules/core/components/tabs/TabsWrapper.tsx
View File

@@ -7,14 +7,9 @@
*/ */
import Box, { BoxProps } from '@mui/material/Box'; import Box, { BoxProps } from '@mui/material/Box';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
export const TabsWrapper = ({ children, ...props }: BoxProps) => { export const TabsWrapper = ({ children, ...props }: BoxProps) => (
const { appBarHeight } = useNavBarContext(); <Box {...props} sx={{ ...props.sx, position: 'relative', height: `100%` }}>
{children}
return ( </Box>
<Box {...props} sx={{ ...props.sx, position: 'relative', height: `calc(100% - ${appBarHeight}px)` }}> );
{children}
</Box>
);
};

2
src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
View File

@@ -22,7 +22,7 @@ export const StyledGroupedVirtuoso = ({
{...props} {...props}
style={{ style={{
...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'})`,
}} }}
/> />
); );

9
src/modules/navigation-bar/components/DefaultNavBar.tsx
View File

@@ -91,7 +91,9 @@ export function DefaultNavBar() {
const appBarRef = useRef<HTMLDivElement | null>(null); const appBarRef = useRef<HTMLDivElement | null>(null);
useResizeObserver( useResizeObserver(
appBarRef, appBarRef,
useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]), useCallback(() => {
setAppBarHeight(appBarRef.current?.clientHeight ?? 0);
}, [appBarRef.current]),
); );
useLayoutEffect(() => { useLayoutEffect(() => {
if (!override.status) { if (!override.status) {
@@ -132,6 +134,7 @@ export function DefaultNavBar() {
sx={{ sx={{
position: 'fixed', position: 'fixed',
marginLeft: actualNavBarWidth, marginLeft: actualNavBarWidth,
pt: 'env(safe-area-inset-top)',
width: `calc(100% - ${actualNavBarWidth}px)`, width: `calc(100% - ${actualNavBarWidth}px)`,
zIndex: theme.zIndex.drawer, zIndex: theme.zIndex.drawer,
}} }}
@@ -142,7 +145,7 @@ export function DefaultNavBar() {
sx={{ sx={{
position: 'absolute', position: 'absolute',
left: 0, left: 0,
width: navBarWidth, width: `calc(${navBarWidth}px + env(safe-area-inset-left))`,
...(!isCollapsed && { display: 'none' }), ...(!isCollapsed && { display: 'none' }),
alignItems: 'center', alignItems: 'center',
}} }}
@@ -155,7 +158,7 @@ export function DefaultNavBar() {
<Stack <Stack
sx={{ sx={{
ml: `${isCollapsed ? navBarWidth : 0}px`, ml: `${isCollapsed ? navBarWidth : 0}px`,
width: `calc(100% - ${isCollapsed ? navBarWidth : 0}px)`, width: `calc(100% - (${isCollapsed ? navBarWidth : 0}px + env(safe-area-inset-left)))`,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}} }}

1
src/modules/navigation-bar/components/DesktopSideBar.tsx
View File

@@ -119,6 +119,7 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
> >
<Box <Box
sx={{ sx={{
pl: 'env(safe-area-inset-left)',
minWidth: isCollapsed ? MIN_WIDTH_COLLAPSED : MIN_WIDTH_EXTENDED, minWidth: isCollapsed ? MIN_WIDTH_COLLAPSED : MIN_WIDTH_EXTENDED,
maxWidth: isCollapsed ? MAX_WIDTH_COLLAPSED : MAX_WIDTH_EXTENDED, maxWidth: isCollapsed ? MAX_WIDTH_COLLAPSED : MAX_WIDTH_EXTENDED,
}} }}

18
src/modules/navigation-bar/components/MobileBottomBar.tsx
View File

@@ -12,12 +12,14 @@ import { useTranslation } from 'react-i18next';
import Paper from '@mui/material/Paper'; import Paper from '@mui/material/Paper';
import { useCallback, useLayoutEffect, useRef, useState } from 'react'; import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { CSSObject, useTheme } from '@mui/material/styles';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx'; import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx'; import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts'; import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => { export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme();
const { setBottomBarHeight } = useNavBarContext(); const { setBottomBarHeight } = useNavBarContext();
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -36,7 +38,21 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
return ( return (
<Paper <Paper
ref={ref} ref={ref}
sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => 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<CSSObject, 'accentColorsd'>),
}}
elevation={3} elevation={3}
> >
<BottomNavigation <BottomNavigation

2
src/modules/reader/components/ReaderPageNumber.tsx
View File

@@ -57,7 +57,7 @@ export const ReaderPageNumber = () => {
position: 'fixed', position: 'fixed',
left: readerNavBarWidth, left: readerNavBarWidth,
right: 0, 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', alignItems: 'center',
transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`, transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`,
}} }}

1
src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
View File

@@ -64,6 +64,7 @@ export const ReaderOverlayHeaderMobile = ({ isVisible }: MobileHeaderProps) => {
left: 0, left: 0,
right: `${scrollbarYSize}px`, right: `${scrollbarYSize}px`,
p: 2, p: 2,
pt: (theme) => `env(safe-area-inset-top, ${theme.spacing(2)})`,
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95), backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
pointerEvents: 'all', pointerEvents: 'all',
}} }}

3
src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -45,7 +45,7 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
sx={{ sx={{
position: 'fixed', position: 'fixed',
right: `${scrollbarYSize}px`, right: `${scrollbarYSize}px`,
bottom: `${scrollbarXSize}px`, bottom: 0,
left: 0, left: 0,
gap: 2, gap: 2,
pointerEvents: 'all', pointerEvents: 'all',
@@ -56,6 +56,7 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
sx={{ sx={{
alignItems: 'center', alignItems: 'center',
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95), backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`,
}} }}
> >
<Stack <Stack