Skip to content

Commit 50b1f43

Browse files
authored
Improve responsive layout on small devices (#270)
* improve responsive layout on small devices * hide scroll buttons on mobile * organise imports
1 parent 597a0ea commit 50b1f43

File tree

5 files changed

+22
-17
lines changed

5 files changed

+22
-17
lines changed

interface/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
66
<link rel="stylesheet" href="%PUBLIC_URL%/css/roboto.css">
77
<link rel="manifest" href="%PUBLIC_URL%/app/manifest.json">
88
<title>ESP8266 React</title>

interface/src/components/SectionContent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface SectionContentProps {
1010
const SectionContent: React.FC<SectionContentProps> = (props) => {
1111
const { children, title, titleGutter } = props;
1212
return (
13-
<Paper sx={{ p: 2, m: 3 }}>
13+
<Paper sx={{ p: 2, m: 2 }}>
1414
<Typography variant="h6" gutterBottom={titleGutter}>
1515
{title}
1616
</Typography>

interface/src/components/layout/Layout.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

2-
import { FC, useState } from 'react';
2+
import { FC, useState, useEffect } from 'react';
3+
import { useLocation } from 'react-router-dom';
34

45
import { Box, Toolbar } from '@mui/material';
56

@@ -14,23 +15,24 @@ const Layout: FC = ({ children }) => {
1415

1516
const [mobileOpen, setMobileOpen] = useState(false);
1617
const [title, setTitle] = useState(PROJECT_NAME);
18+
const { pathname } = useLocation();
1719

1820
const handleDrawerToggle = () => {
1921
setMobileOpen(!mobileOpen);
2022
};
2123

24+
useEffect(() => setMobileOpen(false), [pathname]);
25+
2226
return (
2327
<LayoutContext.Provider value={{ title, setTitle }}>
24-
<Box sx={{ display: 'flex' }}>
25-
<LayoutAppBar title={title} onToggleDrawer={handleDrawerToggle} />
26-
<LayoutDrawer mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
27-
<Box
28-
component="main"
29-
sx={{ flexGrow: 1, width: { md: `calc(100% - ${DRAWER_WIDTH}px)` } }}
30-
>
31-
<Toolbar />
32-
{children}
33-
</Box>
28+
<LayoutAppBar title={title} onToggleDrawer={handleDrawerToggle} />
29+
<LayoutDrawer mobileOpen={mobileOpen} onClose={handleDrawerToggle} />
30+
<Box
31+
component="main"
32+
sx={{ marginLeft: { md: `${DRAWER_WIDTH}px` } }}
33+
>
34+
<Toolbar />
35+
{children}
3436
</Box>
3537
</LayoutContext.Provider >
3638
);

interface/src/components/routing/RouterTabs.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { FC } from 'react';
33
import { useNavigate } from 'react-router-dom';
44

5-
import { Tabs } from '@mui/material';
5+
import { Tabs, useMediaQuery, useTheme } from '@mui/material';
66

77
interface RouterTabsProps {
88
value: string | false;
@@ -11,12 +11,15 @@ interface RouterTabsProps {
1111
const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
1212
const navigate = useNavigate();
1313

14+
const theme = useTheme();
15+
const smallDown = useMediaQuery(theme.breakpoints.down('sm'));
16+
1417
const handleTabChange = (event: React.ChangeEvent<{}>, path: string) => {
1518
navigate(path);
1619
};
1720

1821
return (
19-
<Tabs value={value} onChange={handleTabChange} variant="fullWidth">
22+
<Tabs value={value} onChange={handleTabChange} variant={smallDown ? "scrollable" : "fullWidth"}>
2023
{children}
2124
</Tabs>
2225
);

interface/src/components/upload/useFileUpload.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface MediaUploadOptions {
99
upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
1010
}
1111

12-
const useUploadFile = ({ upload }: MediaUploadOptions) => {
12+
const useFileUpload = ({ upload }: MediaUploadOptions) => {
1313
const { enqueueSnackbar } = useSnackbar();
1414
const [uploading, setUploading] = useState<boolean>(false);
1515
const [uploadProgress, setUploadProgress] = useState<ProgressEvent>();
@@ -56,4 +56,4 @@ const useUploadFile = ({ upload }: MediaUploadOptions) => {
5656
return [uploadFile, cancelUpload, uploading, uploadProgress] as const;
5757
};
5858

59-
export default useUploadFile;
59+
export default useFileUpload;

0 commit comments

Comments
 (0)