From 88b8d95ffdddb10c8234854cc6e1d8b8e1e076ca Mon Sep 17 00:00:00 2001
From: Sean <ussa.say@gmail.com>
Date: Thu, 9 May 2024 20:57:56 -0700
Subject: [PATCH] better mobile support

don't remove features from mobile, even if it breaks the site
---
 .../ClientApp/src/components/AppHeader.tsx    | 30 ++++++++++---
 .../ClientApp/src/components/IconTabs.tsx     |  2 +-
 .../ClientApp/src/components/TeamCard.tsx     |  2 +-
 .../ClientApp/src/components/TeamRank.tsx     | 44 +++++++++----------
 .../ClientApp/src/components/WithNavbar.tsx   |  2 +-
 src/GZCTF/ClientApp/src/pages/Index.tsx       | 36 +++++++--------
 .../ClientApp/src/pages/games/[id]/Index.tsx  | 13 +++---
 .../src/pages/posts/[postId]/edit.tsx         | 17 +++----
 8 files changed, 76 insertions(+), 70 deletions(-)

diff --git a/src/GZCTF/ClientApp/src/components/AppHeader.tsx b/src/GZCTF/ClientApp/src/components/AppHeader.tsx
index cc67d484..110546eb 100644
--- a/src/GZCTF/ClientApp/src/components/AppHeader.tsx
+++ b/src/GZCTF/ClientApp/src/components/AppHeader.tsx
@@ -3,7 +3,10 @@ import { createStyles } from '@mantine/emotion'
 import {
   mdiAccountCircleOutline,
   mdiAccountGroupOutline,
+  mdiBullhornOutline,
   mdiCached,
+  mdiFlagOutline,
+  mdiHomeVariantOutline,
   mdiLogout,
   mdiTranslate,
   mdiWeatherNight,
@@ -94,6 +97,27 @@ const AppHeader: FC = () => {
             <Menu.Dropdown>
               {user && !error ? (
                 <>
+                  <Menu.Item
+                    component={Link}
+                    to="/"
+                    leftSection={<Icon path={mdiHomeVariantOutline} size={1} />}
+                  >
+                    {t('common.tab.home')}
+                  </Menu.Item>
+                  <Menu.Item
+                    component={Link}
+                    to="/posts"
+                    leftSection={<Icon path={mdiBullhornOutline} size={1} />}
+                  >
+                    {t('common.tab.post')}
+                  </Menu.Item>
+                  <Menu.Item
+                    component={Link}
+                    to="/games"
+                    leftSection={<Icon path={mdiFlagOutline} size={1} />}
+                  >
+                    {t('common.tab.game')}
+                  </Menu.Item>
                   <Menu.Item
                     component={Link}
                     to="/teams"
@@ -108,12 +132,6 @@ const AppHeader: FC = () => {
                   >
                     {t('common.tab.account.profile')}
                   </Menu.Item>
-                  <Menu.Item
-                    onClick={clearLocalCache}
-                    leftSection={<Icon path={mdiCached} size={1} />}
-                  >
-                    {t('common.tab.account.clean_cache')}
-                  </Menu.Item>
                   <Menu.Item
                     color="red"
                     onClick={logout}
diff --git a/src/GZCTF/ClientApp/src/components/IconTabs.tsx b/src/GZCTF/ClientApp/src/components/IconTabs.tsx
index 29b127e3..85e71209 100644
--- a/src/GZCTF/ClientApp/src/components/IconTabs.tsx
+++ b/src/GZCTF/ClientApp/src/components/IconTabs.tsx
@@ -163,7 +163,7 @@ const IconTabs: FC<IconTabsProps> = (props) => {
   ))
 
   return (
-    <Group gap={0} justify="space-between" w="100%" wrap="nowrap">
+    <Group gap={0} justify="space-between" w="100%">
       {aside}
       {withIcon && (
         <LogoHeader
diff --git a/src/GZCTF/ClientApp/src/components/TeamCard.tsx b/src/GZCTF/ClientApp/src/components/TeamCard.tsx
index a6b6d677..7bea0947 100644
--- a/src/GZCTF/ClientApp/src/components/TeamCard.tsx
+++ b/src/GZCTF/ClientApp/src/components/TeamCard.tsx
@@ -41,7 +41,7 @@ const TeamCard: FC<TeamCardProps> = (props) => {
       <Group align="stretch" style={{ flexWrap: 'nowrap', alignItems: 'center' }}>
         <Stack style={{ flexGrow: 1 }}>
           <Group align="stretch" justify="space-between">
-            <Avatar alt="avatar" color="cyan" size="lg" radius="md" src={team.avatar}>
+            <Avatar alt="avatar" color="orange" size="lg" radius="md" src={team.avatar}>
               {team.name?.slice(0, 1) ?? 'T'}
             </Avatar>
 
diff --git a/src/GZCTF/ClientApp/src/components/TeamRank.tsx b/src/GZCTF/ClientApp/src/components/TeamRank.tsx
index 71229c98..98673d4d 100644
--- a/src/GZCTF/ClientApp/src/components/TeamRank.tsx
+++ b/src/GZCTF/ClientApp/src/components/TeamRank.tsx
@@ -60,7 +60,7 @@ const TeamRank: FC<CardProps> = (props) => {
     <Card {...props} shadow="sm" p="md">
       <Stack gap={8}>
         <Group gap="sm" wrap="nowrap">
-          <Avatar alt="avatar" color="cyan" size={50} radius="md" src={teamInfo?.rank?.avatar}>
+          <Avatar alt="avatar" color="orange" size={50} radius="md" src={teamInfo?.rank?.avatar}>
             {teamInfo?.rank?.name?.slice(0, 1) ?? 'T'}
           </Avatar>
           <Skeleton visible={!teamInfo}>
@@ -105,28 +105,26 @@ const TeamRank: FC<CardProps> = (props) => {
           </Stack>
         </Group>
         <Progress value={solved * 100} />
-        {!isMobile && (
-          <PasswordInput
-            value={teamInfo?.teamToken}
-            readOnly
-            leftSection={<Icon path={mdiKey} size={1} />}
-            variant="unstyled"
-            onClick={() => {
-              clipboard.copy(teamInfo?.teamToken)
-              showNotification({
-                color: 'teal',
-                message: t('team.notification.token.copied'),
-                icon: <Icon path={mdiCheck} size={1} />,
-              })
-            }}
-            styles={{
-              innerInput: {
-                cursor: 'copy',
-                fontFamily: theme.fontFamilyMonospace,
-              },
-            }}
-          />
-        )}
+        <PasswordInput
+          value={teamInfo?.teamToken}
+          readOnly
+          leftSection={<Icon path={mdiKey} size={1} />}
+          variant="unstyled"
+          onClick={() => {
+            clipboard.copy(teamInfo?.teamToken)
+            showNotification({
+              color: 'teal',
+              message: t('team.notification.token.copied'),
+              icon: <Icon path={mdiCheck} size={1} />,
+            })
+          }}
+          styles={{
+            innerInput: {
+              cursor: 'copy',
+              fontFamily: theme.fontFamilyMonospace,
+            },
+          }}
+        />
       </Stack>
     </Card>
   )
diff --git a/src/GZCTF/ClientApp/src/components/WithNavbar.tsx b/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
index 419aa518..cd5854e9 100644
--- a/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
+++ b/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
@@ -40,7 +40,7 @@ const WithNavBar: FC<WithNavBarProps> = ({
   const isMobile = useIsMobile()
 
   return (
-    <WithWiderScreen minWidth={minWidth}>
+    <WithWiderScreen minWidth={0}>
       <Watermark
         text={user?.userId ?? ''}
         textColor={colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7]}
diff --git a/src/GZCTF/ClientApp/src/pages/Index.tsx b/src/GZCTF/ClientApp/src/pages/Index.tsx
index bf70f03f..4debe787 100644
--- a/src/GZCTF/ClientApp/src/pages/Index.tsx
+++ b/src/GZCTF/ClientApp/src/pages/Index.tsx
@@ -116,25 +116,23 @@ const Home: FC = () => {
                     <PostCard key={post.id} post={post} onTogglePinned={onTogglePinned} />
                   ))}
             </Stack>
-            {!isMobile && (
-              <nav className={classes.wrapper}>
-                <div className={classes.inner}>
-                  <Stack>
-                    <Group>
-                      <Icon
-                        path={mdiFlagCheckered}
-                        size={1.5}
-                        color={theme.colors[theme.primaryColor][4]}
-                      />
-                      <Title order={3}>
-                        <Trans i18nKey="common.content.home.recent_games" />
-                      </Title>
-                    </Group>
-                    {recentGames?.map((game) => <RecentGame key={game.id} game={game} />)}
-                  </Stack>
-                </div>
-              </nav>
-            )}
+            <nav className={classes.wrapper}>
+              <div className={classes.inner}>
+                <Stack>
+                  <Group>
+                    <Icon
+                      path={mdiFlagCheckered}
+                      size={1.5}
+                      color={theme.colors[theme.primaryColor][4]}
+                    />
+                    <Title order={3}>
+                      <Trans i18nKey="common.content.home.recent_games" />
+                    </Title>
+                  </Group>
+                  {recentGames?.map((game) => <RecentGame key={game.id} game={game} />)}
+                </Stack>
+              </div>
+            </nav>
           </Group>
         </Stack>
       </Stack>
diff --git a/src/GZCTF/ClientApp/src/pages/games/[id]/Index.tsx b/src/GZCTF/ClientApp/src/pages/games/[id]/Index.tsx
index 673a89ff..369219e9 100644
--- a/src/GZCTF/ClientApp/src/pages/games/[id]/Index.tsx
+++ b/src/GZCTF/ClientApp/src/pages/games/[id]/Index.tsx
@@ -213,14 +213,11 @@ const GameDetail: FC = () => {
           {t('game.button.leave')}
         </Button>
       )}
-      {status === ParticipationStatus.Accepted &&
-        started &&
-        !isMobile &&
-        (!finished || game?.practiceMode) && (
-          <Button onClick={() => navigate(`/games/${numId}/challenges`)}>
-            {t('game.button.challenges')}
-          </Button>
-        )}
+      {status === ParticipationStatus.Accepted && started && (!finished || game?.practiceMode) && (
+        <Button onClick={() => navigate(`/games/${numId}/challenges`)}>
+          {t('game.button.challenges')}
+        </Button>
+      )}
     </>
   )
 
diff --git a/src/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx b/src/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx
index 59b1ea5d..7892a3cc 100644
--- a/src/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx
+++ b/src/GZCTF/ClientApp/src/pages/posts/[postId]/edit.tsx
@@ -160,17 +160,12 @@ const PostEdit: FC = () => {
       <WithRole requiredRole={Role.Admin}>
         <Stack mt={isMobile ? 25 : 30}>
           <Group justify={isMobile ? 'right' : 'space-between'}>
-            {!isMobile && (
-              <Title
-                order={1}
-                c={alpha(
-                  colorScheme === 'dark' ? theme.colors.light[6] : theme.colors.gray[7],
-                  0.5
-                )}
-              >
-                {`> ${postId === 'new' ? t('post.button.new') : t('post.button.edit')}`}
-              </Title>
-            )}
+            <Title
+              order={1}
+              c={alpha(colorScheme === 'dark' ? theme.colors.light[6] : theme.colors.gray[7], 0.5)}
+            >
+              {`> ${postId === 'new' ? t('post.button.new') : t('post.button.edit')}`}
+            </Title>
             <Group justify="right">
               {postId?.length === 8 && (
                 <>