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

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

@@ -9,7 +9,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
grid: { grid: {
display: "flex" display: "flex"
} },
})); }));
const agri = [66, 3, 4, 5, 6, 7, 8, 9, 40, 72, 106] const agri = [66, 3, 4, 5, 6, 7, 8, 9, 40, 72, 106]
@@ -65,8 +65,8 @@ export default function SelectResource() {
resources.length === 0 ? resources.length === 0 ?
<CircularProgress color="secondary" disableShrink /> : <CircularProgress color="secondary" disableShrink /> :
<Grid container spacing={2} > <Grid container spacing={4} >
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} lg={6} className={classes.grid}>
<Grid container spacing={2} > <Grid container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -74,13 +74,13 @@ 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={2} > <Grid container spacing={1}>
{resources[0]} {resources[0]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -88,13 +88,13 @@ 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={2} > <Grid container spacing={1} >
{resources[1]} {resources[1]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -102,13 +102,13 @@ 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={2} > <Grid container spacing={1} >
{resources[2]} {resources[2]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -116,13 +116,13 @@ 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={2} > <Grid container spacing={1} >
{resources[3]} {resources[3]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -130,13 +130,13 @@ 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={2} > <Grid container spacing={1} >
{resources[4]} {resources[4]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -144,13 +144,13 @@ 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={2} > <Grid container spacing={1} >
{resources[5]} {resources[5]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -158,13 +158,13 @@ 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={2} > <Grid container spacing={1} >
{resources[6]} {resources[6]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -172,13 +172,13 @@ 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={2} > <Grid container spacing={1} >
{resources[7]} {resources[7]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -186,13 +186,13 @@ 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={2} > <Grid container spacing={1} >
{resources[8]} {resources[8]}
</Grid> </Grid>
</Grid> </Grid>
</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 container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
@@ -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={2} > <Grid container spacing={1} >
{resources[9]} {resources[9]}
</Grid> </Grid>
</Grid> </Grid>

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

@@ -14,9 +14,9 @@ import Zoom from '@material-ui/core/Zoom';
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
picture: { card: {
minWidth: 80
} },
})); }));
function ListItemLink(props) { function ListItemLink(props) {
return <ListItem button component={Link1} {...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"] var picUrl = "https://d1fxy698ilbz6u.cloudfront.net/static/" + props.resource["image"]
const loadResourcePicture = async () => { const loadResourcePicture = async () => {
await fetch(picUrl).then(res => { return res.blob() }).then(blob => { await fetch(picUrl).then(res => { return res.blob() }).then(blob => {
var img = URL.createObjectURL(blob); var img = URL.createObjectURL(blob);
setPicture(img); setPicture(img);
}) })
} }
if (picture === null) if (picture === null)
@@ -44,18 +40,17 @@ export default function ResourceCard(props) {
return ( return (
<Grid item xs={3} lg={2} key={props.resource["name"]}> <Grid item xs={3} lg={2} key={props.resource["name"]} className={classes.card}>
<Card> <Card>
<Tooltip TransitionComponent={Zoom} placement='bottom' title={props.resource["name"]} arrow>
<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"]} style={{ paddingLeft: 20 }} />
</ListItemLink> </ListItemLink>
</CardContent> </CardContent>
</Tooltip>
</Card> </Card>
</Grid> </Grid>