Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2026-02-23 19:50:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

optimise for notched iphone

Browse Source
This commit is contained in:
Sidney Alcantara
2021-09-09 14:09:07 +10:00
parent 47d75079a6
commit 2b62ec9863
9 changed files with 89 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<meta
name="theme-color"
content="#FAF9FB"
@@ -13,7 +16,10 @@
content="#0F0F12"
media="(prefers-color-scheme: dark)"
/>
<meta name="color-scheme" content="dark light" />
<meta name="color-scheme" content="default" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<!--
Generated from https://realfavicongenerator.net/

6
src/components/FloatingSearch.tsx
View File

@@ -58,7 +58,11 @@ export default function FloatingSearch({
...paperSx,
...(dockedTransition
? { width: `calc(100vw - ${(48 + 8) * 2}px)` }
? {
width: `calc(100vw - ${
(48 + 8) * 2
}px - env(safe-area-inset-left) - env(safe-area-inset-right))`,
}
: {}),
...(docked ? { boxShadow: "none" } : {}),

2
src/components/Navigation/NavDrawer.tsx
View File

@@ -48,7 +48,7 @@ export default function NavDrawer({
direction="row"
spacing={1.5}
alignItems="center"
sx={{ height: APP_BAR_HEIGHT, pl: 0.5 }}
sx={{ height: APP_BAR_HEIGHT, flexShrink: 0, pl: 0.5 }}
>
<IconButton
aria-label="Close navigation drawer"

8
src/components/Navigation/index.tsx
View File

@@ -73,8 +73,10 @@ export default function Navigation({
"&&": {
minHeight: APP_BAR_HEIGHT,
p: 0,
pl: 2,
pr: 2,
pl: (theme) =>
`max(env(safe-area-inset-left), ${theme.spacing(2)})`,
pr: (theme) =>
`max(env(safe-area-inset-right), ${theme.spacing(2)})`,
},
}}
>
@@ -90,7 +92,7 @@ export default function Navigation({
</Grow>
<Grow in key={title}>
<Box sx={{ flex: 1, userSelect: "none" }}>
<Box sx={{ flex: 1, overflowX: "auto", userSelect: "none" }}>
{titleComponent || (
<Typography
variant="h6"

4
src/components/SideDrawer/useStyles.ts
View File

@@ -31,6 +31,9 @@ export const useStyles = makeStyles((theme) =>
overflowX: "visible",
overflowY: "visible",
paddingRight: "env(safe-area-inset-right)",
boxSizing: "content-box",
top: APP_BAR_HEIGHT + TABLE_HEADER_HEIGHT,
height: `calc(100% - ${APP_BAR_HEIGHT + TABLE_HEADER_HEIGHT}px)`,
@@ -111,6 +114,7 @@ export const useStyles = makeStyles((theme) =>
drawerContents: {
padding: theme.spacing(5),
paddingBottom: `max(env(safe-area-inset-bottom), ${theme.spacing(5)})`,
overflowY: "auto",
},
})

2
src/components/Table/TableHeader/index.tsx
View File

@@ -41,6 +41,8 @@ export default function TableHeader() {
alignItems="center"
spacing={1}
sx={{
ml: "env(safe-area-inset-left)",
mr: "env(safe-area-inset-right)",
pl: 2,
pr: 2,
pb: 1.5,

26
src/components/Table/styles.ts
View File

@@ -17,6 +17,7 @@ export const useStyles = makeStyles((theme) =>
"& > .rdg": {
width: `calc(100% - ${DRAWER_COLLAPSED_WIDTH}px)`,
flex: 1,
paddingBottom: "env(safe-area-inset-bottom)",
},
[theme.breakpoints.down("sm")]: { width: "100%" },
@@ -98,6 +99,31 @@ export const useStyles = makeStyles((theme) =>
},
},
".rdg-row, .rdg-header-row": {
marginLeft: `max(env(safe-area-inset-left), ${theme.spacing(2)})`,
marginRight: `env(safe-area-inset-right)`,
},
".rdg-header-row .rdg-cell:first-child": {
borderTopLeftRadius: theme.shape.borderRadius,
},
".rdg-row .rdg-cell:first-child, .rdg-header-row .rdg-cell:first-child": {
borderLeft: "1px solid var(--border-color)",
},
".rdg-row:last-child": {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
"& .rdg-cell:first-child": {
borderBottomLeftRadius: theme.shape.borderRadius,
},
"& .rdg-cell:nth-last-child(2)": {
borderBottomRightRadius: theme.shape.borderRadius,
},
},
".rdg-header-row .rdg-cell": {
borderTop: "1px solid var(--border-color)",
},

10
src/pages/Home.tsx
View File

@@ -113,8 +113,14 @@ export default function HomePage() {
sx={{
zIndex: "speedDial",
position: "fixed",
bottom: (theme) => ({ xs: theme.spacing(2), sm: theme.spacing(3) }),
right: (theme) => ({ xs: theme.spacing(2), sm: theme.spacing(3) }),
bottom: (theme) => ({
xs: `max(${theme.spacing(2)}, env(safe-area-inset-bottom))`,
sm: `max(${theme.spacing(3)}, env(safe-area-inset-bottom))`,
}),
right: (theme) => ({
xs: `max(${theme.spacing(2)}, env(safe-area-inset-right))`,
sm: `max(${theme.spacing(3)}, env(safe-area-inset-right))`,
}),
}}
>
<AddIcon />

32
src/theme/components.tsx
View File

@@ -54,7 +54,35 @@ export const components = (theme: Theme): ThemeOptions => {
MuiContainer: {
defaultProps: { maxWidth: "xl" },
styleOverrides: {
root: {
paddingLeft: `max(${theme.spacing(2)}, env(safe-area-inset-left))`,
paddingRight: `max(${theme.spacing(
2
)}, env(safe-area-inset-right))`,
[theme.breakpoints.up("sm")]: {
paddingLeft: `max(${theme.spacing(
3
)}, env(safe-area-inset-left))`,
paddingRight: `max(${theme.spacing(
3
)}, env(safe-area-inset-right))`,
},
marginBottom: `env(safe-area-inset-bottom)`,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: { paddingBottom: "env(safe-area-inset-bottom)" },
paperAnchorLeft: { paddingLeft: "env(safe-area-inset-left)" },
paperAnchorRight: { paddingRight: "env(safe-area-inset-right)" },
paperAnchorTop: { paddingTop: "env(safe-area-inset-top)" },
},
},
MuiPaper: {
styleOverrides: {
rounded: { borderRadius: (theme.shape.borderRadius as number) * 2 },
@@ -127,8 +155,8 @@ export const components = (theme: Theme): ThemeOptions => {
MuiSnackbar: {
styleOverrides: {
root: {
left: `calc(env(safe-area-inset-left) + ${theme.spacing(1)})`,
bottom: `calc(env(safe-area-inset-bottom) + ${theme.spacing(1)})`,
left: `max(${theme.spacing(1)}, env(safe-area-inset-left))`,
bottom: `max(${theme.spacing(1)}, env(safe-area-inset-bottom))`,
},
},
},