refactor: switch from Grid to Box for more flexible layout using flexbox

main
Josue 4 years ago committed by Tsu-ba-me
parent ec28e8750a
commit 2c795383d2
  1. 80
      striker-ui/pages/index.tsx

@ -1,6 +1,7 @@
import { Grid } from '@material-ui/core';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Header from '../components/Header';
import Anvils from '../components/Anvils';
import Nodes from '../components/Nodes';
import CPU from '../components/CPU';
@ -10,9 +11,16 @@ import Network from '../components/Network';
import PeriodicFetch from '../lib/fetchers/periodicFetch';
import Servers from '../components/Servers';
import AnvilProvider from '../components/AnvilContext';
const useStyles = makeStyles(() => ({
grid: {
height: '100vh',
child: {
width: '22%',
height: '100%',
},
server: {
width: '35%',
height: '100%',
},
}));
@ -25,50 +33,38 @@ const Home = (): JSX.Element => {
);
return (
<Grid container alignItems="center" justify="space-around">
<Grid item xs={3}>
<Grid container justify="flex-start" direction="column">
<Anvils list={data} />
<Nodes anvil={data?.anvils[0]} />
</Grid>
</Grid>
<Grid item xs={3}>
<Grid
container
justify="flex-start"
direction="column"
className={classes.grid}
>
<Servers anvil={data?.anvils[0]} />
</Grid>
</Grid>
<Grid item xs={3}>
<Grid
container
justify="flex-start"
direction="column"
className={classes.grid}
>
<SharedStorage anvil={data?.anvils[0]} />
</Grid>
</Grid>
<Grid item xs={3}>
<Grid
container
justify="flex-start"
direction="column"
className={classes.grid}
<>
<Header />
<AnvilProvider>
<Box
display="flex"
flexDirection="row"
width="100%"
justifyContent="space-between"
alignContent="flex-start"
>
{data?.anvils?.length ? (
{data?.anvils && (
<>
<Network />
<Box p={1} className={classes.child}>
<Anvils list={data} />
<Nodes anvil={data.anvils[0]} />
</Box>
<Box p={1} className={classes.server}>
<Servers anvil={data.anvils} />
</Box>
<Box p={1} className={classes.child}>
<SharedStorage anvil={data.anvils[0]} />
</Box>
<Box p={1} className={classes.child}>
<Network anvil={data.anvils[0]} />
<CPU uuid={data.anvils[0].anvil_uuid} />
<Memory uuid={data.anvils[0].anvil_uuid} />
</Box>
</>
)}
</Box>
</AnvilProvider>
</>
) : null}
</Grid>
</Grid>
</Grid>
);
};

Loading…
Cancel
Save