From ad5130ddf57b100bb6c894412ae8ed047e708793 Mon Sep 17 00:00:00 2001
From: Zheng Fu <24203166+fuzheng1998@users.noreply.github.com>
Date: Sun, 15 Oct 2023 11:15:57 +1100
Subject: [PATCH] fix mobile: remove bottom scrollable view

---
 frontend/src/page/Dashboard.jsx | 120 ++++++++++++++++----------------
 frontend/src/page/Site.jsx      |  15 ++--
 2 files changed, 65 insertions(+), 70 deletions(-)

diff --git a/frontend/src/page/Dashboard.jsx b/frontend/src/page/Dashboard.jsx
index 909fe2f..8f05c1e 100644
--- a/frontend/src/page/Dashboard.jsx
+++ b/frontend/src/page/Dashboard.jsx
@@ -1,78 +1,76 @@
-import { useNavigate } from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-
-import SubNav from '../component/SubNav';
 import makePage from '../component/makePage';
-import { Context, useContext } from '../context';
-import { getPrimaryNavList, getSecondaryNavList } from '../component/NavList';
+import {Context, useContext} from '../context';
+import {getPrimaryNavList, getSecondaryNavList} from '../component/NavList';
 import SessionAlert from '../component/SessionAlert';
 
-const Dashboard = ({ }) => {
-  const { getters, setters } = useContext(Context);
-  const navigate = useNavigate();
-
-  const flattenedNavList = [];
-  getPrimaryNavList(getters.term).map(i => {
-    if (i.children && i.children.length > 0) {
-      i.children.map(c => {
-        flattenedNavList.push({
-          ...c,
-          loginRequired: i.loginRequired,
-        });
-      })
-    } else {
-      flattenedNavList.push(i);
-    }
-  });
-  getSecondaryNavList(getters.term).map(i => {
-    flattenedNavList.push(i);
-  });
+const Dashboard = ({}) => {
+    const {getters, setters} = useContext(Context);
+    const navigate = useNavigate();
 
-  const getUrl = (route, external) => {
-    if (external) return route;
-    return `/${getters.term}${route}`;
-  }
+    const flattenedNavList = [];
+    getPrimaryNavList(getters.term).map(i => {
+        if (i.children && i.children.length > 0) {
+            i.children.map(c => {
+                flattenedNavList.push({
+                    ...c,
+                    loginRequired: i.loginRequired,
+                });
+            })
+        } else {
+            flattenedNavList.push(i);
+        }
+    });
+    getSecondaryNavList(getters.term).map(i => {
+        flattenedNavList.push(i);
+    });
 
-  const redirect = route => {
-    if (route.includes('http')) {
-      window.open(route, '_blank').focus();
-    } else {
-      navigate(route);
+    const getUrl = (route, external) => {
+        if (external) return route;
+        return `/${getters.term}${route}`;
     }
-  };
 
-  return (
-    <>
-      <SessionAlert redirect={redirect}/>
-      <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '25px' }}>
-        {flattenedNavList.map((card, key) => {
-          if (card.loginRequired && !getters.loggedIn) return <></>;
-          return (
-            <Card onClick={() => redirect(getUrl(card.route, card.external))} sx={{ minWidth: 275, flex: 1, height: 150, cursor: 'pointer' }}>
-              <CardContent>
-                <Typography variant="h5" component="div" sx={{ mb: 3 }}>
-                  <card.Icon style={{paddingTop: '5px' }} /> {card.title}
-                </Typography>
-                <Typography variant="body2">
-                  {card.description}
-                </Typography>
-              </CardContent>
-            </Card>
-          )
-        })}
-      </div>
-    </>
-  );
+    const redirect = route => {
+        if (route.includes('http')) {
+            window.open(route, '_blank').focus();
+        } else {
+            navigate(route);
+        }
+    };
+
+    return (
+        <>
+            <SessionAlert redirect={redirect}/>
+            <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 3, m: 3}}>
+                {flattenedNavList.map((card, key) => {
+                    if (card.loginRequired && !getters.loggedIn) return <></>;
+                    return (
+                        <Card onClick={() => redirect(getUrl(card.route, card.external))}
+                              sx={{minWidth: 275, flex: 1, height: 150, cursor: 'pointer'}}>
+                            <CardContent>
+                                <Typography variant="h5" component="div" sx={{mb: 3}}>
+                                    <card.Icon style={{paddingTop: '5px'}}/>
+                                    {card.title}
+                                </Typography>
+                                <Typography variant="body2">
+                                    {card.description}
+                                </Typography>
+                            </CardContent>
+                        </Card>
+                    )
+                })}
+            </Box>
+        </>
+    );
 }
 
 export default makePage(Dashboard, {
-  loginRequired: false,
-  title: 'Dashboard',
+    loginRequired: false,
+    title: 'Dashboard',
 });
\ No newline at end of file
diff --git a/frontend/src/page/Site.jsx b/frontend/src/page/Site.jsx
index 613fff6..6894254 100644
--- a/frontend/src/page/Site.jsx
+++ b/frontend/src/page/Site.jsx
@@ -1,18 +1,15 @@
 import React from 'react';
 import Box from '@mui/material/Box';
-import Drawer from '@mui/material/Drawer';
-import AppBar from '@mui/material/AppBar';
 import CssBaseline from '@mui/material/CssBaseline';
 import Toolbar from '@mui/material/Toolbar';
-import { Outlet, useParams, useLocation, useNavigate } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import {Outlet, useLocation, useNavigate, useParams} from 'react-router-dom';
+import {Helmet} from 'react-helmet';
 
-import { Context, useContext } from '../context';
+import {Context, useContext} from '../context';
 import Header from '../component/Header';
 import Navbar from '../component/Navbar';
 import config from '../config';
-import { apiCall } from '../util/api';
-import { isMobileWidth, isDesktopWidth } from '../util/screen';
+import {isDesktopWidth, isMobileWidth} from '../util/screen';
 
 const drawerWidth = 230;
 
@@ -64,11 +61,11 @@ const SiteWrapper = ({ children }) => {
         <title>{getters.title}</title>
         <link rel="icon" type="image/x-icon" href="/favicon.png" />
       </Helmet>
-      <Box sx={{ display: 'flex', minWidth: '400px' }}>
+      <Box sx={{ display: 'flex'}}>
         <CssBaseline />
         <Header pageTitle={getters.title} sidebarWidth={sidebarRealTimeWidth} menuToggle={() => setters.setSidebarOpen(!getters.sidebarOpen)} />
         <Navbar drawerWidth={drawerWidth} />
-        <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <Box component="main" sx={{ flexGrow: 1}}>
           <Toolbar />
           <Outlet />
         </Box>