From c8040ed02bfc60bb3514b299f9d12234e8c7b094 Mon Sep 17 00:00:00 2001
From: Hawk <falk.ba@gmx.de>
Date: Sat, 2 May 2020 18:24:34 +0200
Subject: [PATCH] resource list and drawer menu responsive close#25

---
 frontend/src/components/navigation.js         | 14 +++++++++++-
 .../src/components/selectResource/index.js    | 22 +++++++++----------
 .../components/selectResource/resourceCard.js | 15 ++++++++-----
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/navigation.js b/frontend/src/components/navigation.js
index d4e0f2d..0598abe 100644
--- a/frontend/src/components/navigation.js
+++ b/frontend/src/components/navigation.js
@@ -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',
diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js
index ab3467c..3c246a6 100644
--- a/frontend/src/components/selectResource/index.js
+++ b/frontend/src/components/selectResource/index.js
@@ -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>
@@ -127,10 +127,10 @@ export default function SelectResource() {
                         <Grid item xs={12}>
                             <Typography variant="h4">
                                 Electronics
-                </Typography>
+                            </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>
diff --git a/frontend/src/components/selectResource/resourceCard.js b/frontend/src/components/selectResource/resourceCard.js
index 05f1cdb..9bb6304 100644
--- a/frontend/src/components/selectResource/resourceCard.js
+++ b/frontend/src/components/selectResource/resourceCard.js
@@ -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} >
-                        <ListItemIcon>
-                            <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
-                        </ListItemIcon>
-
-                        <ListItemText primary={props.resource["name"]} />
+                        <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>
+                        </Tooltip>
+                        <ListItemText primary={props.resource["name"]} style={{ paddingLeft: 20 }} />
                     </ListItemLink>
                 </CardContent>
             </Card>