fix order trade table layout

This commit is contained in:
c9s 2021-02-05 09:48:40 +08:00
parent 67d8a44532
commit 65f3613dc1
3 changed files with 43 additions and 28 deletions

View File

@ -10,7 +10,7 @@ import SideBar from "../components/SideBar";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
// flexGrow: 1, flexGrow: 1,
display: 'flex', display: 'flex',
}, },
content: { content: {
@ -22,6 +22,7 @@ const useStyles = makeStyles((theme) => ({
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
}, },
appBarSpacer: theme.mixins.toolbar, appBarSpacer: theme.mixins.toolbar,
container: { }
})); }));
export default function DashboardLayout({children}) { export default function DashboardLayout({children}) {
@ -42,7 +43,7 @@ export default function DashboardLayout({children}) {
<main className={classes.content}> <main className={classes.content}>
<div className={classes.appBarSpacer}/> <div className={classes.appBarSpacer}/>
<Container maxWidth={false} disableGutters={true}> <Container className={classes.container} maxWidth={false} disableGutters={true}>
{children} {children}
</Container> </Container>
</main> </main>

View File

@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react';
import {makeStyles} from '@material-ui/core/styles'; import {makeStyles} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import {queryClosedOrders} from '../api/bbgo'; import {queryClosedOrders} from '../api/bbgo';
import {DataGrid} from '@material-ui/data-grid'; import {DataGrid} from '@material-ui/data-grid';
@ -27,8 +26,13 @@ const columns = [
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
paper: { paper: {
margin: theme.spacing(2),
padding: theme.spacing(2), padding: theme.spacing(2),
}, },
dataGridContainer: {
display: 'flex',
height: 'calc(100vh - 64px - 120px)',
}
})); }));
export default function Orders() { export default function Orders() {
@ -47,18 +51,21 @@ export default function Orders() {
return ( return (
<DashboardLayout> <DashboardLayout>
<Box m={4}> <Paper className={classes.paper}>
<Paper className={classes.paper}> <Typography variant="h4" gutterBottom>
<Typography variant="h4" component="h2" gutterBottom> Orders
Orders </Typography>
</Typography> <div className={classes.dataGridContainer}>
</Paper> <div style={{flexGrow: 1}}>
<DataGrid <DataGrid
rows={orders} rows={orders}
columns={columns} columns={columns}
pageSize={50} pageSize={50}
autoHeight={true}/> autoPageSize={true}
</Box> />
</div>
</div>
</Paper>
</DashboardLayout> </DashboardLayout>
); );
} }

View File

@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react';
import {makeStyles} from '@material-ui/core/styles'; import {makeStyles} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import {queryTrades} from '../api/bbgo'; import {queryTrades} from '../api/bbgo';
import {DataGrid} from '@material-ui/data-grid'; import {DataGrid} from '@material-ui/data-grid';
@ -22,8 +21,13 @@ const columns = [
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
paper: { paper: {
margin: theme.spacing(2),
padding: theme.spacing(2), padding: theme.spacing(2),
}, },
dataGridContainer: {
display: 'flex',
height: 'calc(100vh - 64px - 120px)',
}
})); }));
export default function Trades() { export default function Trades() {
@ -42,18 +46,21 @@ export default function Trades() {
return ( return (
<DashboardLayout> <DashboardLayout>
<Box m={4}> <Paper className={classes.paper}>
<Paper className={classes.paper}> <Typography variant="h4" gutterBottom>
<Typography variant="h4" component="h2" gutterBottom> Trades
Trades </Typography>
</Typography> <div className={classes.dataGridContainer}>
</Paper> <div style={{ flexGrow: 1 }}>
<DataGrid <DataGrid
rows={trades} rows={trades}
columns={columns} columns={columns}
pageSize={50} showToolbar={true}
autoHeight={true}/> autoPageSize={true}
</Box> />
</div>
</div>
</Paper>
</DashboardLayout> </DashboardLayout>
); );
} }