Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-13 08:12:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

make pages table responsive

Browse Source
This commit is contained in:
Philipinho
2024-07-04 21:13:43 +01:00
parent a4ec2dac6c
commit cc93abfb7e
1 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
apps/client/src/components/common/recent-changes.tsx
View File

@ -1,4 +1,11 @@
import { Text, Group, UnstyledButton, Badge, Table } from "@mantine/core"; import {
Text,
Group,
UnstyledButton,
Badge,
Table,
ScrollArea,
} from "@mantine/core";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx"; import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
import { buildPageUrl } from "@/features/page/page.utils.ts"; import { buildPageUrl } from "@/features/page/page.utils.ts";
@ -22,46 +29,48 @@ export default function RecentChanges({ spaceId }: Props) {
} }
return pages && pages.items.length > 0 ? ( return pages && pages.items.length > 0 ? (
<Table highlightOnHover verticalSpacing="sm"> <ScrollArea>
<Table.Tbody> <Table highlightOnHover verticalSpacing="sm">
{pages.items.map((page) => ( <Table.Tbody>
<Table.Tr key={page.id}> {pages.items.map((page) => (
<Table.Td> <Table.Tr key={page.id}>
<UnstyledButton
component={Link}
to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
>
<Group wrap="nowrap">
{page.icon || <IconFileDescription size={18} />}
<Text fw={500} size="md" lineClamp={1}>
{page.title || "Untitled"}
</Text>
</Group>
</UnstyledButton>
</Table.Td>
{!spaceId && (
<Table.Td> <Table.Td>
<Badge <UnstyledButton
color="blue"
variant="light"
component={Link} component={Link}
to={getSpaceUrl(page?.space.slug)} to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
style={{ cursor: "pointer" }}
> >
{page?.space.name} <Group wrap="nowrap">
</Badge> {page.icon || <IconFileDescription size={18} />}
<Text fw={500} size="md" lineClamp={1}>
{page.title || "Untitled"}
</Text>
</Group>
</UnstyledButton>
</Table.Td> </Table.Td>
)} {!spaceId && (
<Table.Td> <Table.Td>
<Text c="dimmed" size="xs" fw={500}> <Badge
{formattedDate(page.updatedAt)} color="blue"
</Text> variant="light"
</Table.Td> component={Link}
</Table.Tr> to={getSpaceUrl(page?.space.slug)}
))} style={{ cursor: "pointer" }}
</Table.Tbody> >
</Table> {page?.space.name}
</Badge>
</Table.Td>
)}
<Table.Td>
<Text c="dimmed" size="xs" fw={500}>
{formattedDate(page.updatedAt)}
</Text>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</ScrollArea>
) : ( ) : (
<Text size="md" ta="center"> <Text size="md" ta="center">
No pages yet No pages yet