Skip to content

Commit a53f890

Browse files
Alessandro100Alessandro100
authored
mobile enhancements (#772)
1 parent 601b42f commit a53f890

File tree

12 files changed

+238
-161
lines changed

12 files changed

+238
-161
lines changed

‎web-app/src/app/App.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,6 @@
3737
}
3838
}
3939

40-
main {
41-
padding-left: 0 !important;
42-
padding-right: 0 !important;
43-
}
44-
4540
#app-main-container {
4641
height: 100vh;
4742
display: flex;

‎web-app/src/app/components/ContentBox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from 'react';
2-
import { Box, Grid } from '@mui/material';
2+
import { Box, Grid, type SxProps } from '@mui/material';
33

44
export interface ContentBoxProps {
55
title: string;
66
width: Record<string, string>;
77
outlineColor: string;
8-
padding?: string | number;
8+
padding?: Partial<SxProps>;
99
margin?: string | number;
1010
}
1111

‎web-app/src/app/components/Header.tsx‎

Lines changed: 154 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,21 @@ import { useRemoteConfig } from '../context/RemoteConfigProvider';
4343
import i18n from '../../i18n';
4444
import { NestedMenuItem } from 'mui-nested-menu';
4545
import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
46+
import { theme } from '../Theme';
4647

4748
const drawerWidth = 240;
4849
const websiteTile = 'Mobility Database';
4950
const DrawerContent: React.FC<{
5051
onLogoutClick: React.MouseEventHandler;
5152
onNavigationClick: (target: NavigationItem | string) => void;
5253
navigationItems: NavigationItem[];
53-
}> = ({ onLogoutClick, onNavigationClick, navigationItems }) => {
54+
metricsOptionsEnabled: boolean;
55+
}> = ({
56+
onLogoutClick,
57+
onNavigationClick,
58+
navigationItems,
59+
metricsOptionsEnabled,
60+
}) => {
5461
const isAuthenticated = useSelector(selectIsAuthenticated);
5562
const navigateTo = useNavigate();
5663
return (
@@ -97,38 +104,75 @@ const DrawerContent: React.FC<{
97104
</ListItem>
98105
))}
99106
<Divider sx={{ mt: 2, mb: 2 }} />
100-
<TreeView
101-
defaultCollapseIcon={<ExpandMoreIcon />}
102-
defaultExpandIcon={<ChevronRightIcon />}
103-
sx={{ textAlign: 'left' }}
104-
>
105-
<TreeItem nodeId='1' label='GTFS Metrics' sx={{ color: '#3959fa' }}>
106-
<TreeItem
107-
nodeId='2'
108-
label='Feeds'
109-
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
110-
onClick={() => {
111-
onNavigationClick('/metrics/gtfs/feeds');
112-
}}
113-
/>
107+
{metricsOptionsEnabled && (
108+
<TreeView
109+
defaultCollapseIcon={<ExpandMoreIcon />}
110+
defaultExpandIcon={<ChevronRightIcon />}
111+
sx={{ textAlign: 'left' }}
112+
>
114113
<TreeItem
115-
nodeId='3'
116-
label='Notices'
117-
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
118-
onClick={() => {
119-
onNavigationClick('/metrics/gtfs/notices');
120-
}}
121-
/>
114+
nodeId='1'
115+
label='GTFS Metrics'
116+
sx={{ color: theme.palette.primary.main }}
117+
>
118+
<TreeItem
119+
nodeId='2'
120+
label='Feeds'
121+
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
122+
onClick={() => {
123+
onNavigationClick('/metrics/gtfs/feeds');
124+
}}
125+
/>
126+
<TreeItem
127+
nodeId='3'
128+
label='Notices'
129+
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
130+
onClick={() => {
131+
onNavigationClick('/metrics/gtfs/notices');
132+
}}
133+
/>
134+
<TreeItem
135+
nodeId='4'
136+
label='Features'
137+
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
138+
onClick={() => {
139+
onNavigationClick('/metrics/gtfs/features');
140+
}}
141+
/>
142+
</TreeItem>
122143
<TreeItem
123-
nodeId='4'
124-
label='Features'
125-
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
126-
onClick={() => {
127-
onNavigationClick('/metrics/gtfs/features');
128-
}}
129-
/>
130-
</TreeItem>
131-
</TreeView>
144+
nodeId='5'
145+
label='GBFS Metrics'
146+
sx={{ color: theme.palette.primary.main }}
147+
>
148+
<TreeItem
149+
nodeId='6'
150+
label='Feeds'
151+
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
152+
onClick={() => {
153+
onNavigationClick('/metrics/gbfs/feeds');
154+
}}
155+
/>
156+
<TreeItem
157+
nodeId='7'
158+
label='Notices'
159+
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
160+
onClick={() => {
161+
onNavigationClick('/metrics/gbfs/notices');
162+
}}
163+
/>
164+
<TreeItem
165+
nodeId='8'
166+
label='Versions'
167+
sx={{ color: '#7c7c7c', cursor: 'pointer' }}
168+
onClick={() => {
169+
onNavigationClick('/metrics/gbfs/versions');
170+
}}
171+
/>
172+
</TreeItem>
173+
</TreeView>
174+
)}
175+
132176
{isAuthenticated ? (
133177
<TreeView
134178
defaultCollapseIcon={<ExpandMoreIcon />}
@@ -138,7 +182,7 @@ const DrawerContent: React.FC<{
138182
<TreeItem
139183
nodeId='1'
140184
label='Account'
141-
sx={{ color: '#3959fa' }}
185+
sx={{ color: theme.palette.primary.main }}
142186
data-cy='accountHeader'
143187
>
144188
<TreeItem
@@ -161,7 +205,7 @@ const DrawerContent: React.FC<{
161205
</TreeView>
162206
) : (
163207
<ListItem
164-
sx={{ color: '#3959fa' }}
208+
sx={{ color: theme.palette.primary.main }}
165209
onClick={() => {
166210
onNavigationClick(SIGN_IN_TARGET);
167211
}}
@@ -244,6 +288,9 @@ export default function DrawerAppBar(): React.ReactElement {
244288
handleNavigation(item);
245289
};
246290

291+
const metricsOptionsEnabled =
292+
config.enableMetrics || userEmail?.endsWith('mobilitydata.org') === true;
293+
247294
return (
248295
<Box sx={{ display: 'flex' }}>
249296
<AppBar
@@ -301,85 +348,83 @@ export default function DrawerAppBar(): React.ReactElement {
301348
</Button>
302349
))}
303350
{/* Allow users with mobilitydata.org email to access metrics */}
304-
{config.enableMetrics ||
305-
(userEmail?.endsWith('mobilitydata.org') === true && (
306-
<>
307-
<Button
308-
aria-controls='analytics-menu'
309-
aria-haspopup='true'
310-
endIcon={<ArrowDropDownIcon />}
311-
onClick={handleMenuOpen}
312-
sx={{ color: 'black' }}
313-
id='analytics-button-menu'
351+
{metricsOptionsEnabled && (
352+
<>
353+
<Button
354+
aria-controls='analytics-menu'
355+
aria-haspopup='true'
356+
endIcon={<ArrowDropDownIcon />}
357+
onClick={handleMenuOpen}
358+
sx={{ color: 'black' }}
359+
id='analytics-button-menu'
360+
>
361+
Metrics
362+
</Button>
363+
<Menu
364+
id='analytics-menu'
365+
anchorEl={anchorEl}
366+
open={
367+
anchorEl !== null && anchorEl.id === 'analytics-button-menu'
368+
}
369+
onClose={handleMenuClose}
370+
>
371+
<NestedMenuItem
372+
label='GTFS'
373+
parentMenuOpen={Boolean(anchorEl)}
374+
leftIcon={<DirectionsBusIcon />}
314375
>
315-
Metrics
316-
</Button>
317-
<Menu
318-
id='analytics-menu'
319-
anchorEl={anchorEl}
320-
open={
321-
anchorEl !== null &&
322-
anchorEl.id === 'analytics-button-menu'
323-
}
324-
onClose={handleMenuClose}
376+
<MenuItem
377+
onClick={() => {
378+
handleMenuItemClick('/metrics/gtfs/feeds');
379+
}}
380+
>
381+
Feeds
382+
</MenuItem>
383+
<MenuItem
384+
onClick={() => {
385+
handleMenuItemClick('/metrics/gtfs/notices');
386+
}}
387+
>
388+
Notices
389+
</MenuItem>
390+
<MenuItem
391+
onClick={() => {
392+
handleMenuItemClick('/metrics/gtfs/features');
393+
}}
394+
>
395+
Features
396+
</MenuItem>
397+
</NestedMenuItem>
398+
<NestedMenuItem
399+
label='GBFS'
400+
parentMenuOpen={Boolean(anchorEl)}
401+
leftIcon={<BikeScooterOutlined />}
325402
>
326-
<NestedMenuItem
327-
label='GTFS'
328-
parentMenuOpen={Boolean(anchorEl)}
329-
leftIcon={<DirectionsBusIcon />}
403+
<MenuItem
404+
onClick={() => {
405+
handleMenuItemClick('/metrics/gbfs/feeds');
406+
}}
330407
>
331-
<MenuItem
332-
onClick={() => {
333-
handleMenuItemClick('/metrics/gtfs/feeds');
334-
}}
335-
>
336-
Feeds
337-
</MenuItem>
338-
<MenuItem
339-
onClick={() => {
340-
handleMenuItemClick('/metrics/gtfs/notices');
341-
}}
342-
>
343-
Notices
344-
</MenuItem>
345-
<MenuItem
346-
onClick={() => {
347-
handleMenuItemClick('/metrics/gtfs/features');
348-
}}
349-
>
350-
Features
351-
</MenuItem>
352-
</NestedMenuItem>
353-
<NestedMenuItem
354-
label='GBFS'
355-
parentMenuOpen={Boolean(anchorEl)}
356-
leftIcon={<BikeScooterOutlined />}
408+
Feeds
409+
</MenuItem>
410+
<MenuItem
411+
onClick={() => {
412+
handleMenuItemClick('/metrics/gbfs/notices');
413+
}}
357414
>
358-
<MenuItem
359-
onClick={() => {
360-
handleMenuItemClick('/metrics/gbfs/feeds');
361-
}}
362-
>
363-
Feeds
364-
</MenuItem>
365-
<MenuItem
366-
onClick={() => {
367-
handleMenuItemClick('/metrics/gbfs/notices');
368-
}}
369-
>
370-
Notices
371-
</MenuItem>
372-
<MenuItem
373-
onClick={() => {
374-
handleMenuItemClick('/metrics/gbfs/versions');
375-
}}
376-
>
377-
Versions
378-
</MenuItem>
379-
</NestedMenuItem>
380-
</Menu>
381-
</>
382-
))}
415+
Notices
416+
</MenuItem>
417+
<MenuItem
418+
onClick={() => {
419+
handleMenuItemClick('/metrics/gbfs/versions');
420+
}}
421+
>
422+
Versions
423+
</MenuItem>
424+
</NestedMenuItem>
425+
</Menu>
426+
</>
427+
)}
383428

384429
{isAuthenticated ? (
385430
<>
@@ -456,6 +501,7 @@ export default function DrawerAppBar(): React.ReactElement {
456501
onLogoutClick={handleLogoutClick}
457502
onNavigationClick={handleNavigation}
458503
navigationItems={navigationItems}
504+
metricsOptionsEnabled={metricsOptionsEnabled}
459505
/>
460506
</Drawer>
461507
</nav>

‎web-app/src/app/screens/About.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,13 @@ import { OpenInNew } from '@mui/icons-material';
88

99
export default function About(): React.ReactElement {
1010
return (
11-
<Container component='main' sx={{ width: '100vw', m: 0 }}>
11+
<Container component='main'>
1212
<CssBaseline />
1313
<Box
1414
sx={{
1515
mt: 12,
1616
display: 'flex',
1717
flexDirection: 'column',
18-
width: '100vw',
19-
m: 10,
2018
}}
2119
>
2220
<Typography variant='h4' color='primary' sx={{ fontWeight: 700 }}>
@@ -25,7 +23,6 @@ export default function About(): React.ReactElement {
2523
<Box
2624
sx={{
2725
background: '#F8F5F5',
28-
width: '90vw',
2926
mt: 2,
3027
p: 2,
3128
borderRadius: '6px 6px 0px 0px',

0 commit comments

Comments
 (0)