CartoDB · neokore · Dec 3, 2020 · Dec 2, 2020 · Dec 3, 2020 · Dec 3, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # CHANGELOG
 
 ## Not released
+- Improve layout for mobile (specially for iOS) [#141](https://github.com/CartoDB/carto-react-template/pull/141)
 - Fix selected store state in sample-app [#142](https://github.com/CartoDB/carto-react-template/pull/142)
 
 ## 1.0.0-beta5 (2020-11-27)

diff --git a/template-sample-app/template.json b/template-sample-app/template.json
@@ -2,9 +2,10 @@
   "package": {
     "dependencies": {
       "@carto/react": "^1.0.0-beta6",
-      "@formatjs/intl-numberformat": "^6.0.0",
-      "@formatjs/intl-locale": "^2.4.8",
       "@formatjs/intl-getcanonicallocales": "^1.5.2",
+      "@formatjs/intl-locale": "^2.4.8",
+      "@formatjs/intl-numberformat": "^6.0.0",
+      "@formatjs/intl-pluralrules": "^4.0.0",
       "@material-ui/core": "^4.11.0",
       "@material-ui/icons": "^4.9.1",
       "@material-ui/lab": "^4.0.0-alpha.56",

diff --git a/template-sample-app/template/package.dev.json b/template-sample-app/template/package.dev.json
@@ -4,9 +4,10 @@
   "private": true,
   "dependencies": {
     "@carto/react": "^1.0.0-beta6",
-    "@formatjs/intl-numberformat": "^6.0.0",
-    "@formatjs/intl-locale": "^2.4.8",
     "@formatjs/intl-getcanonicallocales": "^1.5.2",
+    "@formatjs/intl-locale": "^2.4.8",
+    "@formatjs/intl-numberformat": "^6.0.0",
+    "@formatjs/intl-pluralrules": "^4.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
@@ -59,12 +60,7 @@
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all",
-      "not explorer 11"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all", "not explorer 11"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
@@ -77,13 +73,7 @@
     }
   },
   "lint-staged": {
-    "*.+(js|jsx)": [
-      "yarn lint:fix",
-      "git add"
-    ],
-    "*.+(js|jsx|json|css|md)": [
-      "prettier --write",
-      "git add"
-    ]
+    "*.+(js|jsx)": ["yarn lint:fix", "git add"],
+    "*.+(js|jsx|json|css|md)": ["prettier --write", "git add"]
   }
 }
diff --git a/template-sample-app/template/public/index.html b/template-sample-app/template/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="description" content="CARTO for React - Sample Location Intelligence Application" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-touch-icon.png">
@@ -37,6 +37,25 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <!-- Fix height for iOS devices as long as Material-UI's makeStyles doesn't allow defining the same CSS property twice as a fallback -->
+    <style>
+      html {
+        height: 100vh;
+        height: -webkit-fill-available;
+      }
+      body {
+        height: 100%;
+        height: -webkit-fill-available;
+        display: flex;
+        flex-direction: column
+      }
+      body > #root {
+        flex: 1;
+        display: flex;
+        flex-direction: column
+      }
+    </style>
     <title>CARTO for React Sample App</title>
   </head>
   <body>

diff --git a/template-sample-app/template/src/App.js b/template-sample-app/template/src/App.js
@@ -39,8 +39,8 @@ theme = responsiveFontSizes(theme, {
 
 const useStyles = makeStyles(() => ({
   root: {
-    width: '100vw',
-    height: '100vh',
+    flex: 1,
+    overflow: 'hidden',
   },
 }));
 

diff --git a/template-sample-app/template/src/components/common/Header.js b/template-sample-app/template/src/components/common/Header.js
@@ -14,6 +14,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
+import CloseIcon from '@material-ui/icons/Close';
 import UserMenu from 'components/views/UserMenu';
 import { NavLink, useLocation } from 'react-router-dom';
 
@@ -52,8 +53,8 @@ const useStyles = makeStyles((theme) => ({
         display: 'inline-block',
         height: '1em',
         marginRight: theme.spacing(2),
-        verticalAlign: 'text-bottom'
-      }
+        verticalAlign: 'text-bottom',
+      },
     },
   },
 }));
@@ -109,7 +110,7 @@ export function Header() {
             aria-label='menu'
             onClick={handleDrawerToggle}
           >
-            <MenuIcon />
+            {drawerOpen ? <CloseIcon /> : <MenuIcon />}
           </IconButton>
         </Hidden>
         <Link component={NavLink} to='/' className={classes.title}>
@@ -119,14 +120,14 @@ export function Header() {
             </Hidden>
             <Hidden smUp>
               <img src='/logo-xs.svg' alt='CARTO ' />
-              <Divider orientation="vertical" light />
+              <Divider orientation='vertical' light />
             </Hidden>
             <strong>React</strong> Demo
           </Typography>
         </Link>
         <Hidden xsDown>
           <Divider orientation='vertical' className={classes.divider} light></Divider>
-          <NavigationMenu location={location}/>
+          <NavigationMenu location={location} />
         </Hidden>
         <Hidden smUp>
           <Drawer
@@ -147,12 +148,7 @@ export function Header() {
             </Grid>
           </Drawer>
         </Hidden>
-        <Grid
-          container
-          item
-          xs
-          justify='flex-end'
-        >
+        <Grid container item xs justify='flex-end'>
           <UserMenu />
         </Grid>
       </Toolbar>

diff --git a/template-sample-app/template/src/components/legends/Legend.js b/template-sample-app/template/src/components/legends/Legend.js
@@ -8,6 +8,10 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.caption,
     padding: theme.spacing(1.5),
     backgroundColor: theme.palette.common.white,
+
+    '&:empty': {
+      display: 'none',
+    },
   },
 }));
 

diff --git a/template-sample-app/template/src/components/views/Kpi.js b/template-sample-app/template/src/components/views/Kpi.js
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { setError } from 'config/appSlice';
+import { setBottomSheetOpen, setError } from 'config/appSlice';
 
-import { Divider } from '@material-ui/core';
+import { Divider, Typography, makeStyles } from '@material-ui/core';
 
 import {
   addLayer,
@@ -15,7 +15,14 @@ import { AggregationTypes, CategoryWidget, FormulaWidget } from '@carto/react/wi
 
 import { currencyFormatter } from 'utils/formatter';
 
+const useStyles = makeStyles((theme) => ({
+  title: {
+    padding: theme.spacing(3, 3, 1.5),
+  },
+}));
+
 export default function Kpi() {
+  const classes = useStyles();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -44,9 +51,11 @@ export default function Kpi() {
       addLayer({
         id: 'kpiLayer',
         source: 'kpiSource',
-        selectedStore: null,
       })
     );
+    // Close bottom panel
+    dispatch(setBottomSheetOpen(false));
+
     // Clean up when leave
     return function cleanup() {
       dispatch(removeLayer('kpiLayer'));
@@ -64,6 +73,12 @@ export default function Kpi() {
 
   return (
     <div>
+      <Typography variant='h5' gutterBottom className={classes.title}>
+        Store Analysis
+      </Typography>
+
+      <Divider />
+
       <FormulaWidget
         title='Total revenue'
         dataSource='kpiSource'
@@ -85,6 +100,8 @@ export default function Kpi() {
         viewportFilter
         onError={onRevenueByStateWidgetError}
       />
+
+      <Divider />
     </div>
   );
 }