diff options
| author | Iván Ávalos <avalos@disroot.org> | 2021-12-08 22:24:07 -0600 |
|---|---|---|
| committer | Iván Ávalos <avalos@disroot.org> | 2021-12-08 22:24:07 -0600 |
| commit | 3dcc6be877f8f43bd9c7e1eee1ad6d7950b435a5 (patch) | |
| tree | 1502c5089143814164095d9366c4548dcb4cf780 | |
| parent | 26af89fe8d77732874c2e3e439285b11e5a363ea (diff) | |
| download | etbsa-traccar-web-3dcc6be877f8f43bd9c7e1eee1ad6d7950b435a5.tar.gz etbsa-traccar-web-3dcc6be877f8f43bd9c7e1eee1ad6d7950b435a5.tar.bz2 etbsa-traccar-web-3dcc6be877f8f43bd9c7e1eee1ad6d7950b435a5.zip | |
Media query terms changed
| -rw-r--r-- | modern/src/MainPage.js | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 13cc1fc..aee5a3c 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -98,9 +98,10 @@ const MainPage = () => { const dispatch = useDispatch(); const t = useTranslation(); - const isComputer = useMediaQuery(theme.breakpoints.down('sm')); + const isComputer = useMediaQuery(theme.breakpoints.down('lg')); const isTablet = useMediaQuery(theme.breakpoints.down('md')); - const isPhone = useMediaQuery(theme.breakpoints.down('xs')); + const isPhone = useMediaQuery(theme.breakpoints.down('sm')); + const isWide = useMediaQuery(theme.breakpoints.up('sm')); const [deviceName, setDeviceName] = useState(''); const collapsed = useSelector((state) => state.ui.collapsed); @@ -114,12 +115,12 @@ const MainPage = () => { dispatch(devicesActions.setFilter(text)); } - useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]); + useEffect(() => uiActions.setCollapsed(isPhone), [isPhone]); return ( <div className={classes.root}> <Map> - {!isTablet && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />} + {isWide && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />} <CurrentLocationMap /> <GeofenceMap /> <AccuracyMap /> @@ -138,10 +139,10 @@ const MainPage = () => { <ListIcon /> <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div> </Button> - <Paper square elevation={3} className={`${classes.sidebar} ${(isComputer && collapsed) && classes.sidebarCollapsed}`}> + <Paper square elevation={3} className={`${classes.sidebar} ${(!isWide && collapsed) && classes.sidebarCollapsed}`}> <Paper className={classes.paper} square elevation={3}> <Toolbar className={classes.toolbar} disableGutters> - {isTablet && ( + {isPhone && ( <IconButton onClick={handleClose}> <ArrowBackIcon /> </IconButton> |