feat: add wider screen requirement

GZTimeWalker · Sep 6, 2022 · 8261ea2 · 8261ea2
1 parent f3781fd
commit 8261ea2
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 48 deletions.
diff --git a/GZCTF/ClientApp/src/components/WithGameTab.tsx b/GZCTF/ClientApp/src/components/WithGameTab.tsx
@@ -141,27 +141,28 @@ const WithGameTab: FC<WithGameTabProps> = ({ game, isLoading, status, children }
   }, [game])
 
   return (
-    <Stack style={{ position: 'relative' }}>
-      <LoadingOverlay
-        visible={isLoading ?? false}
-        overlayOpacity={1}
-        overlayColor={theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2]}
-      />
-      <IconTabs
-        active={activeTab}
-        onTabChange={onChange}
-        tabs={tabs}
-        left={
-          game && (
-            <>
-              <Title>{game?.title}</Title>
-              <GameCountdown game={game} />
-            </>
-          )
-        }
-      />
-      {children}
-    </Stack>
+
+      <Stack style={{ position: 'relative' }}>
+        <LoadingOverlay
+          visible={isLoading ?? false}
+          overlayOpacity={1}
+          overlayColor={theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2]}
+        />
+        <IconTabs
+          active={activeTab}
+          onTabChange={onChange}
+          tabs={tabs}
+          left={
+            game && (
+              <>
+                <Title>{game?.title}</Title>
+                <GameCountdown game={game} />
+              </>
+            )
+          }
+        />
+        {children}
+      </Stack>
   )
 }
 

diff --git a/GZCTF/ClientApp/src/components/WithNavbar.tsx b/GZCTF/ClientApp/src/components/WithNavbar.tsx
@@ -9,27 +9,33 @@ import {
 } from '@mantine/core'
 import AppHeader from './AppHeader'
 import AppNavbar from './AppNavbar'
+import WithWiderScreen from './WithWiderScreen'
 
 interface WithNavBarProps extends React.PropsWithChildren {
   width?: string
+  minWidth?: number
   padding?: MantineNumberSize
   isLoading?: boolean
 }
 
-const WithNavBar: FC<WithNavBarProps> = ({ children, width, padding, isLoading }) => {
+const WithNavBar: FC<WithNavBarProps> = ({ children, width, padding, isLoading, minWidth }) => {
   const theme = useMantineTheme()
 
   return (
-    <AppShell padding={padding ?? 'md'} fixed navbar={<AppNavbar />} header={<AppHeader />}>
-      <Center style={{ width: '100%' }}>
-        <LoadingOverlay
-          visible={isLoading ?? false}
-          overlayOpacity={1}
-          overlayColor={theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2]}
-        />
-        <Box style={{ width: width ?? '80%' }}>{children}</Box>
-      </Center>
-    </AppShell>
+    <WithWiderScreen minWidth={minWidth}>
+      <AppShell padding={padding ?? 'md'} fixed navbar={<AppNavbar />} header={<AppHeader />}>
+        <Center style={{ width: '100%' }}>
+          <LoadingOverlay
+            visible={isLoading ?? false}
+            overlayOpacity={1}
+            overlayColor={
+              theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.white[2]
+            }
+          />
+          <Box style={{ width: width ?? '80%' }}>{children}</Box>
+        </Center>
+      </AppShell>
+    </WithWiderScreen>
   )
 }
 

diff --git a/GZCTF/ClientApp/src/components/WithWiderScreen.tsx b/GZCTF/ClientApp/src/components/WithWiderScreen.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react'
+import { Stack, Title, Text } from '@mantine/core'
+import { useViewportSize } from '@mantine/hooks'
+import IconWiderScreenRequired from './icon/WiderScreenRequiredIcon'
+
+interface WithWiderScreenProps extends React.PropsWithChildren {
+  minWidth?: number
+}
+
+const WithWiderScreen: FC<WithWiderScreenProps> = ({ children, minWidth = 1080 }) => {
+  const view = useViewportSize()
+
+  const tooSmall = minWidth > 0 && view.width < minWidth
+
+  return tooSmall ? (
+    <Stack spacing={0} align="center" justify="center" style={{ height: 'calc(100vh - 32px)' }}>
+      <IconWiderScreenRequired />
+      <Title order={1} color="#00bfa5" style={{ fontWeight: 'lighter' }}>
+        页面宽度不足
+      </Title>
+      <Text style={{ fontWeight: 'bold' }}>请使用更宽的设备浏览本页面</Text>
+    </Stack>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default WithWiderScreen
diff --git a/GZCTF/ClientApp/src/components/admin/AdminPage.tsx b/GZCTF/ClientApp/src/components/admin/AdminPage.tsx
@@ -7,7 +7,7 @@ import { AdminTabProps } from './WithAdminTab'
 
 const AdminPage: FC<AdminTabProps> = (props) => {
   return (
-    <WithNavBar width="90%">
+    <WithNavBar width="90%" minWidth={1080}>
       <WithRole requiredRole={Role.Admin}>
         <WithAdminTab {...props} />
       </WithRole>

diff --git a/GZCTF/ClientApp/src/components/icon/WarningIcon.tsx b/GZCTF/ClientApp/src/components/icon/WarningIcon.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react'
+import { createStyles } from "@mantine/core"
+
+const useStyles = createStyles((theme) => ({
+  triangle: {
+    fill: theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[6],
+  },
+}))
+
+const IconWarning: FC = () => {
+
+  const { classes } = useStyles()
+
+  return (
+    <svg
+      id="Warning"
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 4000 4000"
+    >
+      <path
+        id="Rect"
+        fill="#dd5e5e"
+        d="M1600,2084V222h720V2084H1600Z"
+      />
+      <path
+        id="Triangle"
+        className={classes.triangle}
+        d="M2834.48,3844.61L345.28,2407.47V1592.53L2834.48,155.387l705.76,407.474V3437.14Zm0.89-2875.816L1049.27,2000l1786.1,1031.21V968.794Z"
+      />
+      <path
+        id="Parallelogram"
+        fill="#dd5e5e"
+        d="M1600,1999.85l720-415.7v782l-720,415.7v-782Z"
+      />
+      <circle
+        id="Circle"
+        fill="#cd3535"
+        cx="1960"
+        cy="3337"
+        r="391"
+      />
+    </svg>
+  )
+}
+
+export default IconWarning
diff --git a/GZCTF/ClientApp/src/components/icon/WiderScreenRequiredIcon.tsx b/GZCTF/ClientApp/src/components/icon/WiderScreenRequiredIcon.tsx
@@ -0,0 +1,61 @@
+import { FC } from 'react'
+import { createStyles } from "@mantine/core"
+
+const useStyles = createStyles((theme) => ({
+  triangle: {
+    fill: theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[6],
+  },
+}))
+
+const IconWiderScreenRequired: FC = () => {
+  const { classes } = useStyles()
+
+  return (
+    <svg
+      id="IconWiderScreenRequired"
+      xmlns="http://www.w3.org/2000/svg"
+      width="320"
+      height="320"
+      viewBox="0 0 6400 6400"
+    >
+      <path
+        id="arrowRodL2"
+        fill="#007f6e"
+        fillRule="evenodd"
+        d="M1920,2900v600H640V2900H1920Z"
+      />
+      <path
+        id="arrowRodL1"
+        fill="#00bfa5"
+        fillRule="evenodd"
+        d="M3200,2900v600H1920V2900H3200Z"
+      />
+      <path
+        id="Triangle"
+        className={classes.triangle}
+        fillRule="evenodd"
+        d="M3794.48,5044.61L1305.28,3607.47V2792.53l2489.2-1437.14,705.76,407.47V4637.14Zm0.89-2875.82L2009.27,3200l1786.1,1031.21V2168.79Z"
+      />
+      <path
+        id="arrowRodR"
+        fill="#00bfa5"
+        fillRule="evenodd"
+        d="M3200,3500V2900H5760v600H3200Z"
+      />
+      <path
+        id="arrowR"
+        fill="#1de9b6"
+        fillRule="evenodd"
+        d="M6400,3200L5268.63,4331.37l-424.27-424.26L5551.47,3200l-707.11-707.11,424.27-424.26,707.11,707.11h0Z"
+      />
+      <path
+        id="arrowL"
+        fill="#00bfa5"
+        fillRule="evenodd"
+        d="M1555.63,3907.11l-424.26,424.26L0,3200l424.264-424.26h0l707.106-707.11,424.26,424.26L848.528,3200Z"
+      />
+    </svg>
+  )
+}
+
+export default IconWiderScreenRequired
diff --git a/GZCTF/ClientApp/src/pages/Index.tsx b/GZCTF/ClientApp/src/pages/Index.tsx
@@ -95,7 +95,7 @@ const Home: FC = () => {
   usePageTitle()
 
   return (
-    <WithNavBar>
+    <WithNavBar minWidth={0}>
       <StickyHeader />
       <Stack align="center">
         <Group noWrap spacing={4} position="apart" align="flex-start" style={{ width: '100%' }}>

diff --git a/GZCTF/ClientApp/src/pages/[...all].tsx b/GZCTF/ClientApp/src/pages/[...all].tsx
@@ -18,11 +18,11 @@ const Error404: FC = () => {
   }, [location])
 
   return (
-    <WithNavBar>
+    <WithNavBar minWidth={0}>
       <Stack spacing={0} align="center" justify="center" style={{ height: 'calc(100vh - 32px)' }}>
         <Icon404 />
-        <Title order={2}>这是一处荒芜的地方</Title>
-        <Text>你为何会到这里来呢</Text>
+        <Title order={1} color="#00bfa5" style={{ fontWeight: "lighter" }}>页面不存在</Title>
+        <Text style={{ fontWeight: "bold" }}>一处荒芜，为何于此驻足</Text>
       </Stack>
     </WithNavBar>
   )

diff --git a/GZCTF/ClientApp/src/pages/games/Index.tsx b/GZCTF/ClientApp/src/pages/games/Index.tsx
@@ -24,14 +24,14 @@ const Games: FC = () => {
   usePageTitle('赛事')
 
   return (
-    <WithNavBar>
-      <StickyHeader />
-      <Stack>
-        {games.map((g) => (
-          <GameCard key={g.id} game={g} />
-        ))}
-      </Stack>
-    </WithNavBar>
+      <WithNavBar>
+        <StickyHeader />
+        <Stack>
+          {games.map((g) => (
+            <GameCard key={g.id} game={g} />
+          ))}
+        </Stack>
+      </WithNavBar>
   )
 }
 

diff --git a/GZCTF/ClientApp/src/pages/posts/Index.tsx b/GZCTF/ClientApp/src/pages/posts/Index.tsx
@@ -54,7 +54,7 @@ const Posts: FC = () => {
   }
 
   return (
-    <WithNavBar isLoading={!posts}>
+    <WithNavBar isLoading={!posts} minWidth={0}>
       <Stack justify="space-between">
         <StickyHeader />
         <Stack>

diff --git a/GZCTF/ClientApp/src/pages/posts/[postId]/Index.tsx b/GZCTF/ClientApp/src/pages/posts/[postId]/Index.tsx
@@ -49,7 +49,7 @@ const Post: FC = () => {
   usePageTitle(post?.title ?? 'Post')
 
   return (
-    <WithNavBar width="100%" padding={0} isLoading={!post}>
+    <WithNavBar width="100%" padding={0} isLoading={!post} minWidth={0}>
       <div ref={targetRef} className={classes.root}>
         <Stack
           spacing={6}

diff --git a/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx b/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx
@@ -126,7 +126,7 @@ const PostEdit: FC = () => {
   }, [curPost])
 
   return (
-    <WithNavBar>
+    <WithNavBar minWidth={900}>
       <WithRole requiredRole={Role.Admin}>
         <StickyHeader />
         <Stack mt={30}>