SimCompanies/dashboard
2
1
Fork 0
Code Issues 17 Pull Requests Releases Activity

resource list and drawer menu responsive close#25

Browse Source
This commit is contained in:
Hawk
2020-05-02 18:24:34 +02:00
parent 7c8914bc52
commit c8040ed02b
3 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/navigation.js
View File

@@ -44,6 +44,9 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.easeOut, easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
[theme.breakpoints.down('xs')]: {
width: `calc(100% - ${drawerWidth}px)`,
},
}, },
menuButton: { menuButton: {
marginRight: theme.spacing(2), marginRight: theme.spacing(2),
@@ -54,7 +57,10 @@ const useStyles = makeStyles((theme) => ({
drawer: { drawer: {
width: drawerWidth, width: drawerWidth,
flexShrink: 0, flexShrink: 0,
whiteSpace: 'nowrap' whiteSpace: 'nowrap',
[theme.breakpoints.down('xs')]: {
width: 0,
},
}, },
drawerOpen: { drawerOpen: {
width: drawerWidthOpen, width: drawerWidthOpen,
@@ -62,6 +68,9 @@ const useStyles = makeStyles((theme) => ({
easing: theme.transitions.easing.sharp, easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
[theme.breakpoints.down('xs')]: {
width: drawerWidth,
},
}, },
drawerClose: { drawerClose: {
transition: theme.transitions.create('width', { transition: theme.transitions.create('width', {
@@ -70,6 +79,9 @@ const useStyles = makeStyles((theme) => ({
}), }),
overflowX: 'hidden', overflowX: 'hidden',
width: drawerWidth, width: drawerWidth,
[theme.breakpoints.down('xs')]: {
width: 0,
},
}, },
drawerHeader: { drawerHeader: {
display: 'flex', display: 'flex',

20
frontend/src/components/selectResource/index.js
View File

@@ -74,7 +74,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[0]} {resources[0]}
</Grid> </Grid>
</Grid> </Grid>
@@ -88,7 +88,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[1]} {resources[1]}
</Grid> </Grid>
</Grid> </Grid>
@@ -102,7 +102,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[2]} {resources[2]}
</Grid> </Grid>
</Grid> </Grid>
@@ -116,7 +116,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[3]} {resources[3]}
</Grid> </Grid>
</Grid> </Grid>
@@ -130,7 +130,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[4]} {resources[4]}
</Grid> </Grid>
</Grid> </Grid>
@@ -144,7 +144,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[5]} {resources[5]}
</Grid> </Grid>
</Grid> </Grid>
@@ -158,7 +158,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[6]} {resources[6]}
</Grid> </Grid>
</Grid> </Grid>
@@ -172,7 +172,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[7]} {resources[7]}
</Grid> </Grid>
</Grid> </Grid>
@@ -186,7 +186,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[8]} {resources[8]}
</Grid> </Grid>
</Grid> </Grid>
@@ -200,7 +200,7 @@ export default function SelectResource() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} > <Grid container spacing={2} >
{resources[9]} {resources[9]}
</Grid> </Grid>
</Grid> </Grid>

9
frontend/src/components/selectResource/resourceCard.js
View File

@@ -9,6 +9,8 @@ import Link1 from '@material-ui/core/Link';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import Tooltip from '@material-ui/core/Tooltip';
import Zoom from '@material-ui/core/Zoom';
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
@@ -42,15 +44,16 @@ export default function ResourceCard(props) {
return ( return (
<Grid item xs={4} lg={2} key={props.resource["name"]}> <Grid item xs={3} lg={2} key={props.resource["name"]}>
<Card > <Card >
<CardContent style={{ padding: 0 }}> <CardContent style={{ padding: 0 }}>
<ListItemLink to={{ pathname: "/resourcechart/" + props.resource["db_letter"], state: { name: props.resource["name"] } }} component={Link} > <ListItemLink to={{ pathname: "/resourcechart/" + props.resource["db_letter"], state: { name: props.resource["name"] } }} component={Link} >
<Tooltip TransitionComponent={Zoom} placement='bottom' title={props.resource["name"]} enterDelay={500}>
<ListItemIcon> <ListItemIcon>
<img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} /> <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
</ListItemIcon> </ListItemIcon>
</Tooltip>
<ListItemText primary={props.resource["name"]} /> <ListItemText primary={props.resource["name"]} style={{ paddingLeft: 20 }} />
</ListItemLink> </ListItemLink>
</CardContent> </CardContent>
</Card> </Card>