style: challenge page

GZTimeWalker · Jun 2, 2024 · a8254e1 · a8254e1
1 parent b07dcd3
commit a8254e1
Showing 5 changed files with 56 additions and 108 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -66,15 +66,9 @@ const ChallengePanel: FC = () => {
   // skeleton for loading
   if (!challenges) {
     return (
-      <Group
-        gap="sm"
-        wrap="nowrap"
-        justify="space-between"
-        align="flex-start"
-        maw="calc(100% - 20rem)"
-      >
-        <Stack miw="10rem" gap={6}>
-          {Array(10)
+      <>
+        <Stack miw="10rem" maw="10rem">
+          {Array(9)
             .fill(null)
             .map((_v, i) => (
               <Group key={i} wrap="nowrap" p={10}>
@@ -91,7 +85,7 @@ const ChallengePanel: FC = () => {
           w="calc(100% - 9rem)"
           cols={{ base: 3, w18: 4, w24: 6, w30: 8, w36: 10, w42: 12, w48: 14 }}
         >
-          {Array(8)
+          {Array(13)
             .fill(null)
             .map((_v, i) => (
               <Card key={i} radius="md" shadow="sm">
@@ -115,13 +109,13 @@ const ChallengePanel: FC = () => {
               </Card>
             ))}
         </SimpleGrid>
-      </Group>
+      </>
     )
   }
 
   if (allChallenges.length === 0) {
     return (
-      <Center miw="calc(100% - 20rem)" h="calc(100vh - 100px)">
+      <Center h="calc(100vh - 100px)">
         <Empty
           bordered
           description={t('game.content.no_challenge')}
@@ -134,13 +128,7 @@ const ChallengePanel: FC = () => {
   }
 
   return (
-    <Group
-      gap="sm"
-      wrap="nowrap"
-      justify="space-between"
-      align="flex-start"
-      miw="calc(100% - 20rem)"
-    >
+    <>
       <Stack miw="10rem">
         {game?.writeupRequired && (
           <>
@@ -218,15 +206,20 @@ const ChallengePanel: FC = () => {
         </Tabs>
       </Stack>
       <ScrollArea
-        w="calc(100% - 9rem)"
-        h="calc(100vh - 7rem)"
+        h="calc(100vh - 6.67rem)"
         pos="relative"
         offsetScrollbars
         scrollbarSize={4}
+        styles={{
+          root: {
+            flexGrow: 1,
+          },
+        }}
       >
         {currentChallenges && currentChallenges.length ? (
           <SimpleGrid
             p="xs"
+            w="100%"
             pt={0}
             spacing="sm"
             cols={{ base: 3, w18: 4, w24: 6, w30: 8, w36: 10, w42: 12, w48: 14 }}
@@ -287,7 +280,7 @@ const ChallengePanel: FC = () => {
           challengeId={challenge.id}
         />
       )}
-    </Group>
+    </>
   )
 }
 

diff --git a/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx b/src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx
@@ -21,7 +21,7 @@ import Empty from '@Components/Empty'
 import { InlineMarkdownRender } from '@Components/MarkdownRender'
 import { NoticTypeIconMap } from '@Utils/Shared'
 import api, { GameNotice, NoticeType } from '@Api'
-import classes from '@Styles/Typography.module.css'
+import typoClasses from '@Styles/Typography.module.css'
 
 enum NoticeFilter {
   All = 'all',
@@ -87,6 +87,8 @@ const formatNotice = (t: TFunction, notice: GameNotice) => {
   }
 }
 
+const PANEL_HEIGHT = 'calc(100vh - 25rem)'
+
 const GameNoticePanel: FC = () => {
   const { id } = useParams()
   const numId = parseInt(id ?? '-1')
@@ -176,15 +178,19 @@ const GameNoticePanel: FC = () => {
   )
 
   return (
-    <Card shadow="sm" w="20rem">
+    <Card shadow="sm" w="100%">
       <Stack gap="xs">
         <SegmentedControl
           value={filter}
           color={theme.primaryColor}
+          fullWidth
           styles={{
             root: {
               background: 'transparent',
             },
+            label: {
+              fontWeight: 500,
+            },
           }}
           onChange={(value) => setFilter(value as NoticeFilter)}
           data={[
@@ -195,7 +201,7 @@ const GameNoticePanel: FC = () => {
           ]}
         />
         {filteredNotices.length ? (
-          <ScrollArea offsetScrollbars scrollbarSize={0} h="calc(100vh - 25rem)">
+          <ScrollArea offsetScrollbars scrollbarSize={0} h={PANEL_HEIGHT}>
             <List size="sm" spacing={3}>
               {filteredNotices.map((notice) => (
                 <List.Item
@@ -215,7 +221,7 @@ const GameNoticePanel: FC = () => {
                         source={formatNotice(t, notice)}
                       />
                     ) : (
-                      <Text fz="sm" fw={500} c="dimmed" className={classes.inline}>
+                      <Text fz="sm" fw={500} c="dimmed" className={typoClasses.inline}>
                         {formatNotice(t, notice)}
                       </Text>
                     )}
@@ -225,7 +231,7 @@ const GameNoticePanel: FC = () => {
             </List>
           </ScrollArea>
         ) : (
-          <Center h="calc(100vh - 25rem)">
+          <Center h={PANEL_HEIGHT}>
             <Empty description={t('game.content.no_notice')} />
           </Center>
         )}

diff --git a/src/GZCTF/ClientApp/src/components/TeamRank.tsx b/src/GZCTF/ClientApp/src/components/TeamRank.tsx
@@ -46,61 +46,47 @@ const TeamRank: FC<CardProps> = (props) => {
     }
   }, [error])
 
+  const rank = teamInfo?.rank
+
+  const item = (label: string, value?: null | string | number) => (
+    <Stack gap={2}>
+      <Skeleton visible={!rank}>
+        <Text ff="monospace" fw="bold">
+          {value ?? '0'}
+        </Text>
+      </Skeleton>
+      <Text size="xs" fw={500}>
+        {label}
+      </Text>
+    </Stack>
+  )
+
   return (
-    <Card {...props} shadow="sm" p="md">
-      <Stack gap={8}>
+    <Card {...props} shadow="sm">
+      <Stack gap="xs">
         <Group gap="sm" wrap="nowrap">
-          <Avatar alt="avatar" size={50} radius="md" src={teamInfo?.rank?.avatar}>
-            {teamInfo?.rank?.name?.slice(0, 1) ?? 'T'}
+          <Avatar alt="avatar" size={50} radius="md" src={rank?.avatar}>
+            {rank?.name?.slice(0, 1) ?? 'T'}
           </Avatar>
-          <Skeleton visible={!teamInfo}>
+          <Skeleton visible={!rank}>
             <Stack gap={2} align="flex-start">
               <Title order={3} lineClamp={1}>
-                {teamInfo?.rank?.name ?? 'Team'}
+                {rank?.name ?? 'Team'}
               </Title>
-              {teamInfo?.rank?.organization && (
+              {rank?.organization && (
                 <Badge size="xs" variant="outline">
-                  {teamInfo.rank.organization}
+                  {rank.organization}
                 </Badge>
               )}
             </Stack>
           </Skeleton>
         </Group>
         <Group grow ta="center">
-          <Stack gap={2}>
-            <Skeleton visible={!teamInfo}>
-              <Text ff="monospace" fw="bold">
-                {teamInfo?.rank?.rank ?? '0'}
-              </Text>
-            </Skeleton>
-            <Text size="xs">{t('game.label.score_table.rank_total')}</Text>
-          </Stack>
-          {teamInfo?.rank?.organization && (
-            <Stack gap={2}>
-              <Skeleton visible={!teamInfo}>
-                <Text ff="monospace" fw="bold">
-                  {teamInfo?.rank?.organizationRank ?? '0'}
-                </Text>
-              </Skeleton>
-              <Text size="xs">{t('game.label.score_table.rank_organization')}</Text>
-            </Stack>
-          )}
-          <Stack gap={2}>
-            <Skeleton visible={!teamInfo}>
-              <Text ff="monospace" fw="bold">
-                {teamInfo?.rank?.score ?? '0'}
-              </Text>
-            </Skeleton>
-            <Text size="xs">{t('game.label.score_table.score')}</Text>
-          </Stack>
-          <Stack gap={2}>
-            <Skeleton visible={!teamInfo}>
-              <Text ff="monospace" fw="bold">
-                {teamInfo?.rank?.solvedCount ?? '0'}
-              </Text>
-            </Skeleton>
-            <Text size="xs">{t('game.label.score_table.solved_count')}</Text>
-          </Stack>
+          {item(t('game.label.score_table.rank_total'), rank?.rank)}
+          {rank?.organization &&
+            item(t('game.label.score_table.rank_organization'), rank?.organizationRank)}
+          {item(t('game.label.score_table.score'), rank?.score)}
+          {item(t('game.label.score_table.solved_count'), rank?.solvedCount)}
         </Group>
         <Progress value={solved * 100} />
         {!isMobile && (

diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/Challenges.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/Challenges.tsx
@@ -13,9 +13,9 @@ const Challenges: FC = () => {
     <WithNavBar width="90%">
       <WithRole requiredRole={Role.User}>
         <WithGameTab>
-          <Group gap="sm" justify="space-between" align="flex-start" grow wrap="nowrap">
+          <Group gap="sm" justify="space-between" align="flex-start" wrap="nowrap">
             <ChallengePanel />
-            <Stack maw="20rem">
+            <Stack gap="sm" miw="22rem" maw="22rem">
               <TeamRank />
               <GameNoticePanel />
             </Stack>

diff --git a/src/GZCTF/ClientApp/src/styles/components/ScrollSelect.module.css b/src/GZCTF/ClientApp/src/styles/components/ScrollSelect.module.css
@@ -1,40 +1,3 @@
-/* const useItemStyle = createStyles((theme, _, u) => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: `${rem(8)} ${theme.spacing.sm}`,
-    marginTop: '2pt',
-    userSelect: 'none',
-    cursor: 'pointer',
-    borderRadius: theme.radius.md,
-
-    '&:hover': {
-      [u.dark]: {
-        backgroundColor: theme.colors.dark[6],
-      },
-
-      [u.light]: {
-        backgroundColor: theme.colors.light[2],
-      },
-    },
-
-    '&[data-active]': {
-      [u.dark]: {
-        backgroundColor: theme.colors.dark[5],
-      },
-
-      [u.light]: {
-        backgroundColor: theme.colors.light[3],
-      },
-    },
-
-    '&[data-disabled]': {
-      opacity: 0.4,
-      pointerEvents: 'none',
-    },
-  },
-})) */
-
 .item {
   display: flex;
   align-items: center;