From d79760dbc28d642b8b53f4cdae411fa9375a737a Mon Sep 17 00:00:00 2001
From: Iván Ávalos <avalos@disroot.org>
Date: Tue, 7 Dec 2021 17:19:27 -0600
Subject: Collapse sidebar only below XS, marker labels colored according to
 device status and fixed loading of some marker images

---
 modern/src/MainPage.js         | 7 ++++---
 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,
       },
-- 
cgit v1.2.3