make game list work better on mobile

acmucsd · May 10, 2024 · 1ff1bd5 · 1ff1bd5
1 parent 2416726
commit 1ff1bd5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx b/src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
@@ -213,14 +213,14 @@ const ChallengePanel: FC = () => {
           </Tabs.List>
         </Tabs>
       </Stack>
-      <ScrollArea
-        h={isMobile ? undefined : 'calc(100vh - 7rem)'}
-        pos="relative"
-        offsetScrollbars
-        scrollbarSize={4}
-        style={{ flex: 'auto' }}
-      >
-        {currentChallenges && currentChallenges.length ? (
+      {currentChallenges && currentChallenges.length ? (
+        <ScrollArea
+          h={isMobile ? undefined : 'calc(100vh - 7rem)'}
+          pos="relative"
+          offsetScrollbars
+          scrollbarSize={4}
+          style={{ flex: 'auto' }}
+        >
           <SimpleGrid
             p="xs"
             pt={0}
@@ -246,15 +246,15 @@ const ChallengePanel: FC = () => {
               />
             ))}
           </SimpleGrid>
-        ) : (
-          <Center h="calc(100vh - 10rem)">
-            <Stack gap={0}>
-              <Title order={2}>{t('game.content.all_solved.title')}</Title>
-              <Text>{t('game.content.all_solved.comment')}</Text>
-            </Stack>
-          </Center>
-        )}
-      </ScrollArea>
+        </ScrollArea>
+      ) : (
+        <Center style={{ flex: 'auto', alignSelf: 'center' }}>
+          <Stack gap={0} style={{ padding: '1rem' }}>
+            <Title order={2}>{t('game.content.all_solved.title')}</Title>
+            <Text>{t('game.content.all_solved.comment')}</Text>
+          </Stack>
+        </Center>
+      )}
       {game?.writeupRequired && (
         <WriteupSubmitModal
           opened={writeupSubmitOpened}

diff --git a/src/GZCTF/ClientApp/src/components/GameCard.tsx b/src/GZCTF/ClientApp/src/components/GameCard.tsx
@@ -55,7 +55,7 @@ const GameCard: FC<GameCardProps> = ({ game, ...others }) => {
     >
       <Card.Section>
         <Group wrap="nowrap" align="flex-start">
-          <BackgroundImage src={poster ?? ''} h="10rem" maw="20rem" miw="20rem">
+          <BackgroundImage src={poster ?? ''} h="10rem" maw="20rem">
             <Center h="100%">
               {!poster && <Icon path={mdiFlagOutline} size={4} color={theme.colors.gray[5]} />}
             </Center>

diff --git a/src/GZCTF/ClientApp/src/locales/en_US/game.json b/src/GZCTF/ClientApp/src/locales/en_US/game.json
@@ -129,7 +129,7 @@
     },
     "notice_type": {
       "all": "All",
-      "challenge": "Challenge",
+      "challenge": "Challenges",
       "events": "News",
       "game": "Notice"
     },