night0721/nyx-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added some margin to home page card grid

Browse source
This commit is contained in:
qt-coder 2021-06-25 08:07:36 +08:00
parent 5eafb64efd
commit c857c40fbd
3 changed files with 74 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Card.js
View file

@ -4,7 +4,7 @@ import Link from 'next/link'
const useStyles = makeStyles({ const useStyles = makeStyles({
homeCard: { homeCard: {
width: '350px', width: '300px',
height: '150px', height: '150px',
background: '#1f1b24', background: '#1f1b24',
margin: '10px', margin: '10px',

144
pages/controlpanel/commands.js
View file

@ -1,72 +1,72 @@
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table'; import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody'; import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell'; import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer'; import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead'; import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow'; import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Head from 'next/head' import Head from 'next/head'
import { useSession } from 'next-auth/client' import { useSession } from 'next-auth/client'
const useStyles = makeStyles({ const useStyles = makeStyles({
table: { table: {
minWidth: 650, minWidth: 650,
}, },
}); });
function createData(name, description, status) { function createData(name, description, status) {
return { name, description, status }; return { name, description, status };
} }
const rows = [ const rows = [
createData('Command', 'Description', true), createData('Command', 'Description', true),
createData('Command', 'Description', true), createData('Command', 'Description', true),
createData('Command', 'Description', true), createData('Command', 'Description', true),
createData('Command', 'Description', true), createData('Command', 'Description', true),
]; ];
function Commands() { function Commands() {
const [session, loading] = useSession() const [session, loading] = useSession()
const classes = useStyles(); const classes = useStyles();
return ( return (
<> <>
{session && {session &&
<> <>
<Head> <Head>
<title>Cath Commands</title> <title>Cath Commands</title>
</Head> </Head>
<TableContainer component={Paper} style={{ background: '#1F1B24' }}> <TableContainer component={Paper} style={{ background: '#1F1B24' }}>
<Table className={classes.table} aria-label="simple table"> <Table className={classes.table} aria-label="simple table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell style={{ color: '#fff' }}>Commands</TableCell> <TableCell style={{ color: '#fff' }}>Commands</TableCell>
<TableCell align="right" style={{ color: '#fff' }}>Description</TableCell> <TableCell align="right" style={{ color: '#fff' }}>Description</TableCell>
<TableCell align="right" style={{ color: '#fff' }}>Status</TableCell> <TableCell align="right" style={{ color: '#fff' }}>Status</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.map((row) => ( {rows.map((row) => (
<TableRow key={row.name}> <TableRow key={row.name}>
<TableCell component="th" scope="row" style={{ color: '#fff' }}> <TableCell component="th" scope="row" style={{ color: '#fff' }}>
{row.name} {row.name}
</TableCell> </TableCell>
<TableCell align="right" style={{ color: '#fff' }}>{row.description}</TableCell> <TableCell align="right" style={{ color: '#fff' }}>{row.description}</TableCell>
<TableCell align="right" style={{ color: '#fff' }}>{row.status ? 'Online' : 'Offline'}</TableCell> <TableCell align="right" style={{ color: '#fff' }}>{row.status ? 'Online' : 'Offline'}</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
</> </>
} {!session && <> } {!session && <>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1> <h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
</> </>
} }
</> </>
); );
} }
export default Commands export default Commands

1
styles/globals.css
View file

@ -40,6 +40,7 @@ a {
} }
.grid { .grid {
margin: 50px;
margin-top: 50px; margin-top: 50px;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 350px); grid-template-columns: repeat(auto-fill, 350px);