diff options
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/EditCollectionView.js | 2 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 12 | ||||
| -rw-r--r-- | modern/src/reports/ReplayPage.js | 4 | ||||
| -rw-r--r-- | modern/src/reports/ReportLayout.js | 8 | ||||
| -rw-r--r-- | modern/src/settings/OptionsLayout.js | 10 |
6 files changed, 19 insertions, 19 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index e5b6486e..e44fd412 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -72,7 +72,7 @@ const App = () => { const dispatch = useDispatch(); const classes = useStyles(); - const desktop = useMediaQuery(theme.breakpoints.up('lg')); + const desktop = useMediaQuery(theme.breakpoints.up('md')); const initialized = useSelector((state) => !!state.session.server && !!state.session.user); const [redirectsHandled, setRedirectsHandled] = useState(false); diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js index c167a53c..11fe490a 100644 --- a/modern/src/EditCollectionView.js +++ b/modern/src/EditCollectionView.js @@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({ position: 'fixed', bottom: theme.spacing(2), right: theme.spacing(2), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { bottom: dimensions.bottomBarHeight + theme.spacing(2), }, }, diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 2798bcf5..c8c9321f 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -46,7 +46,7 @@ const useStyles = makeStyles((theme) => ({ bottom: theme.dimensions.bottomBarHeight, transition: 'transform .5s ease', backgroundColor: 'white', - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { width: '100%', margin: 0, }, @@ -54,7 +54,7 @@ const useStyles = makeStyles((theme) => ({ sidebarCollapsed: { transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`, marginLeft: 0, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { transform: 'translateX(-100vw)', }, }, @@ -71,11 +71,11 @@ const useStyles = makeStyles((theme) => ({ statusCard: { position: 'fixed', zIndex: 5, - [theme.breakpoints.up('md')]: { + [theme.breakpoints.up('sm')]: { left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`, bottom: theme.spacing(3), }, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { left: '50%', bottom: theme.spacing(3) + theme.dimensions.bottomBarHeight, }, @@ -87,7 +87,7 @@ const useStyles = makeStyles((theme) => ({ top: theme.spacing(3), borderRadius: '0px', minWidth: 0, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { left: 0, }, }, @@ -121,7 +121,7 @@ const MainPage = () => { const t = useTranslation(); const deviceReadonly = useDeviceReadonly(); - const isTablet = useMediaQuery(theme.breakpoints.down('md')); + const isTablet = useMediaQuery(theme.breakpoints.down('sm')); const isPhone = useMediaQuery(theme.breakpoints.down('xs')); const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false); diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js index d7c77ee8..51beaeca 100644 --- a/modern/src/reports/ReplayPage.js +++ b/modern/src/reports/ReplayPage.js @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({ top: 0, margin: theme.spacing(1.5), width: theme.dimensions.drawerWidthDesktop, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { width: '100%', margin: 0, }, @@ -42,7 +42,7 @@ const useStyles = makeStyles((theme) => ({ reportFilterContainer: { flex: 1, padding: theme.spacing(2), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { margin: theme.spacing(1), }, }, diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js index 8606ed42..98a2bc75 100644 --- a/modern/src/reports/ReportLayout.js +++ b/modern/src/reports/ReportLayout.js @@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({ }, drawer: { width: theme.dimensions.drawerWidthDesktop, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { width: theme.dimensions.drawerWidthTablet, }, }, @@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({ }, }, toolbar: { - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { ...theme.mixins.toolbar, }, }, @@ -85,7 +85,7 @@ const ReportLayout = ({ children, filter }) => { return ( <div className={classes.root}> - <Hidden only={['lg', 'xl']}> + <Hidden mdUp> <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} /> <Drawer variant="temporary" @@ -96,7 +96,7 @@ const ReportLayout = ({ children, filter }) => { <SideNav routes={routes} /> </Drawer> </Hidden> - <Hidden only={['xs', 'sm', 'md']}> + <Hidden smDown> <Drawer variant="permanent" classes={{ root: classes.drawerContainer, paper: classes.drawer }} diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js index 6aab5e37..ccd2bdb7 100644 --- a/modern/src/settings/OptionsLayout.js +++ b/modern/src/settings/OptionsLayout.js @@ -38,14 +38,14 @@ const useStyles = makeStyles((theme) => ({ }, drawer: { width: theme.dimensions.drawerWidthDesktop, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { width: theme.dimensions.drawerWidthTablet, }, }, content: { flex: 1, padding: theme.spacing(5, 3, 3, 3), - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { paddingTop: theme.spacing(10), }, }, @@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({ padding: theme.spacing(0, 1), }, toolbar: { - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { ...theme.mixins.toolbar, }, }, @@ -111,7 +111,7 @@ const OptionsLayout = ({ children }) => { return ( <div className={classes.root}> - <Hidden lgUp> + <Hidden mdUp> <NavBar setOpenDrawer={setOpenDrawer} title={title} /> <Drawer variant="temporary" @@ -123,7 +123,7 @@ const OptionsLayout = ({ children }) => { </Drawer> </Hidden> - <Hidden mdDown> + <Hidden smDown> <Drawer variant="permanent" classes={{ root: classes.drawerContainer, paper: classes.drawer }} |