improve spacing and column layout on mobile

This commit is contained in:
Milo Schwartz
2024-12-29 22:07:12 -05:00
parent 152a62a27b
commit 32ffb33d98
20 changed files with 400 additions and 346 deletions

View File

@@ -63,7 +63,7 @@ import { Checkbox } from "@app/components/ui/checkbox";
import { GenerateAccessTokenResponse } from "@server/routers/accessToken";
import { constructShareLink } from "@app/lib/shareLinks";
import { ShareLinkRow } from "./ShareLinksTable";
import { QRCodeSVG } from "qrcode.react";
import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
type FormProps = {
open: boolean;
@@ -449,23 +449,23 @@ export default function CreateShareLinkForm({
{link && (
<div className="max-w-md space-y-4">
<p>
You will only be able to see this link once.
Make sure to copy it.
You will only be able to see this link
once. Make sure to copy it.
</p>
<p>
Anyone with this link can access the
resource. Share it with care.
</p>
<div className="w-64 h-64 mx-auto flex items-center justify-center">
<QRCodeSVG
value={link}
size={256}
/>
<div className="h-[250px] w-full mx-auto flex items-center justify-center">
<QRCodeCanvas value={link} size={200} />
</div>
<div className="mx-auto">
<CopyTextBox text={link} wrapText={false} />
<CopyTextBox
text={link}
wrapText={false}
/>
</div>
</div>
)}
@@ -473,8 +473,8 @@ export default function CreateShareLinkForm({
</CredenzaBody>
<CredenzaFooter>
<Button
type="submit"
form="share-link-form"
type="button"
onClick={form.handleSubmit(onSubmit)}
loading={loading}
disabled={link !== null || loading}
>

View File

@@ -86,6 +86,48 @@ export default function ShareLinksTable({
}
const columns: ColumnDef<ShareLinkRow>[] = [
{
id: "actions",
cell: ({ row }) => {
const router = useRouter();
const resourceRow = row.original;
return (
<>
<div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="h-8 w-8 p-0"
>
<span className="sr-only">
Open menu
</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<button
onClick={() =>
deleteSharelink(
resourceRow.accessTokenId
)
}
className="text-red-500"
>
Delete
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</>
);
}
},
{
accessorKey: "resourceName",
header: ({ column }) => {
@@ -236,48 +278,6 @@ export default function ShareLinksTable({
}
return "Never";
}
},
{
id: "actions",
cell: ({ row }) => {
const router = useRouter();
const resourceRow = row.original;
return (
<>
<div className="flex items-center justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="h-8 w-8 p-0"
>
<span className="sr-only">
Open menu
</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<button
onClick={() =>
deleteSharelink(
resourceRow.accessTokenId
)
}
className="text-red-500"
>
Delete
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</>
);
}
}
];