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;
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 992px) {
.layout {
grid-template-columns: 1fr;
}
.menu {
display: none;
}

View File

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

View File

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