Improve responsive layout on small devices (#270)

rjwats · web-flow · commit 50b1f43b80bd · 2021-12-15T11:14:02.000Z
* improve responsive layout on small devices

* hide scroll buttons on mobile

* organise imports
diff --git a/interface/public/index.html b/interface/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
     <link rel="stylesheet" href="%PUBLIC_URL%/css/roboto.css">
     <link rel="manifest" href="%PUBLIC_URL%/app/manifest.json">
     <title>ESP8266 React</title>
diff --git a/interface/src/components/SectionContent.tsx b/interface/src/components/SectionContent.tsx
@@ -10,7 +10,7 @@ interface SectionContentProps {
 const SectionContent: React.FC<SectionContentProps> = (props) => {
   const { children, title, titleGutter } = props;
   return (
-    <Paper sx={{ p: 2, m: 3 }}>
+    <Paper sx={{ p: 2, m: 2 }}>
       <Typography variant="h6" gutterBottom={titleGutter}>
         {title}
       </Typography>
diff --git a/interface/src/components/layout/Layout.tsx b/interface/src/components/layout/Layout.tsx
@@ -1,5 +1,6 @@
 
-import { FC, useState } from 'react';
+import { FC, useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { Box, Toolbar } from '@mui/material';
 
@@ -14,23 +15,24 @@ const Layout: FC = ({ children }) => {
 
   const [mobileOpen, setMobileOpen] = useState(false);
   const [title, setTitle] = useState(PROJECT_NAME);
+  const { pathname } = useLocation();
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
 
+  useEffect(() => setMobileOpen(false), [pathname]);
+
   return (
     <LayoutContext.Provider value={{ title, setTitle }}>
-      <Box sx={{ display: 'flex' }}>
-        <LayoutAppBar title={title} onToggleDrawer={handleDrawerToggle} />
-        <LayoutDrawer mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
-        <Box
-          component="main"
-          sx={{ flexGrow: 1, width: { md: `calc(100% - ${DRAWER_WIDTH}px)` } }}
-        >
-          <Toolbar />
-          {children}
-        </Box>
+      <LayoutAppBar title={title} onToggleDrawer={handleDrawerToggle} />
+      <LayoutDrawer mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
+      <Box
+        component="main"
+        sx={{ marginLeft: { md: `${DRAWER_WIDTH}px` } }}
+      >
+        <Toolbar />
+        {children}
       </Box>
     </LayoutContext.Provider >
   );
diff --git a/interface/src/components/routing/RouterTabs.tsx b/interface/src/components/routing/RouterTabs.tsx
@@ -2,7 +2,7 @@
 import React, { FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Tabs } from '@mui/material';
+import { Tabs, useMediaQuery, useTheme } from '@mui/material';
 
 interface RouterTabsProps {
   value: string | false;
@@ -11,12 +11,15 @@ interface RouterTabsProps {
 const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
   const navigate = useNavigate();
 
+  const theme = useTheme();
+  const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
+
   const handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
     navigate(path);
   };
 
   return (
-    <Tabs value={value} onChange={handleTabChange} variant="fullWidth">
+    <Tabs value={value} onChange={handleTabChange} variant={smallDown ? "scrollable" : "fullWidth"}>
       {children}
     </Tabs>
   );
diff --git a/interface/src/components/upload/useFileUpload.ts b/interface/src/components/upload/useFileUpload.ts
@@ -9,7 +9,7 @@ interface MediaUploadOptions {
   upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
 }
 
-const useUploadFile = ({ upload }: MediaUploadOptions) => {
+const useFileUpload = ({ upload }: MediaUploadOptions) => {
   const { enqueueSnackbar } = useSnackbar();
   const [uploading, setUploading] = useState<boolean>(false);
   const [uploadProgress, setUploadProgress] = useState<ProgressEvent>();
@@ -56,4 +56,4 @@ const useUploadFile = ({ upload }: MediaUploadOptions) => {
   return [uploadFile, cancelUpload, uploading, uploadProgress] as const;
 };
 
-export default useUploadFile;
+export default useFileUpload;
