Merge pull request #60 from Sports-day/feature/#59-small-fix

レイアウト周りのバグを一部修正 Feature/#59 small fix
Sports-day · Oct 7, 2024 · 833d5ec · 833d5ec
2 parents 2938b64 + 575c17c
commit 833d5ec
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 35 deletions.
diff --git a/app/(authenticated)/images/page.tsx b/app/(authenticated)/images/page.tsx
@@ -21,7 +21,7 @@ export default async function ImagesPage() {
                 <Typography color="text.primary">画像管理</Typography>
             </Breadcrumbs>
             <CardBackground
-                title={"すべてのタグ"}
+                title={"すべての画像"}
                 button={"作成"}
                 link={"/images/create"}
             >
@@ -33,6 +33,7 @@ export default async function ImagesPage() {
                             href={`/images/${image.id}`}
                             component={NextLink}
                             key={image.id}
+                            color={"secondary"}
                         >
                             <Stack direction={"row"} spacing={2} alignItems={"center"} sx={{width:"100%"}}>
                                 <Avatar src={`${process.env.NEXT_PUBLIC_API_URL}/images/${image.id}/file`}/>

diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx
@@ -16,7 +16,7 @@ export default function RootLayout({
             <CssBaseline/>
             <Box sx={{ display: 'flex' }}>
                 <Navigation/>
-                <Stack minHeight="100lvh-8" width="100%" mt={8}>
+                <Stack minHeight="100lvh-8" width="100%" mt={8} overflow={"scrollable"}>
                     {children}
                 </Stack>
             </Box>

diff --git a/app/(authenticated)/sports/create/page.tsx b/app/(authenticated)/sports/create/page.tsx
@@ -18,7 +18,7 @@ export default async function CreateSport() {
                 <Link
                     underline="hover"
                     color="inherit"
-                    href="../../sports"
+                    href="/sports"
                     component={NextLink}
                 >
                     競技管理

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -21,16 +21,14 @@ export default function RootLayout({
 }) {
     return (
         <html lang="ja">
-        <body className={noto.className}>
-
-        <AppRouterCacheProvider>
-                <ColorModeProvider>
-                    <CssBaseline/>
-                    {children}
-                </ColorModeProvider>
-        </AppRouterCacheProvider>
-
-        </body>
+            <body className={noto.className}>
+                <AppRouterCacheProvider>
+                    <ColorModeProvider>
+                        <CssBaseline/>
+                        {children}
+                    </ColorModeProvider>
+                </AppRouterCacheProvider>
+            </body>
         </html>
     )
 }
diff --git a/components/layout/navigation.tsx b/components/layout/navigation.tsx
@@ -26,8 +26,10 @@ export const Navigation = () => {
     const [isClosing, setIsClosing] = React.useState(false);
 
     const handleDrawerClose = () => {
-        setIsClosing(true);
-        setMobileOpen(false);
+        if (mobileOpen) {
+            setIsClosing(true);
+            setMobileOpen(false);
+        }
     }
     const handleDrawerTransitionEnd = () => {
         setIsClosing(false);
@@ -48,7 +50,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">
@@ -65,7 +67,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">
@@ -102,7 +104,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/sports"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">
@@ -170,7 +172,7 @@ export const Navigation = () => {
                     sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
                     component={NextLink}
                     href={"/roles"}
-                    onClick={handleDrawerToggle}
+                    onClick={handleDrawerClose}
                 >
                     <Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
                            alignItems="center">

diff --git a/components/match/matchEditor.tsx b/components/match/matchEditor.tsx
@@ -216,21 +216,22 @@ export default function MatchEditor(props: MatchEditorProps) {
                     <Stack mx={2} my={2} spacing={2} direction={"column"}>
 
                         <Stack
-                            direction={"row"} spacing={1}
-                            sx={{overflow:"auto"}}
+                            sx={{width:"100%", overflow:"auto"}}
                         >
-                            <Chip
-                                label={`審判：${judgeTeamName}`}
-                                avatar={<Avatar><HiFlag/></Avatar>} color={"secondary"}
-                            />
-                            <Chip
-                                label={`試合場所：${locationName}`}
-                                avatar={<Avatar><HiMapPin/></Avatar>} color={"secondary"}
-                            />
-                            <Chip
-                                label={`試合開始：${formattedDate}`}
-                                avatar={<Avatar><HiClock/></Avatar>} color={"secondary"}
-                            />
+                            <Stack width={"100%"} direction={"row"} >
+                                <Chip
+                                    label={`審判：${judgeTeamName}`}
+                                    avatar={<Avatar><HiFlag/></Avatar>} color={"secondary"}
+                                />
+                                <Chip
+                                    label={`試合場所：${locationName}`}
+                                    avatar={<Avatar><HiMapPin/></Avatar>} color={"secondary"}
+                                />
+                                <Chip
+                                    label={`試合開始：${formattedDate}`}
+                                    avatar={<Avatar><HiClock/></Avatar>} color={"secondary"}
+                                />
+                            </Stack>
                         </Stack>
 
                         <Divider/>

diff --git a/components/theme/colorModeProvider.tsx b/components/theme/colorModeProvider.tsx
@@ -45,11 +45,11 @@ const baseTheme = {
                 },
                 'body::-webkit-scrollbar': {
                     width: '5px',
-                    height: '8px'
+                    height: '10px'
                 },
                 '::-webkit-scrollbar': {
                     width: '5px',
-                    height: '3px'
+                    height: '7px'
                 },
                 '::-webkit-scrollbar-track': {
                     background: "rgba(47,57,118,0)",