Skip to content

Commit

Permalink
Mobile design fixes (#149)
Browse files Browse the repository at this point in the history 
* Mobile header with new separator for menu button

* Fix geocoder margins

* Apply new vertical tabs design

* Mobile bottom sheet headers improvement

* Adapt legend position to new BottomSheet height
  • Loading branch information
@neokore
neokore authored Dec 14, 2020
1 parent 3f24210 commit bbe40a3
Show file tree
Hide file tree
Showing 9 changed files with 125 additions and 86 deletions.
21 changes: 9 additions & 12 deletions template-sample-app/template/src/components/common/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@ const useStyles = makeStyles((theme) => ({
margin: theme.spacing(0, 3),
},
menuButton: {
marginRight: theme.spacing(2),
margin: theme.spacing(0, 0.75, 0, -1.25),

'& + hr': {
marginRight: theme.spacing(1.5),
},
},
drawer: {
minWidth: 260,
Expand All @@ -45,16 +49,9 @@ const useStyles = makeStyles((theme) => ({

'& img': {
height: `${theme.typography.subtitle1.lineHeight}em`,
marginRight: theme.spacing(2),
marginRight: theme.spacing(1.5),
verticalAlign: 'bottom',
},

'& img + hr': {
display: 'inline-block',
height: '1em',
marginRight: theme.spacing(2),
verticalAlign: 'text-bottom',
},
},
},
}));
Expand All @@ -72,7 +69,7 @@ const NavigationMenu = (props) => {
>
<Tabs
value={location.pathname.split('/')[1] || 'stores'}
textColor='inherit'
textColor={vertical ? 'primary' : 'inherit'}
orientation={vertical ? 'vertical' : 'horizontal'}
variant={vertical ? 'fullWidth' : 'standard'}
>
Expand Down Expand Up @@ -112,6 +109,7 @@ export function Header() {
>
{drawerOpen ? <CloseIcon /> : <MenuIcon />}
</IconButton>
<Divider orientation='vertical' light />
</Hidden>
<Link component={NavLink} to='/' className={classes.title}>
<Typography component='h1' variant='subtitle1' noWrap>
Expand All @@ -120,13 +118,12 @@ export function Header() {
</Hidden>
<Hidden smUp>
<img src='/logo-xs.svg' alt='CARTO ' />
<Divider orientation='vertical' light />
</Hidden>
<strong>React</strong> Demo
</Typography>
</Link>
<Hidden xsDown>
<Divider orientation='vertical' className={classes.divider} light></Divider>
<Divider orientation='vertical' className={classes.divider} light />
<NavigationMenu location={location} />
</Hidden>
<Hidden smUp>
Expand Down
6 changes: 5 additions & 1 deletion template-sample-app/template/src/components/views/Kpi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ import { currencyFormatter } from 'utils/formatter';
const useStyles = makeStyles((theme) => ({
title: {
padding: theme.spacing(3, 3, 1.5),

[theme.breakpoints.down('xs')]: {
paddingTop: theme.spacing(0),
},
},
}));

Expand Down Expand Up @@ -74,7 +78,7 @@ export default function Kpi() {
return (
<div>
<Typography variant='h5' gutterBottom className={classes.title}>
Store Analysis
States Analysis
</Typography>

<Divider />
Expand Down
10 changes: 5 additions & 5 deletions template-sample-app/template/src/components/views/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
maxHeight: `calc(100% - ${theme.spacing(6)}px)`,

'&$closed': {
transform: `translateY(calc(100% - ${theme.spacing(14.25)}px)) !important`,
transform: `translateY(calc(100% - ${theme.spacing(12)}px)) !important`,
visibility: 'visible !important',

'& $bottomSheetIcon': {
Expand Down Expand Up @@ -88,18 +88,18 @@ const useStyles = makeStyles((theme) => ({
right: theme.spacing(4),

[theme.breakpoints.down('sm')]: {
bottom: theme.spacing(16),
bottom: theme.spacing(14),
left: theme.spacing(2),
right: 'auto',
},
},
geocoder: {
position: 'absolute',
top: theme.spacing(3),
left: theme.spacing(3),
top: theme.spacing(2),
left: theme.spacing(2),

[theme.breakpoints.down('xs')]: {
width: `calc(100% - ${theme.spacing(6)}px)`,
width: `calc(100% - ${theme.spacing(4)}px)`,
},
},
}));
Expand Down
67 changes: 44 additions & 23 deletions template-sample-app/template/src/components/views/datasets/Datasets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,40 @@ import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { makeStyles } from '@material-ui/core/styles';
import { Grid, Typography } from '@material-ui/core';
import { Button, Divider, Grid, Typography } from '@material-ui/core';
import { Alert } from '@material-ui/lab';

import { selectOAuthCredentials } from '@carto/react/redux';
import { useOAuthLogin } from '@carto/react/oauth';
import { selectOAuthCredentials, setTokenAndUserInfoAsync } from '@carto/react/redux';
import { getUserDatasets } from '@carto/react/api';

import UserDatasets from 'components/views/datasets/UserDatasets';
import { setBottomSheetOpen, setError } from 'config/appSlice';

const useStyles = makeStyles((theme) => ({
root: {
padding: theme.spacing(1.5),
margin: 0,
title: {
padding: theme.spacing(3, 3, 1.5),

'& h5': {
marginBottom: 0,
[theme.breakpoints.down('xs')]: {
paddingTop: theme.spacing(0),
},
},

content: {
padding: theme.spacing(0, 3, 3),
},

alert: {
marginTop: theme.spacing(2),
},
}));

// Limit the number of datasets, using just 1 page, up to 50 datasets
const pagination = { page: 1, size: 50 };

function Datasets() {
const credentials = useSelector(selectOAuthCredentials);
const oauthApp = useSelector((state) => state.oauth.oauthApp);
const dispatch = useDispatch();
const classes = useStyles();
const [datasets, setDatasets] = useState([]);
Expand Down Expand Up @@ -57,31 +66,43 @@ function Datasets() {
};
}, [credentials, dispatch]);

const onParamsRefreshed = (oauthParams) => {
if (oauthParams.error) {
dispatch(setError(`OAuth error: ${oauthParams.error}`));
} else {
dispatch(setTokenAndUserInfoAsync(oauthParams));
}
};

const [handleLogin] = useOAuthLogin(oauthApp, onParamsRefreshed);

return (
<Grid
container
direction='column'
justify='flex-start'
alignItems='stretch'
spacing={3}
className={classes.root}
item
xs
>
<Grid container direction='column' justify='flex-start' alignItems='stretch' item xs>
<Grid item>
<Typography variant='h5' gutterBottom>
<Typography variant='h5' gutterBottom className={classes.title}>
Available datasets
</Typography>
</Grid>

<Grid item xs>
<Divider />

<Grid item xs className={classes.content}>
{credentials ? (
<UserDatasets datasets={datasets} loading={loading} />
) : (
<Alert severity='warning'>
To list your datasets, you have to login first using your CARTO account, and
authorize the OAuth application
</Alert>
<Grid container spacing={2}>
<Grid item>
<Alert severity='warning' className={classes.alert}>
To list your datasets, you have to login first using your CARTO account,
and authorize the OAuth application
</Alert>
</Grid>
<Grid item xs>
<Button variant='contained' color='primary' fullWidth onClick={handleLogin}>
Login
</Button>
</Grid>
</Grid>
)}
</Grid>
</Grid>
Expand Down
44 changes: 30 additions & 14 deletions template-sample-app/template/src/components/views/datasets/UserDatasets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,18 @@ import { ChevronRight, HighlightOff } from '@material-ui/icons';
import { setBottomSheetOpen } from 'config/appSlice';

const useStyles = makeStyles((theme) => ({
loadingContainer: {
height: theme.spacing(8),
},
loadingSpinner: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
textAlign: 'center',

[theme.breakpoints.up('sm')]: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
},
},
}));

Expand All @@ -40,7 +46,7 @@ const OAUTH_SOURCE = 'oauthSource';
export default function UserDatasets(props) {
const dispatch = useDispatch();
const classes = useStyles();

const credentials = useSelector(selectOAuthCredentials);
const { oauthLayer } = useSelector((state) => state.carto.layers);

Expand All @@ -57,7 +63,13 @@ export default function UserDatasets(props) {
})
);

dispatch(addLayer({ id: OAUTH_LAYER, source: OAUTH_SOURCE, layerAttributes: { name: datasetName } }));
dispatch(
addLayer({
id: OAUTH_LAYER,
source: OAUTH_SOURCE,
layerAttributes: { name: datasetName },
})
);

dispatch(setBottomSheetOpen(false));
},
Expand All @@ -67,15 +79,20 @@ export default function UserDatasets(props) {
const removeDataset = useCallback(() => {
dispatch(removeLayer(OAUTH_LAYER));
dispatch(removeSource(OAUTH_SOURCE));
}, [dispatch]);
}, [dispatch]);

// cleanup when leaving
useEffect(() => removeDataset, [removeDataset]);

// Loading...
if (props.loading) {
return (
<Grid container alignItems='center'>
<Grid
container
alignItems='center'
justify='center'
className={classes.loadingContainer}
>
<Grid item className={classes.loadingSpinner}>
<CircularProgress />
</Grid>
Expand All @@ -92,7 +109,8 @@ export default function UserDatasets(props) {
<List component='nav' disablePadding={true}>
{props.datasets.map((dataset) => {
const labelId = `checkbox-list-label-${dataset.name}`;
const datasetLoaded = oauthLayer && oauthLayer.layerAttributes.name === dataset.name;
const datasetLoaded =
oauthLayer && oauthLayer.layerAttributes.name === dataset.name;
const secondary = toTitleCase(`${dataset.privacy}`);

return (
Expand All @@ -102,15 +120,13 @@ export default function UserDatasets(props) {
dense
button
role={undefined}
onClick={() =>
datasetLoaded ? removeDataset() : loadDataset(dataset)
}
onClick={() => (datasetLoaded ? removeDataset() : loadDataset(dataset))}
>
<ListItemText id={labelId} primary={dataset.name} secondary={secondary} />
{datasetLoaded ? (
<HighlightOff color='primary' />
<HighlightOff color='action' />
) : (
<ChevronRight color='primary' />
<ChevronRight color='action' />
)}
</ListItem>
);
Expand Down
24 changes: 12 additions & 12 deletions template-sample-app/template/src/components/views/stores/StoresDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,22 +72,22 @@ export default function StoresDetail() {
});

// Set selected store on the layer
dispatch(updateLayer(
{
dispatch(
updateLayer({
id: LAYER_ID,
layerAttributes: { selectedStore: id }
}
));
layerAttributes: { selectedStore: id },
})
);

dispatch(setBottomSheetOpen(true));

return () => {
dispatch(updateLayer(
{
dispatch(
updateLayer({
id: LAYER_ID,
layerAttributes: { selectedStore: null }
}
));
layerAttributes: { selectedStore: null },
})
);
abortController.abort();
};
}, [dispatch, source, id, location.state]);
Expand Down Expand Up @@ -159,8 +159,8 @@ const useStyles = makeStyles((theme) => ({
storeDetail: {
padding: theme.spacing(3.25, 3),

[theme.breakpoints.down('sm')]: {
paddingTop: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
paddingTop: theme.spacing(0),
},
},
title: {
Expand Down
4 changes: 4 additions & 0 deletions template-sample-app/template/src/components/views/stores/StoresList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ import { currencyFormatter, numberFormatter } from 'utils/formatter';
const useStyles = makeStyles((theme) => ({
title: {
padding: theme.spacing(3, 3, 1.5),

[theme.breakpoints.down('xs')]: {
paddingTop: 0,
},
},
}));

Expand Down
Loading

1 comment on commit bbe40a3

@vercel
Copy link

@vercel vercel bot commented on bbe40a3 Dec 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.