Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-12 15:52: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 PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
import { buildPageUrl } from "@/features/page/page.utils.ts";
@ -22,46 +29,48 @@ export default function RecentChanges({ spaceId }: Props) {
}
return pages && pages.items.length > 0 ? (
<Table highlightOnHover verticalSpacing="sm">
<Table.Tbody>
{pages.items.map((page) => (
<Table.Tr key={page.id}>
<Table.Td>
<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 && (
<ScrollArea>
<Table highlightOnHover verticalSpacing="sm">
<Table.Tbody>
{pages.items.map((page) => (
<Table.Tr key={page.id}>
<Table.Td>
<Badge
color="blue"
variant="light"
<UnstyledButton
component={Link}
to={getSpaceUrl(page?.space.slug)}
style={{ cursor: "pointer" }}
to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
>
{page?.space.name}
</Badge>
<Group wrap="nowrap">
{page.icon || <IconFileDescription size={18} />}
<Text fw={500} size="md" lineClamp={1}>
{page.title || "Untitled"}
</Text>
</Group>
</UnstyledButton>
</Table.Td>
)}
<Table.Td>
<Text c="dimmed" size="xs" fw={500}>
{formattedDate(page.updatedAt)}
</Text>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
{!spaceId && (
<Table.Td>
<Badge
color="blue"
variant="light"
component={Link}
to={getSpaceUrl(page?.space.slug)}
style={{ cursor: "pointer" }}
>
{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">
No pages yet