From 06f0ac9d85108095654acbb9f7a8670a8d7f2d6b Mon Sep 17 00:00:00 2001
From: Hawk <falk.ba@gmx.de>
Date: Sat, 2 May 2020 20:43:24 +0200
Subject: [PATCH] fixed text wrap issue + restructure

---
 .../src/components/selectResource/index.js    | 46 +++++++++----------
 .../components/selectResource/resourceCard.js | 27 +++++------
 2 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/selectResource/index.js b/frontend/src/components/selectResource/index.js
index 3c246a6..06d3ebc 100644
--- a/frontend/src/components/selectResource/index.js
+++ b/frontend/src/components/selectResource/index.js
@@ -9,7 +9,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 const useStyles = makeStyles(theme => ({
     grid: {
         display: "flex"
-    }
+    },
 }));
 
 const agri = [66, 3, 4, 5, 6, 7, 8, 9, 40, 72, 106]
@@ -65,22 +65,22 @@ export default function SelectResource() {
         resources.length === 0 ?
             <CircularProgress color="secondary" disableShrink /> :
 
-            <Grid container spacing={2} >
-                <Grid item xs={12} className={classes.grid}>
+            <Grid container spacing={4} >
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
                                 Agriculture & Food
-                </Typography>
+                            </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1}>
                                 {resources[0]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -88,13 +88,13 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[1]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -102,13 +102,13 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[2]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -116,13 +116,13 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[3]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -130,13 +130,13 @@ export default function SelectResource() {
                             </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[4]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -144,13 +144,13 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[5]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -158,13 +158,13 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[6]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -172,13 +172,13 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[7]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -186,13 +186,13 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[8]}
                             </Grid>
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12} className={classes.grid}>
+                <Grid item xs={12} lg={6} className={classes.grid}>
                     <Grid container spacing={2} >
                         <Grid item xs={12}>
                             <Typography variant="h4">
@@ -200,7 +200,7 @@ export default function SelectResource() {
                 </Typography>
                         </Grid>
                         <Grid item xs={12} className={classes.grid}>
-                            <Grid container spacing={2} >
+                            <Grid container spacing={1} >
                                 {resources[9]}
                             </Grid>
                         </Grid>
diff --git a/frontend/src/components/selectResource/resourceCard.js b/frontend/src/components/selectResource/resourceCard.js
index 9bb6304..54ded6e 100644
--- a/frontend/src/components/selectResource/resourceCard.js
+++ b/frontend/src/components/selectResource/resourceCard.js
@@ -14,9 +14,9 @@ import Zoom from '@material-ui/core/Zoom';
 
 
 const useStyles = makeStyles(theme => ({
-    picture: {
-
-    }
+    card: {
+        minWidth: 80
+    },
 }));
 function ListItemLink(props) {
     return <ListItem button component={Link1} {...props} />;
@@ -28,15 +28,11 @@ export default function ResourceCard(props) {
 
     var picUrl = "https://d1fxy698ilbz6u.cloudfront.net/static/" + props.resource["image"]
 
-
     const loadResourcePicture = async () => {
         await fetch(picUrl).then(res => { return res.blob() }).then(blob => {
             var img = URL.createObjectURL(blob);
             setPicture(img);
-
         })
-
-
     }
 
     if (picture === null)
@@ -44,18 +40,17 @@ export default function ResourceCard(props) {
 
     return (
 
-        <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}>
+        <Grid item xs={3} lg={2} key={props.resource["name"]} className={classes.card}>
+            <Card>
+                <Tooltip TransitionComponent={Zoom} placement='bottom' title={props.resource["name"]} arrow>
+                    <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>
-                        </Tooltip>
-                        <ListItemText primary={props.resource["name"]} style={{ paddingLeft: 20 }} />
-                    </ListItemLink>
-                </CardContent>
+                        </ListItemLink>
+                    </CardContent>
+                </Tooltip>
             </Card>
         </Grid>