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

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

@@ -74,7 +74,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[0]}
</Grid>
</Grid>
@@ -88,7 +88,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[1]}
</Grid>
</Grid>
@@ -102,7 +102,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[2]}
</Grid>
</Grid>
@@ -116,7 +116,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[3]}
</Grid>
</Grid>
@@ -130,7 +130,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[4]}
</Grid>
</Grid>
@@ -144,7 +144,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[5]}
</Grid>
</Grid>
@@ -158,7 +158,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[6]}
</Grid>
</Grid>
@@ -172,7 +172,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[7]}
</Grid>
</Grid>
@@ -186,7 +186,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[8]}
</Grid>
</Grid>
@@ -200,7 +200,7 @@ export default function SelectResource() {
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
<Grid container spacing={2} >
{resources[9]}
</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 ListItemText from '@material-ui/core/ListItemText';
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 => ({
@@ -42,15 +44,16 @@ export default function ResourceCard(props) {
return (
<Grid item xs={4} lg={2} key={props.resource["name"]}>
<Grid item xs={3} lg={2} key={props.resource["name"]}>
<Card >
<CardContent style={{ padding: 0 }}>
<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>
<img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
</ListItemIcon>
<ListItemText primary={props.resource["name"]} />
</Tooltip>
<ListItemText primary={props.resource["name"]} style={{ paddingLeft: 20 }} />
</ListItemLink>
</CardContent>
</Card>