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>
<meta charset="utf-8"/>
<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="description"

4
src/App.tsx
View File

@@ -108,7 +108,7 @@ const MainApp = () => {
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'})`,
}}
>
<ErrorBoundary>
@@ -181,7 +181,7 @@ export const App: React.FC = () => (
<BackgroundSubscriptions />
<CssBaseline enableColorScheme />
<Box sx={{ display: 'flex' }}>
<Box sx={{ flexShrink: 0 }}>
<Box sx={{ flexShrink: 0, position: 'relative', height: '100vh' }}>
<DefaultNavBar />
</Box>
<Routes>

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

@@ -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 (
<Box {...props} sx={{ ...props.sx, position: 'relative', height: `calc(100% - ${appBarHeight}px)` }}>
{children}
</Box>
);
};
export const TabsWrapper = ({ children, ...props }: BoxProps) => (
<Box {...props} sx={{ ...props.sx, position: 'relative', height: `100%` }}>
{children}
</Box>
);

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

@@ -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'})`,
}}
/>
);

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

@@ -91,7 +91,9 @@ export function DefaultNavBar() {
const appBarRef = useRef<HTMLDivElement | null>(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() {
<Stack
sx={{
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',
alignItems: 'center',
}}

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

@@ -119,6 +119,7 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
>
<Box
sx={{
pl: 'env(safe-area-inset-left)',
minWidth: isCollapsed ? MIN_WIDTH_COLLAPSED : MIN_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 { useCallback, useLayoutEffect, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { CSSObject, useTheme } from '@mui/material/styles';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
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 (
<Paper
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}
>
<BottomNavigation

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

@@ -57,7 +57,7 @@ export const ReaderPageNumber = () => {
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`,
}}

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

@@ -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',
}}

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

@@ -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))`,
}}
>
<Stack