Skip to content

Commit 5ccf332

Browse files
nakatermnakaterm
committed
Safe Area 対応の修正
1 parent 3dcf940 commit 5ccf332

File tree

9 files changed

+72
-49
lines changed

9 files changed

+72
-49
lines changed

‎web/app/chat/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
99
<ModalProvider>
1010
<Header title="チャット" />
1111
<NavigateByAuthState type="toLoginForUnauthenticated">
12-
<div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
12+
<div className="cm-pb-footer h-full overflow-y-auto pt-12">
13+
{children}
14+
</div>
1315
</NavigateByAuthState>
1416
<BottomBar activeTab="3_chat" />
1517
</ModalProvider>

‎web/app/friends/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
99
<ModalProvider>
1010
<Header title="フレンド" />
1111
<NavigateByAuthState type="toLoginForUnauthenticated">
12-
<div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
12+
<div className="cm-pb-footer h-full overflow-y-auto pt-12">
13+
{children}
14+
</div>
1315
</NavigateByAuthState>
1416
<BottomBar activeTab="1_friends" />
1517
</ModalProvider>

‎web/app/globals.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,8 @@
1111
.cm-li-btn {
1212
@apply no-animation h-auto w-full justify-start rounded-none border-none bg-white px-6 py-4 text-left font-normal text-base shadow-none hover:bg-zinc-100 focus:bg-zinc-300;
1313
}
14+
15+
/* Bottom Bar の分の幅 */
16+
.cm-pb-footer {
17+
padding-bottom: calc(3rem + env(safe-area-inset-bottom));
18+
}

‎web/app/home/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function Layout({
1111
<>
1212
<Header />
1313
<NavigateByAuthState type="toLoginForUnauthenticated">
14-
<div className="h-full pt-12 pb-12">{children}</div>
14+
<div className="cm-pb-footer h-full pt-12">{children}</div>
1515
</NavigateByAuthState>
1616
<BottomBar activeTab="0_home" />
1717
</>

‎web/app/layout.tsx‎

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,29 @@
1-
"use client";
2-
3-
import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
4-
import { SnackbarProvider } from "notistack";
5-
import React from "react";
1+
import type React from "react";
62
import "./globals.css";
73
import "@fontsource/roboto/300.css";
84
import "@fontsource/roboto/400.css";
95
import "@fontsource/roboto/500.css";
106
import "@fontsource/roboto/700.css";
11-
import BanLandscape from "~/components/BanLandscape";
12-
import SSEProvider from "~/components/SSEProvider";
13-
import { AlertProvider } from "~/components/common/alert/AlertProvider";
7+
import type { Viewport } from "next";
8+
import Providers from "~/components/Providers";
149

15-
const theme = createTheme({
16-
palette: {
17-
primary: {
18-
main: "#039BE5",
19-
},
20-
secondary: {
21-
main: "#E9F8FF",
22-
},
23-
},
24-
});
10+
export const viewport: Viewport = {
11+
width: "device-width",
12+
initialScale: 1,
13+
viewportFit: "cover",
14+
};
2515

2616
export default function RootLayout({
2717
children,
28-
}: {
29-
children: React.ReactNode;
30-
}) {
18+
}: { children: React.ReactNode }) {
3119
return (
3220
<html lang="en" className="h-full">
3321
<head>
34-
<meta charSet="UTF-8" />
3522
<link rel="icon" type="image/svg+xml" href="/course-mate-icon.svg" />
36-
<meta
37-
name="viewport"
38-
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
39-
/>
4023
<title>CourseMate</title>
4124
</head>
4225
<body className="h-full">
43-
<ThemeProvider theme={theme}>
44-
<CssBaseline />
45-
<SnackbarProvider
46-
autoHideDuration={2000}
47-
anchorOrigin={{ horizontal: "right", vertical: "top" }}
48-
>
49-
<React.StrictMode>
50-
<CssBaseline />
51-
<AlertProvider>
52-
{/* <ModalProvider> */}
53-
<BanLandscape />
54-
<SSEProvider>{children}</SSEProvider>
55-
{/* </ModalProvider> */}
56-
</AlertProvider>
57-
</React.StrictMode>
58-
</SnackbarProvider>
59-
</ThemeProvider>
26+
<Providers>{children}</Providers>
6027
</body>
6128
</html>
6229
);

‎web/app/search/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
99
<ModalProvider>
1010
<Header title="検索" />
1111
<NavigateByAuthState type="toLoginForUnauthenticated">
12-
<div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
12+
<div className="cm-pb-footer h-full overflow-y-auto pt-12">
13+
{children}
14+
</div>
1315
</NavigateByAuthState>
1416
<BottomBar activeTab="2_search" />
1517
</ModalProvider>

‎web/app/settings/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ export default function Layout({
1111
<>
1212
<Header title="設定" />
1313
<NavigateByAuthState type="toLoginForUnauthenticated">
14-
<div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
14+
<div className="cm-pb-footer h-full overflow-y-auto pt-12">
15+
{children}
16+
</div>
1517
</NavigateByAuthState>
1618
<BottomBar activeTab="4_settings" />
1719
</>

‎web/components/BottomBar.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ export default function BottomBar(props: Props) {
3737
const { activeTab } = props;
3838
return (
3939
<div
40-
className="fixed bottom-0 z-30 flex h-12 w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
40+
className="fixed bottom-0 z-30 flex w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
4141
style={{
42+
height: "calc(3rem + env(safe-area-inset-bottom))",
4243
paddingBottom: "env(safe-area-inset-bottom)",
4344
}}
4445
>

‎web/components/Providers.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
"use client";
2+
3+
import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
4+
import { SnackbarProvider } from "notistack";
5+
import React from "react";
6+
import type { ReactNode } from "react";
7+
import BanLandscape from "~/components/BanLandscape";
8+
import SSEProvider from "~/components/SSEProvider";
9+
import { AlertProvider } from "~/components/common/alert/AlertProvider";
10+
11+
const theme = createTheme({
12+
palette: {
13+
primary: {
14+
main: "#039BE5",
15+
},
16+
secondary: {
17+
main: "#E9F8FF",
18+
},
19+
},
20+
});
21+
22+
export default function Providers({ children }: { children: ReactNode }) {
23+
return (
24+
<ThemeProvider theme={theme}>
25+
<CssBaseline />
26+
<SnackbarProvider
27+
autoHideDuration={2000}
28+
anchorOrigin={{ horizontal: "right", vertical: "top" }}
29+
>
30+
<React.StrictMode>
31+
<CssBaseline />
32+
<AlertProvider>
33+
{/* <ModalProvider> */}
34+
<BanLandscape />
35+
<SSEProvider>{children}</SSEProvider>
36+
{/* </ModalProvider> */}
37+
</AlertProvider>
38+
</React.StrictMode>
39+
</SnackbarProvider>
40+
</ThemeProvider>
41+
);
42+
}

0 commit comments

Comments
 (0)