Layout fixes for DataTable.

This commit is contained in:
Mike Cao 2023-10-11 10:02:32 -07:00
parent 83fb358355
commit a79183cd13
3 changed files with 41 additions and 33 deletions

View File

@ -16,7 +16,11 @@
min-height: 50vh; min-height: 50vh;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 992px) {
.layout {
grid-template-columns: 1fr;
}
.menu { .menu {
display: none; display: none;
} }

View File

@ -28,39 +28,41 @@ export function WebsitesTable({
{row => row.user.username} {row => row.user.username}
</GridColumn> </GridColumn>
)} )}
<GridColumn name="action" label=" " alignment="end"> {showActions && (
{row => { <GridColumn name="action" label=" " alignment="end">
const { {row => {
id, const {
user: { id: ownerId }, id,
} = row; user: { id: ownerId },
} = row;
return ( return (
<> <>
{showActions && allowEdit && (!showTeam || ownerId === user.id) && ( {allowEdit && (!showTeam || ownerId === user.id) && (
<Link href={`/settings/websites/${id}`}> <Link href={`/settings/websites/${id}`}>
<Button> <Button>
<Icon> <Icon>
<Icons.Edit /> <Icons.Edit />
</Icon> </Icon>
<Text>{formatMessage(labels.edit)}</Text> <Text>{formatMessage(labels.edit)}</Text>
</Button> </Button>
</Link> </Link>
)} )}
{showActions && allowView && ( {allowView && (
<Link href={`/websites/${id}`}> <Link href={`/websites/${id}`}>
<Button> <Button>
<Icon> <Icon>
<Icons.External /> <Icons.External />
</Icon> </Icon>
<Text>{formatMessage(labels.view)}</Text> <Text>{formatMessage(labels.view)}</Text>
</Button> </Button>
</Link> </Link>
)} )}
</> </>
); );
}} }}
</GridColumn> </GridColumn>
)}
{children} {children}
</GridTable> </GridTable>
); );

View File

@ -20,6 +20,7 @@
.body { .body {
display: flex; display: flex;
position: relative; position: relative;
overflow-x: auto;
} }
.body td { .body td {
@ -27,6 +28,7 @@
gap: 10px; gap: 10px;
min-height: 70px; min-height: 70px;
align-items: center; align-items: center;
min-width: min-content;
} }
.pager { .pager {