diff options
author | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-02 15:15:59 +0000 |
---|---|---|
committer | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-02 15:15:59 +0000 |
commit | 7704d0f907c1567888a7d908a4641edfec0e68f4 (patch) | |
tree | b761e45a48a6200d07d87a7fe48907110a8e15ea /modern/src | |
parent | ca6f62e322ece99cb944ad341ebc4de9aa82c82d (diff) | |
download | trackermap-web-7704d0f907c1567888a7d908a4641edfec0e68f4.tar.gz trackermap-web-7704d0f907c1567888a7d908a4641edfec0e68f4.tar.bz2 trackermap-web-7704d0f907c1567888a7d908a4641edfec0e68f4.zip |
Updated geofencespage
Diffstat (limited to 'modern/src')
-rw-r--r-- | modern/src/GeofencesPage.js | 40 |
1 files changed, 29 insertions, 11 deletions
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js index 389ac998..c66637da 100644 --- a/modern/src/GeofencesPage.js +++ b/modern/src/GeofencesPage.js @@ -2,17 +2,20 @@ import React from 'react'; import { isWidthUp, makeStyles, withWidth } from '@material-ui/core'; import Drawer from '@material-ui/core/Drawer'; import ContainerDimensions from 'react-container-dimensions'; -import MainToolbar from './MainToolbar'; import Map from './map/Map'; import CurrentLocationMap from './map/CurrentLocationMap'; import GeofenceEditMap from './map/GeofenceEditMap'; import GeofencesList from './GeofencesList'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; + +import t from './common/localization'; + const useStyles = makeStyles(theme => ({ root: { height: '100%', display: 'flex', - flexDirection: 'column', + flexDirection: 'column' }, content: { flexGrow: 1, @@ -20,21 +23,27 @@ const useStyles = makeStyles(theme => ({ display: 'flex', flexDirection: 'row', [theme.breakpoints.down('xs')]: { - flexDirection: 'column-reverse', + flexDirection: 'column-reverse' } }, drawerPaper: { position: 'relative', [theme.breakpoints.up('sm')]: { - width: 350, + width: 350 }, [theme.breakpoints.down('xs')]: { - height: 250, + height: 250 } }, - mapContainer: { - flexGrow: 1, + drawerHeader: { + ...theme.mixins.toolbar, + display: 'flex', + alignItems: 'center', + padding: theme.spacing(0, 1) }, + mapContainer: { + flexGrow: 1 + } })); const GeofencesPage = ({ width }) => { @@ -42,12 +51,21 @@ const GeofencesPage = ({ width }) => { return ( <div className={classes.root}> - <MainToolbar /> <div className={classes.content}> <Drawer anchor={isWidthUp('sm', width) ? 'left' : 'bottom'} - variant='permanent' - classes={{ paper: classes.drawerPaper }}> + variant="permanent" + classes={{ paper: classes.drawerPaper }} + > + <div className={classes.drawerHeader}> + <IconButton component="a" href="/"> + <ArrowBackIcon /> + </IconButton> + <Typography variant="h6" color="inherit" noWrap> + {t('sharedGeofences')} + </Typography> + </div> + <Divider /> <GeofencesList /> </Drawer> <div className={classes.mapContainer}> @@ -61,6 +79,6 @@ const GeofencesPage = ({ width }) => { </div> </div> ); -} +}; export default withWidth()(GeofencesPage); |