From 9cafcd3288430dc8c26cd0c31cafb73af8a5e229 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Fri, 6 May 2022 15:44:54 -0700
Subject: Improve layouts

---
 modern/src/components/NavBar.js      |  2 +-
 modern/src/reports/ReportLayout.js   | 11 ++++-------
 modern/src/settings/OptionsLayout.js |  7 +++----
 3 files changed, 8 insertions(+), 12 deletions(-)

(limited to 'modern/src')

diff --git a/modern/src/components/NavBar.js b/modern/src/components/NavBar.js
index 83dcd6e0..ac689e76 100644
--- a/modern/src/components/NavBar.js
+++ b/modern/src/components/NavBar.js
@@ -5,7 +5,7 @@ import {
 import MenuIcon from '@material-ui/icons/Menu';
 
 const Navbar = ({ setOpenDrawer, title }) => (
-  <AppBar position="fixed" color="inherit">
+  <AppBar position="sticky" color="inherit">
     <Toolbar>
       <IconButton color="inherit" edge="start" onClick={() => setOpenDrawer(true)}>
         <MenuIcon />
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 98a2bc75..bacebddf 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -18,6 +18,9 @@ import { useTranslation } from '../LocalizationProvider';
 const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
     height: '100%',
   },
   drawerContainer: {
@@ -31,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
   },
   content: {
     flex: 1,
-    padding: theme.spacing(5, 3, 3, 3),
+    padding: theme.spacing(3, 3, 3, 3),
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
@@ -44,11 +47,6 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: 'transparent',
     },
   },
-  toolbar: {
-    [theme.breakpoints.down('sm')]: {
-      ...theme.mixins.toolbar,
-    },
-  },
 }));
 
 const ReportLayout = ({ children, filter }) => {
@@ -114,7 +112,6 @@ const ReportLayout = ({ children, filter }) => {
         </Drawer>
       </Hidden>
       <div className={classes.content}>
-        <div className={classes.toolbar} />
         <Grid container direction="column" spacing={2}>
           <Grid item>{filter}</Grid>
           <Grid item>{children}</Grid>
diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js
index ccd2bdb7..c70ef7fe 100644
--- a/modern/src/settings/OptionsLayout.js
+++ b/modern/src/settings/OptionsLayout.js
@@ -31,6 +31,9 @@ import { useAdministrator, useReadonly } from '../common/permissions';
 const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
     height: '100%',
   },
   drawerContainer: {
@@ -44,10 +47,6 @@ const useStyles = makeStyles((theme) => ({
   },
   content: {
     flex: 1,
-    padding: theme.spacing(5, 3, 3, 3),
-    [theme.breakpoints.down('sm')]: {
-      paddingTop: theme.spacing(10),
-    },
   },
   drawerHeader: {
     ...theme.mixins.toolbar,
-- 
cgit v1.2.3