Commit ac04d66c authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

make header responsive to small screens by using different headers depending on breakpoints

parent 16f5cd91
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
AppBar, Button, ClickAwayListener, Drawer, Grid, Grow, Link, MenuItem, MenuList, Paper, Popper, Slide, Toolbar,
Tooltip, Typography, useScrollTrigger
AppBar, Button, ClickAwayListener, Drawer, Grid, Grow, Hidden, Link, MenuItem, MenuList, Paper, Popper, Slide,
Toolbar, Tooltip, Typography, useScrollTrigger
} from '@material-ui/core';
import { useStyles } from '../../styles';
import { CollapsedFilters, Filters } from "..";
......@@ -181,8 +181,74 @@ export const PageHeader = (props) => {
</Toolbar>
</AppBar>
{/* white header containing filters which is shown on page load, it will disappear when scrolling down and reappear when scrolling up */}
<HideOnScroll {...props}>
{/* show different headers depending on screen size breakpoints using Hidden */}
{/* for breakpoints md and up (i.e., hide for sm down), occupy more space with headers */}
<Hidden smDown>
{/* white header containing filters which is shown on page load, it will disappear when scrolling down and reappear when scrolling up */}
<HideOnScroll {...props}>
<AppBar
className={classes.whiteHeader}
position="relative"
>
<Toolbar>
<Filters
reducer={[input, dispatch]}
viewResultsButton={
<Tooltip title={t("View results")} arrow placement="right">
<Button
size="large"
onClick={scrollDashboardIntoView}
>
<ArrowDownwardIcon fontSize="large" />
</Button>
</Tooltip>
}
loadingInfo={loadingInfo}
/>
</Toolbar>
</AppBar>
</HideOnScroll>
{/* overlay header containing CollapsedFilters and a button with which to open a Filters drawer, only visible once user has scrolled down a bit */}
<ElevationScroll {...props}>
<AppBar
className={classes.smallHeader}
color="primary"
>
<Toolbar>
<Grid container direction="row" spacing={2}>
{/* the overview of the current filter values */}
<CollapsedFilters
input={input}
toggleDrawer={toggleDrawer()}
/>
<Button
variant="contained"
color="primary"
disableElevation
onClick={toggleDrawer()}
className={classes.changeFiltersButton}
>
<SearchIcon/> <Typography variant="button">{t("Change filters")}</Typography> <ExpandMoreIcon/>
</Button>
<Grid item xs={12} container spacing={1} className={classes.loadingInfo}>
<Grid item>
<Typography variant="h6" component="h3" color="textPrimary">{t("Status")}:</Typography>
</Grid>
<Grid item className={classes.loadingInfoContent}>
{loadingInfo}
</Grid>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</ElevationScroll>
</Hidden>
{/* for breakpoints from md up (i.e. hide for sm down), user has to scroll back up to see header to save space */}
<Hidden mdUp>
<AppBar
className={classes.whiteHeader}
position="relative"
......@@ -204,44 +270,7 @@ export const PageHeader = (props) => {
/>
</Toolbar>
</AppBar>
</HideOnScroll>
{/* overlay header containing CollapsedFilters and a button with which to open a Filters drawer, only visible once user has scrolled down a bit */}
<ElevationScroll {...props}>
<AppBar
className={classes.smallHeader}
color="primary"
>
<Toolbar>
<Grid container direction="row" spacing={2}>
{/* the overview of the current filter values */}
<CollapsedFilters
input={input}
toggleDrawer={toggleDrawer()}
/>
<Button
variant="contained"
color="primary"
disableElevation
onClick={toggleDrawer()}
className={classes.changeFiltersButton}
>
<SearchIcon/> <Typography variant="button">{t("Change filters")}</Typography> <ExpandMoreIcon/>
</Button>
<Grid item xs={12} container spacing={1} className={classes.loadingInfo}>
<Grid item>
<Typography variant="h6" component="h3" color="textPrimary">{t("Status")}:</Typography>
</Grid>
<Grid item className={classes.loadingInfoContent}>
{loadingInfo}
</Grid>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</ElevationScroll>
</Hidden>
{/* the filters inside a drawer */}
<Drawer
......
......@@ -130,11 +130,7 @@ const useStyles = makeStyles(theme => ({
},
"&& .MuiInputLabel-shrink": {
color: neutralColor.darker
},
/*[theme.breakpoints.down("sm")]: {
height: 0,
visibility: "hidden",
}*/
}
},
changeLanguageButton: {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment