From 4fd8acedb718ca016ea7b44e77ac909337a9b0aa Mon Sep 17 00:00:00 2001 From: James D'Alton <jda1g15@soton.ac.uk> Date: Mon, 17 Feb 2020 14:36:42 +0000 Subject: [PATCH] Initial layout: Prettified --- src/compforge/src/FormsDisplay.js | 69 ++++++++++++++----------------- src/compforge/src/index.js | 21 ++++------ 2 files changed, 39 insertions(+), 51 deletions(-) diff --git a/src/compforge/src/FormsDisplay.js b/src/compforge/src/FormsDisplay.js index aa04585a..51689815 100644 --- a/src/compforge/src/FormsDisplay.js +++ b/src/compforge/src/FormsDisplay.js @@ -1,49 +1,40 @@ import React from 'react'; -import { Grid } from '@material-ui/core'; +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles({ + table: { + minWidth: 650, + }, + }); const FormsDisplay = ({ formItems }) => { + const classes = useStyles(); return ( <div> - {formItems.map( - (formItem, i) => - <Grid - container - direction="column" - justify="space-evenly" - alignItems="stretch" - spacing={3} - item - xs={9} - key={i}> - <FormItem - name={formItem.name} - owner={formItem.owner} - dateModified={formItem.dateModified} /> - </Grid> - )} + <TableContainer component={Paper}> + <Table className={classes.table} aria-label="simple table"> + <TableHead> + <TableRow> + <TableCell>Form name</TableCell> + <TableCell align="right">Owner</TableCell> + <TableCell align="right">Date modified</TableCell> + </TableRow> + </TableHead> + <TableBody> + {formItems.map(formItem => ( + <TableRow key={formItem.name}> + <TableCell component="th" scope="row"> + {formItem.name} + </TableCell> + <TableCell align="right">{formItem.owner}</TableCell> + <TableCell align="right">{formItem.dateModified}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> </div> ) } -const FormItem = ({ name, owner, dateModified }) => { - return ( - <Grid - container - direction="row" - spacing={3}> - <Grid item xs={3}> - <h3>{name}</h3> - </Grid> - <Grid item xs={3}> - <h3>{owner}</h3> - </Grid> - <Grid item xs={3}> - <div outline="2px solid black"> - <h3>{dateModified}</h3> - </div> - </Grid> - </Grid> - ) -} - export default FormsDisplay \ No newline at end of file diff --git a/src/compforge/src/index.js b/src/compforge/src/index.js index d8bacca7..57e55e0a 100644 --- a/src/compforge/src/index.js +++ b/src/compforge/src/index.js @@ -34,6 +34,8 @@ const Page = () => { const classes = useStyles(); return ( <Grid container spacing={3}> + + {/* Header */} <Grid item xs={12}> <AppBar position="static"> <Toolbar> @@ -44,22 +46,17 @@ const Page = () => { </Toolbar> </AppBar> </Grid> - <Grid - item - xs={3} - > + + {/* Side Menu */} + <Grid item xs={2}> <Menu menuItems={menuItems} /> </Grid> - <Grid - container - item - xs={9} - direction="column" - justify="space-evenly" - spacing={3} - > + + {/* Form Area */} + <Grid item xs={10}> <FormsDisplay formItems={formItems} /> </Grid> + </Grid> ) } -- GitLab