From 0858ecb2bd3820c805abade3f2a7c12c07c84c8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20Yeguas?= Date: Wed, 2 Dec 2020 19:06:34 +0100 Subject: [PATCH 1/3] Mobile fixes --- template-sample-app/template.json | 5 +- template-sample-app/template/package.dev.json | 22 +--- .../template/public/index.html | 21 +++- template-sample-app/template/src/App.js | 4 +- .../template/src/components/common/Header.js | 18 ++- .../template/src/components/legends/Legend.js | 4 + .../template/src/components/views/Kpi.js | 22 +++- .../template/src/components/views/Main.js | 106 +++++++++++++----- .../template/src/components/views/UserMenu.js | 18 ++- .../src/components/views/datasets/Datasets.js | 4 +- .../components/views/datasets/UserDatasets.js | 5 +- .../components/views/stores/StoresDetail.js | 33 +++--- .../src/components/views/stores/StoresList.js | 25 ++++- .../template/src/config/appSlice.js | 8 ++ .../template/src/utils/formatter.js | 4 + template-skeleton/template.json | 5 +- template-skeleton/template/package.dev.json | 5 +- template-skeleton/template/public/index.html | 21 +++- template-skeleton/template/src/App.js | 4 +- .../template/src/components/common/Header.js | 3 +- .../template/src/components/views/Main.js | 74 +++++++----- .../template/src/components/views/UserMenu.js | 6 +- .../template/src/config/appSlice.js | 5 + .../template/src/utils/formatter.js | 4 + 24 files changed, 300 insertions(+), 126 deletions(-) diff --git a/template-sample-app/template.json b/template-sample-app/template.json index 117a420f..29afa5c1 100644 --- 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 index 6465dc5a..977fb7aa 100644 --- 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 index 00715ee3..b4de68b4 100644 --- a/template-sample-app/template/public/index.html +++ b/template-sample-app/template/public/index.html @@ -2,7 +2,7 @@ - + @@ -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`. --> + + + CARTO for React Sample App diff --git a/template-sample-app/template/src/App.js b/template-sample-app/template/src/App.js index 6a07e786..37f796de 100644 --- 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 index 236478a7..67117cc3 100644 --- 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} > - + {drawerOpen ? : } @@ -119,14 +120,14 @@ export function Header() { CARTO - + React Demo - + - + diff --git a/template-sample-app/template/src/components/legends/Legend.js b/template-sample-app/template/src/components/legends/Legend.js index 2f87d344..f5a65eab 100644 --- 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 index bacde138..cd91a96b 100644 --- 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(() => { @@ -47,6 +54,9 @@ export default function Kpi() { selectedStore: null, }) ); + // Close bottom panel + dispatch(setBottomSheetOpen(false)); + // Clean up when leave return function cleanup() { dispatch(removeLayer('kpiLayer')); @@ -64,6 +74,12 @@ export default function Kpi() { return (
+ + Store Analysis + + + + + +
); } diff --git a/template-sample-app/template/src/components/views/Main.js b/template-sample-app/template/src/components/views/Main.js index e16daf18..720a1f6a 100644 --- a/template-sample-app/template/src/components/views/Main.js +++ b/template-sample-app/template/src/components/views/Main.js @@ -1,18 +1,26 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Outlet } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import { Box, Drawer, Grid, Hidden, Paper, Portal, Snackbar, Toolbar, useTheme, useMediaQuery } from '@material-ui/core'; +import { + Box, + Drawer, + SwipeableDrawer, + Grid, + Hidden, + Portal, + Snackbar, + SvgIcon, + Toolbar, + useTheme, + useMediaQuery, +} from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { Alert } from '@material-ui/lab'; -import { - ExpandLess as ExpandLessIcon, - ExpandMore as ExpandMoreIcon, -} from '@material-ui/icons'; import { GeocoderWidget } from '@carto/react/widgets'; import { Map } from 'components/common/Map'; import { Legend } from 'components/legends/Legend'; import { getLayers } from 'components/layers'; -import { setError } from 'config/appSlice'; +import { setBottomSheetOpen, setError } from 'config/appSlice'; const drawerWidth = 350; @@ -34,15 +42,45 @@ const useStyles = makeStyles((theme) => ({ textAlign: 'center', }, bottomSheet: { - maxHeight: 'calc(100% - 48px)', + maxHeight: `calc(100% - ${theme.spacing(6)}px)`, + + '&$closed': { + transform: `translateY(calc(100% - ${theme.spacing(14.25)}px)) !important`, + visibility: 'visible !important', + + '& $bottomSheetIcon': { + transform: 'rotate(0)', + }, + + '& $bottomSheetContent': { + overflow: 'hidden', + }, + }, }, + closed: {}, bottomSheetContent: { - minHeight: theme.spacing(16) + minHeight: theme.spacing(18), + }, + bottomSheetIcon: { + color: theme.palette.text.hint, + height: theme.spacing(4), + transform: 'rotate(180deg)', }, mapWrapper: { position: 'relative', flex: 1, overflow: 'hidden', + + // Fix Mapbox attribution button not clickable + // TODO: Test GMaps + '& #deckgl-wrapper': { + '& #deckgl-overlay': { + zIndex: 1, + }, + '& #view-default-view > div': { + zIndex: 'auto !important', + }, + }, }, legend: { position: 'absolute', @@ -50,8 +88,9 @@ const useStyles = makeStyles((theme) => ({ right: theme.spacing(4), [theme.breakpoints.down('sm')]: { - bottom: theme.spacing(9), - right: theme.spacing(2), + bottom: theme.spacing(16), + left: theme.spacing(2), + right: 'auto', }, }, geocoder: { @@ -60,15 +99,25 @@ const useStyles = makeStyles((theme) => ({ left: theme.spacing(3), [theme.breakpoints.down('xs')]: { - width: `calc(100% - ${theme.spacing(6)}px)` - } - } + width: `calc(100% - ${theme.spacing(6)}px)`, + }, + }, })); +const ArrowIcon = (props) => ( + + + +); + export default function Main() { const dispatch = useDispatch(); const error = useSelector((state) => state.app.error); - const [widgetsDrawerOpen, setWidgetsDrawerOpen] = useState(false); + const bottomSheetOpen = useSelector((state) => state.app.bottomSheetOpen); const classes = useStyles(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('xs')); @@ -80,7 +129,7 @@ export default function Main() { }; const handleWidgetsDrawerToggle = () => { - setWidgetsDrawerOpen(!widgetsDrawerOpen); + dispatch(setBottomSheetOpen(!bottomSheetOpen)); }; const onGeocoderWidgetError = (error) => { @@ -90,7 +139,7 @@ export default function Main() { return ( @@ -143,4 +187,4 @@ export default function Main() { ); -}; \ No newline at end of file +} diff --git a/template-sample-app/template/src/components/views/UserMenu.js b/template-sample-app/template/src/components/views/UserMenu.js index d34cbf12..78ce2758 100644 --- a/template-sample-app/template/src/components/views/UserMenu.js +++ b/template-sample-app/template/src/components/views/UserMenu.js @@ -2,7 +2,15 @@ import React, { useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; -import { Avatar, Grid, Hidden, Link, Menu, MenuItem, Typography } from '@material-ui/core'; +import { + Avatar, + Grid, + Hidden, + Link, + Menu, + MenuItem, + Typography, +} from '@material-ui/core'; import { OAuthLogin } from '@carto/react/oauth'; import { logout } from '@carto/react/redux'; @@ -37,7 +45,11 @@ function UserMenu() { const open = Boolean(anchorEl); const handleMenu = (event) => { - setAnchorEl(event.currentTarget); + if (!anchorEl) { + setAnchorEl(event.currentTarget); + } else { + setAnchorEl(null); + } }; const handleClose = () => { @@ -65,7 +77,7 @@ function UserMenu() { onClick={handleMenu} color='inherit' > - + {user.username} diff --git a/template-sample-app/template/src/components/views/datasets/Datasets.js b/template-sample-app/template/src/components/views/datasets/Datasets.js index 4af44967..7d0e7706 100644 --- a/template-sample-app/template/src/components/views/datasets/Datasets.js +++ b/template-sample-app/template/src/components/views/datasets/Datasets.js @@ -9,7 +9,7 @@ import { selectOAuthCredentials } from '@carto/react/redux'; import { getUserDatasets } from '@carto/react/api'; import UserDatasets from 'components/views/datasets/UserDatasets'; -import { setError } from 'config/appSlice'; +import { setBottomSheetOpen, setError } from 'config/appSlice'; const useStyles = makeStyles((theme) => ({ root: { @@ -48,6 +48,8 @@ function Datasets() { dispatch(setError(`Error loading datasets: ${error.message}`)); }); + } else { + dispatch(setBottomSheetOpen(true)); } return function cleanup() { diff --git a/template-sample-app/template/src/components/views/datasets/UserDatasets.js b/template-sample-app/template/src/components/views/datasets/UserDatasets.js index 5c62a18b..2325507d 100644 --- a/template-sample-app/template/src/components/views/datasets/UserDatasets.js +++ b/template-sample-app/template/src/components/views/datasets/UserDatasets.js @@ -22,7 +22,7 @@ import { Typography, } from '@material-ui/core'; import { ChevronRight, HighlightOff } from '@material-ui/icons'; -import { setError } from 'config/appSlice'; +import { setBottomSheetOpen, setError } from 'config/appSlice'; const useStyles = makeStyles((theme) => ({ loadingSpinner: { @@ -57,7 +57,7 @@ export default function UserDatasets(props) { const loadDataset = useCallback( (selectedDataset) => { const { name: datasetName, table_schema: schema } = selectedDataset; - const dataSourceCredentials = { ...credentials, username: schema }; + const dataSourceCredentials = { ...credentials }; dispatch( addSource({ @@ -93,6 +93,7 @@ export default function UserDatasets(props) { setNewTokenRequest(true); setInitialToken(token); } + dispatch(setBottomSheetOpen(false)); }; const onParamsRefreshed = (oauthParams) => { diff --git a/template-sample-app/template/src/components/views/stores/StoresDetail.js b/template-sample-app/template/src/components/views/stores/StoresDetail.js index 6c2c6a45..53f2a8b8 100644 --- a/template-sample-app/template/src/components/views/stores/StoresDetail.js +++ b/template-sample-app/template/src/components/views/stores/StoresDetail.js @@ -1,19 +1,17 @@ import React, { useState, useEffect, useMemo } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import { NavLink, useLocation, useNavigate, useParams } from 'react-router-dom'; +import { NavLink, useLocation, useParams } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; import { Breadcrumbs, CircularProgress, Divider, - IconButton, Grid, Typography, Link, } from '@material-ui/core'; import NavigateNextIcon from '@material-ui/icons/NavigateNext'; -import CloseIcon from '@material-ui/icons/Close'; import { WrapperWidgetUI, FormulaWidgetUI, HistogramWidgetUI } from '@carto/react/ui'; import { selectSourceById, setViewState } from '@carto/react/redux'; @@ -22,7 +20,7 @@ import { getStore, getRevenuePerMonth } from 'models/StoreModel'; import { MONTHS_LABELS } from './constants'; import { Isochrone } from 'components/common/Isochrone'; import { currencyFormatter } from 'utils/formatter'; -import { setError } from 'config/appSlice'; +import { setBottomSheetOpen, setError } from 'config/appSlice'; export default function StoresDetail() { const [storeDetail, setStoreDetail] = useState(null); @@ -31,7 +29,6 @@ export default function StoresDetail() { const { id } = useParams(); const source = useSelector((state) => selectSourceById(state, 'storesSource')); const location = useLocation(); - const navigate = useNavigate(); const classes = useStyles(); @@ -74,6 +71,8 @@ export default function StoresDetail() { dispatch(setError(`getRevenuePerMonth error: ${error.message}`)); }); + dispatch(setBottomSheetOpen(true)); + return function cleanup() { abortController.abort(); }; @@ -97,10 +96,6 @@ export default function StoresDetail() { return (
- navigate('/stores')} className={classes.closeDetail}> - - -
} @@ -112,7 +107,7 @@ export default function StoresDetail() { Store detail - + {storeName(storeDetail)} @@ -140,19 +135,23 @@ export default function StoresDetail() { onError={onRevenuePerMonthWidgetError} > + +
); } const useStyles = makeStyles((theme) => ({ - closeDetail: { - position: 'absolute', - top: theme.spacing(1.75), - right: theme.spacing(1.75), - color: theme.palette.primary.main, - }, storeDetail: { padding: theme.spacing(3.25, 3), + + [theme.breakpoints.down('sm')]: { + paddingTop: theme.spacing(2), + }, + }, + title: { + textTransform: 'capitalize', + marginBottom: 4, }, isochrone: { width: '100%', @@ -170,5 +169,5 @@ const useStyles = makeStyles((theme) => ({ })); function storeName(store) { - return `${store.address}, ${store.city}`; + return `${store.address}, ${store.city}`.toLowerCase(); } diff --git a/template-sample-app/template/src/components/views/stores/StoresList.js b/template-sample-app/template/src/components/views/stores/StoresList.js index 9c55ccf7..9ca50716 100644 --- a/template-sample-app/template/src/components/views/stores/StoresList.js +++ b/template-sample-app/template/src/components/views/stores/StoresList.js @@ -1,8 +1,8 @@ -import React from 'react'; +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/Divider'; +import { Divider, Typography, makeStyles } from '@material-ui/core'; import { AggregationTypes } from '@carto/react/widgets'; import { FormulaWidget, CategoryWidget, HistogramWidget } from '@carto/react/widgets'; @@ -10,9 +10,20 @@ import { FormulaWidget, CategoryWidget, HistogramWidget } from '@carto/react/wid import { SOURCE_ID } from './constants'; import { currencyFormatter, numberFormatter } from 'utils/formatter'; +const useStyles = makeStyles((theme) => ({ + title: { + padding: theme.spacing(3, 3, 1.5), + }, +})); + export default function StoresList() { + const classes = useStyles(); const dispatch = useDispatch(); + useEffect(() => { + dispatch(setBottomSheetOpen(false)); + }, [dispatch]); + const onTotalRevenueWidgetError = (error) => { dispatch(setError(`Error obtaining total revenue: ${error.message}`)); }; @@ -27,6 +38,12 @@ export default function StoresList() { return (
+ + Store Analysis + + + + + +
); } diff --git a/template-sample-app/template/src/config/appSlice.js b/template-sample-app/template/src/config/appSlice.js index a49ab1c2..1740dcf7 100644 --- a/template-sample-app/template/src/config/appSlice.js +++ b/template-sample-app/template/src/config/appSlice.js @@ -5,6 +5,7 @@ const slice = createSlice({ initialState: { error: null, isolineResult: null, + bottomSheetOpen: false, }, reducers: { setIsolineResult: (state, action) => { @@ -13,6 +14,9 @@ const slice = createSlice({ setError: (state, action) => { state.error = action.payload; }, + setBottomSheetOpen: (state, action) => { + state.bottomSheetOpen = action.payload; + }, }, }); @@ -20,3 +24,7 @@ export default slice.reducer; export const setIsolineResult = (payload) => ({ type: 'app/setIsolineResult', payload }); export const setError = (payload) => ({ type: 'app/setError', payload }); +export const setBottomSheetOpen = (payload) => ({ + type: 'app/setBottomSheetOpen', + payload, +}); diff --git a/template-sample-app/template/src/utils/formatter.js b/template-sample-app/template/src/utils/formatter.js index 1f3ad7b9..95dac3a7 100644 --- a/template-sample-app/template/src/utils/formatter.js +++ b/template-sample-app/template/src/utils/formatter.js @@ -2,6 +2,10 @@ import '@formatjs/intl-locale/polyfill'; import '@formatjs/intl-getcanonicallocales/polyfill'; +// int-pluralrules dependencies (support for ios v12) +import '@formatjs/intl-pluralrules/polyfill'; +import '@formatjs/intl-pluralrules/locale-data/en'; + /* Note: `notation` & `compactDisplay` properties are not supported yet by Safari. Those require the use of a polyfill: https://www.npmjs.com/package/@formatjs/intl-numberformat diff --git a/template-skeleton/template.json b/template-skeleton/template.json index 58210537..81607254 100644 --- a/template-skeleton/template.json +++ b/template-skeleton/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-skeleton/template/package.dev.json b/template-skeleton/template/package.dev.json index 8d4496b7..e1da5322 100644 --- a/template-skeleton/template/package.dev.json +++ b/template-skeleton/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", diff --git a/template-skeleton/template/public/index.html b/template-skeleton/template/public/index.html index 932926d5..0bdb83ec 100644 --- a/template-skeleton/template/public/index.html +++ b/template-skeleton/template/public/index.html @@ -2,7 +2,7 @@ - + @@ -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`. --> + + + CARTO for React App diff --git a/template-skeleton/template/src/App.js b/template-skeleton/template/src/App.js index 0c01aaa6..04bc5f8b 100644 --- a/template-skeleton/template/src/App.js +++ b/template-skeleton/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-skeleton/template/src/components/common/Header.js b/template-skeleton/template/src/components/common/Header.js index e44c82f3..1309622f 100644 --- a/template-skeleton/template/src/components/common/Header.js +++ b/template-skeleton/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'; @@ -107,7 +108,7 @@ export function Header() { aria-label='menu' onClick={handleDrawerToggle} > - + {drawerOpen ? : } diff --git a/template-skeleton/template/src/components/views/Main.js b/template-skeleton/template/src/components/views/Main.js index 5fa2340a..0eefde04 100644 --- a/template-skeleton/template/src/components/views/Main.js +++ b/template-skeleton/template/src/components/views/Main.js @@ -1,28 +1,13 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Outlet } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; +import { Box, Drawer, SwipeableDrawer, Grid, Hidden, Portal, Snackbar, SvgIcon, Toolbar, useTheme, useMediaQuery } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import { - Box, - Drawer, - Grid, - Hidden, - Paper, - Portal, - Snackbar, - Toolbar, - useTheme, - useMediaQuery, -} from '@material-ui/core'; import { Alert } from '@material-ui/lab'; -import { - ExpandLess as ExpandLessIcon, - ExpandMore as ExpandMoreIcon, -} from '@material-ui/icons'; import { GeocoderWidget } from '@carto/react/widgets'; import { Map } from 'components/common/Map'; import { getLayers } from 'components/layers'; -import { setError } from 'config/appSlice'; +import { setBottomSheetOpen, setError } from 'config/appSlice'; const drawerWidth = 350; @@ -44,15 +29,45 @@ const useStyles = makeStyles((theme) => ({ textAlign: 'center', }, bottomSheet: { - maxHeight: 'calc(100% - 48px)', + maxHeight: `calc(100% - ${theme.spacing(6)}px)`, + + '&$closed': { + transform: `translateY(calc(100% - ${theme.spacing(14.25)}px)) !important`, + visibility: 'visible !important', + + '& $bottomSheetIcon': { + transform: 'rotate(0)' + }, + + '& $bottomSheetContent': { + overflow: 'hidden' + } + } }, + closed: {}, bottomSheetContent: { - minHeight: theme.spacing(16), + minHeight: theme.spacing(18), + }, + bottomSheetIcon: { + color: theme.palette.text.hint, + height: theme.spacing(4), + transform: 'rotate(180deg)' }, mapWrapper: { position: 'relative', flex: 1, overflow: 'hidden', + + // Fix Mapbox attribution button not clickable + // TODO: Test GMaps + '& #deckgl-wrapper': { + '& #deckgl-overlay': { + zIndex: 1 + }, + '& #view-default-view > div': { + zIndex: 'auto !important' + } + } }, geocoder: { position: 'absolute', @@ -65,10 +80,16 @@ const useStyles = makeStyles((theme) => ({ }, })); +const ArrowIcon = (props) => ( + + + +); + export default function Main() { const dispatch = useDispatch(); const error = useSelector((state) => state.app.error); - const [widgetsDrawerOpen, setWidgetsDrawerOpen] = useState(false); + const bottomSheetOpen = useSelector((state) => state.app.bottomSheetOpen); const classes = useStyles(); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('xs')); @@ -80,7 +101,7 @@ export default function Main() { }; const handleWidgetsDrawerToggle = () => { - setWidgetsDrawerOpen(!widgetsDrawerOpen); + dispatch(setBottomSheetOpen(!bottomSheetOpen)); }; const onGeocoderWidgetError = (error) => { @@ -114,10 +135,11 @@ export default function Main() { > - @@ -126,10 +148,10 @@ export default function Main() { justifyContent='center' onClick={handleWidgetsDrawerToggle} > - +
- + diff --git a/template-skeleton/template/src/components/views/UserMenu.js b/template-skeleton/template/src/components/views/UserMenu.js index 667ea9d4..4d3f0364 100644 --- a/template-skeleton/template/src/components/views/UserMenu.js +++ b/template-skeleton/template/src/components/views/UserMenu.js @@ -45,7 +45,11 @@ function UserMenu() { const open = Boolean(anchorEl); const handleMenu = (event) => { - setAnchorEl(event.currentTarget); + if (!anchorEl) { + setAnchorEl(event.currentTarget); + } else { + setAnchorEl(null); + } }; const handleClose = () => { diff --git a/template-skeleton/template/src/config/appSlice.js b/template-skeleton/template/src/config/appSlice.js index a49ab1c2..36906459 100644 --- a/template-skeleton/template/src/config/appSlice.js +++ b/template-skeleton/template/src/config/appSlice.js @@ -5,6 +5,7 @@ const slice = createSlice({ initialState: { error: null, isolineResult: null, + bottomSheetOpen: false }, reducers: { setIsolineResult: (state, action) => { @@ -13,6 +14,9 @@ const slice = createSlice({ setError: (state, action) => { state.error = action.payload; }, + setBottomSheetOpen: (state, action) => { + state.bottomSheetOpen = action.payload; + } }, }); @@ -20,3 +24,4 @@ export default slice.reducer; export const setIsolineResult = (payload) => ({ type: 'app/setIsolineResult', payload }); export const setError = (payload) => ({ type: 'app/setError', payload }); +export const setBottomSheetOpen = (payload) => ({ type: 'app/setBottomSheetOpen', payload }); diff --git a/template-skeleton/template/src/utils/formatter.js b/template-skeleton/template/src/utils/formatter.js index 1f3ad7b9..83727a80 100644 --- a/template-skeleton/template/src/utils/formatter.js +++ b/template-skeleton/template/src/utils/formatter.js @@ -2,6 +2,10 @@ import '@formatjs/intl-locale/polyfill'; import '@formatjs/intl-getcanonicallocales/polyfill'; +// int-pluralrules dependencies (support for ios v12) +import '@formatjs/intl-pluralrules/polyfill'; +import '@formatjs/intl-pluralrules/locale-data/en'; + /* Note: `notation` & `compactDisplay` properties are not supported yet by Safari. Those require the use of a polyfill: https://www.npmjs.com/package/@formatjs/intl-numberformat From 959e1f47f50f24348c10269746c0879289711c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20Yeguas?= Date: Thu, 3 Dec 2020 08:31:23 +0100 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b14dcb7..74db3e48 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # CHANGELOG +## Not released +- Improve layout for mobile (specially for iOS) [#141](https://github.com/CartoDB/carto-react-template/pull/141) + ## 1.0.0-beta5 (2020-11-27) - Adapt layout for mobile [#134](https://github.com/CartoDB/carto-react-template/pull/134) - Update favicons for better visibility on dark themes [#136](https://github.com/CartoDB/carto-react-template/pull/136) From 0b17c93b6997c07a794d63d3dcc3b88988046acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20Yeguas?= Date: Thu, 3 Dec 2020 11:12:36 +0100 Subject: [PATCH 3/3] Small fixes --- template-sample-app/template/src/components/views/Kpi.js | 1 - template-skeleton/template/src/components/views/Main.js | 8 -------- 2 files changed, 9 deletions(-) diff --git a/template-sample-app/template/src/components/views/Kpi.js b/template-sample-app/template/src/components/views/Kpi.js index cd91a96b..328f7c0a 100644 --- a/template-sample-app/template/src/components/views/Kpi.js +++ b/template-sample-app/template/src/components/views/Kpi.js @@ -51,7 +51,6 @@ export default function Kpi() { addLayer({ id: 'kpiLayer', source: 'kpiSource', - selectedStore: null, }) ); // Close bottom panel diff --git a/template-skeleton/template/src/components/views/Main.js b/template-skeleton/template/src/components/views/Main.js index 0eefde04..7189cb6d 100644 --- a/template-skeleton/template/src/components/views/Main.js +++ b/template-skeleton/template/src/components/views/Main.js @@ -127,14 +127,6 @@ export default function Main() { - - -