diff options
| author | Iván Ávalos <avalos@disroot.org> | 2021-12-07 17:19:27 -0600 |
|---|---|---|
| committer | Iván Ávalos <avalos@disroot.org> | 2021-12-07 17:19:27 -0600 |
| commit | d79760dbc28d642b8b53f4cdae411fa9375a737a (patch) | |
| tree | 9bd878e2900bcb096f0f493a3c39a67d5704eca4 | |
| parent | bbe3e712ef0c616418057f1b9916984da18e7b38 (diff) | |
| download | etbsa-traccar-web-d79760dbc28d642b8b53f4cdae411fa9375a737a.tar.gz etbsa-traccar-web-d79760dbc28d642b8b53f4cdae411fa9375a737a.tar.bz2 etbsa-traccar-web-d79760dbc28d642b8b53f4cdae411fa9375a737a.zip | |
Collapse sidebar only below XS, marker labels colored according to device status and fixed loading of some marker images
| -rw-r--r-- | modern/src/MainPage.js | 7 | ||||
| -rw-r--r-- | modern/src/map/PositionsMap.js | 3 |
2 files changed, 6 insertions, 4 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 08ba343..bc0c498 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({ zIndex: 1301, transition: 'transform .5s ease', backgroundColor: 'white', - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { width: '100%', margin: 0, }, @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => ({ sidebarCollapsed: { transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`, marginLeft: 0, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { transform: 'translateX(-100vw)', }, }, @@ -97,6 +97,7 @@ const MainPage = () => { const dispatch = useDispatch(); const t = useTranslation(); + const isComputer = useMediaQuery(theme.breakpoints.down('sm')); const isTablet = useMediaQuery(theme.breakpoints.down('md')); const isPhone = useMediaQuery(theme.breakpoints.down('xs')); @@ -131,7 +132,7 @@ const MainPage = () => { <ListIcon /> <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div> </Button> - <Paper square elevation={3} className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}> + <Paper square elevation={3} className={`${classes.sidebar} ${(isComputer && collapsed) && classes.sidebarCollapsed}`}> <Paper className={classes.paper} square elevation={3}> <Toolbar className={classes.toolbar} disableGutters> {isTablet && ( diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js index f1ac3b7..b53cbfb 100644 --- a/modern/src/map/PositionsMap.js +++ b/modern/src/map/PositionsMap.js @@ -104,7 +104,7 @@ const PositionsMap = ({ positions }) => { source: id, filter: ['!', ['has', 'point_count']], layout: { - 'icon-image': '{category}-map', + 'icon-image': ['concat', ['downcase', ['get', 'category']], '-map'], 'icon-allow-overlap': true, 'text-field': '{name}', 'text-allow-overlap': true, @@ -114,6 +114,7 @@ const PositionsMap = ({ positions }) => { 'text-size': 12, }, paint: { + 'text-color': {type: 'identity', property: 'color'}, 'text-halo-color': 'white', 'text-halo-width': 1, }, |