Merge pull request #10 from ContentsViewer/feature/safe-area

Feature/safe area
ContentsViewer · Apr 18, 2024 · 01fc805 · 01fc805
2 parents ab13232 + 67ed984
commit 01fc805
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 31 deletions.
diff --git a/app/app-layout.tsx b/app/app-layout.tsx
@@ -91,20 +91,16 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
                 <ThemeChanger />
                 <DynamicBackground />
                 <AudioPlayer />
-                {/* <StatusBar /> */}
-                <Box
+                <Box sx={{
+                  pb: `calc(env(safe-area-inset-bottom, 0) + 144px)`,
+                }}>{children}</Box>
+                <MiniPlayer
                   sx={{
-                    flexGrow: 1,
-                    overflowY: "auto",
-                    overflowX: "hidden",
-                    mt: 4,
-                    mb: 10,
+                    position: "fixed",
+                    left: `env(safe-area-inset-left, 0)`,
+                    right: `env(safe-area-inset-right, 0)`,
+                    bottom: `env(safe-area-inset-bottom, 0)`,
                   }}
-                >
-                  {children}
-                </Box>
-                <MiniPlayer
-                  sx={{ position: "fixed", bottom: 0, left: 0, right: 0 }}
                 />
               </DynamicThemeStoreProvider>
             </PlayerStoreProvider>

diff --git a/app/files/page.tsx b/app/files/page.tsx
@@ -293,7 +293,11 @@ export default function Page() {
           </div>
         </Toolbar>
       </ElevationAppBar>
-      <FileList sx={{ mt: 5 }} files={files} />
+      <FileList sx={{
+        mt: 8, 
+        pl: `env(safe-area-inset-left, 0)`,
+        pr: `env(safe-area-inset-right, 0)`,
+       }} files={files} />
     </Box>
   )
 }
diff --git a/app/globals.css b/app/globals.css
@@ -33,7 +33,11 @@ body {
 } */
 
 html, body {
-  min-height: 100vh;
+  /* min-height: 100vh; */
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 .snackbar-container {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,16 +1,19 @@
-import "./globals.css";
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
-import { CssBaseline } from "@mui/material";
-import { AppLayout } from "./app-layout";
-import { ThemeStoreProvider } from "@/src/stores/theme-store";
-
+import "./globals.css"
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter"
+import { CssBaseline } from "@mui/material"
+import { AppLayout } from "./app-layout"
+import { ThemeStoreProvider } from "@/src/stores/theme-store"
+import type { Viewport } from 'next'
+
+export const viewport: Viewport = {
+  viewportFit: "cover",
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
-
   return (
     <html lang="en">
       <head>
@@ -20,14 +23,12 @@ export default function RootLayout({
         <AppRouterCacheProvider>
           <ThemeStoreProvider>
             <CssBaseline />
-            <AppLayout>
-              {children}
-            </AppLayout>
+            <AppLayout>{children}</AppLayout>
           </ThemeStoreProvider>
         </AppRouterCacheProvider>
       </body>
     </html>
-  );
+  )
 }
 
-export const dynamic = "force-static"
+export const dynamic = "force-static"
diff --git a/app/redirect/page.tsx b/app/redirect/page.tsx
@@ -40,7 +40,8 @@ export default function Page() {
           flexDirection: "column",
         }}
       >
-        <Box
+        <CircularProgress />
+        {/* <Box
           sx={{
             width: 100,
             height: 100,
@@ -78,7 +79,7 @@ export default function Page() {
             />
           )}
         </Box>
-        <Box>Connecting...</Box>
+        <Box>Connecting...</Box> */}
       </Backdrop>
     </Box>
   )

diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/components/mini-player.tsx b/src/components/mini-player.tsx
@@ -117,7 +117,7 @@ const TimelineSlider = () => {
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-          mt: -1.5,
+          mt: -2,
         }}
       >
         <Typography variant="caption" color={colorOnSurfaceVariant} sx={{}}>