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

fixed text wrap issue + restructure

Browse Source
This commit is contained in:
Hawk
2020-05-02 20:43:24 +02:00
parent bea593c326
commit 06f0ac9d85
2 changed files with 34 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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>