diff options
| author | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-23 13:52:48 +0000 |
|---|---|---|
| committer | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-23 13:52:48 +0000 |
| commit | d9bd2a941c4a11c660e52db504587ba735a29add (patch) | |
| tree | 04f09dbf855b6a2541ba93303959adc33fda5b98 /modern/src/MainPage.js | |
| parent | e66bb788f569fc3123e22372e871759d4d420c52 (diff) | |
| download | trackermap-web-d9bd2a941c4a11c660e52db504587ba735a29add.tar.gz trackermap-web-d9bd2a941c4a11c660e52db504587ba735a29add.tar.bz2 trackermap-web-d9bd2a941c4a11c660e52db504587ba735a29add.zip | |
Fixed homepage issues
Diffstat (limited to 'modern/src/MainPage.js')
| -rw-r--r-- | modern/src/MainPage.js | 22 |
1 files changed, 13 insertions, 9 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 417cdb03..e0707404 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -36,10 +36,10 @@ const useStyles = makeStyles((theme) => ({ bottom: theme.spacing(8), zIndex: 1301, transition: 'transform .5s ease', + backgroundColor: 'white', [theme.breakpoints.down('md')]: { width: '100%', margin: 0, - backgroundColor: 'white', }, }, sidebarCollapsed: { @@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({ }, }, paper: { - borderRadius: '0px', + zIndex: 1, }, toolbar: { display: 'flex', @@ -61,8 +61,6 @@ const useStyles = makeStyles((theme) => ({ }, deviceList: { flex: 1, - overflow: 'auto', - padding: theme.spacing(1.5, 0), }, sidebarToggle: { position: 'absolute', @@ -71,7 +69,13 @@ const useStyles = makeStyles((theme) => ({ borderRadius: '0px', minWidth: 0, [theme.breakpoints.down('md')]: { - left: theme.spacing(0), + left: 0, + }, + }, + sidebarToggleText: { + marginLeft: theme.spacing(1), + [theme.breakpoints.only('xs')]: { + display: 'none', }, }, sidebarToggleBg: { @@ -121,10 +125,10 @@ const MainPage = () => { disableElevation > <ListIcon /> - {!isPhone ? t('deviceTitle') : ''} + <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div> </Button> - <div className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}> - <Paper className={classes.paper} elevation={isTablet ? 3 : 1}> + <Paper elevation={3} className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}> + <Paper className={classes.paper} square elevation={3}> <Toolbar className={classes.toolbar} disableGutters> {isTablet && ( <IconButton onClick={handleClose}> @@ -154,7 +158,7 @@ const MainPage = () => { <div className={classes.deviceList}> <DevicesList /> </div> - </div> + </Paper> <BottomNav showOnDesktop /> </div> |