From 16e2300019b945da7d5690b99686a726fbf3f105 Mon Sep 17 00:00:00 2001 From: andrzej Date: Fri, 28 Jun 2024 12:31:48 +0200 Subject: [PATCH] style table and dialog --- prisma/dev.db | Bin 69632 -> 69632 bytes src/app/publication/columns.tsx | 4 +- src/app/story/columns.tsx | 5 +- src/app/submission/columns.tsx | 8 +- src/app/submission/create.tsx | 4 +- src/app/tailwind.css | 62 ++++++++++ src/app/ui/forms/sub.tsx | 191 ++++++++++++++++--------------- src/app/ui/genreBadges.tsx | 2 +- src/app/ui/tables/data-table.tsx | 2 +- tailwind.config.js | 3 + 10 files changed, 180 insertions(+), 101 deletions(-) diff --git a/prisma/dev.db b/prisma/dev.db index 4dcac1831a483bfc423097af8050bd9c1fb41b86..bc738fbfcfea4a9ed31b7ddd82126e16f24e101f 100644 GIT binary patch delta 113 zcmZozz|ydQWr8&0wTUv$jMp|MWcV{mZ9eI5y@7{?{TL(vX8tsONxm~%1sHd+GqP?! z&CbZkF6J%8!NADa$jiVe!ycZRqTp4Ur(kF~J&=#lT+CY%CMU~`CO18epK%rd95Woe delta 92 zcmZozz|ydQWr8&0m5DOWj8`@$WcV{mY(D94y@7{`{TL(vX8tq~+$zAhi=A=)_S5W) ujO^3%*%`SwgG=)iynxtX`a?cOb2bidFEI{=>2>Uk9!v}j)6@7FX8{0J?;2bH diff --git a/src/app/publication/columns.tsx b/src/app/publication/columns.tsx index 5a37f33..1c95e68 100644 --- a/src/app/publication/columns.tsx +++ b/src/app/publication/columns.tsx @@ -49,13 +49,15 @@ export const columns: ColumnDef[] = [ .map(e => {e.name}) return genres }, + header: "Genres", filterFn: "arrIncludes" //TODO - write custom filter function, to account for an array of objects }), { accessorKey: "query_after_days", - header: "Query After (days)" + header: "Query After (days)", + cell: props =>

{props.getValue()}

}, diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx index 90a9d6d..9f41896 100644 --- a/src/app/story/columns.tsx +++ b/src/app/story/columns.tsx @@ -38,13 +38,16 @@ export const columns: ColumnDef[] = [ ) }, - enableColumnFilter: false + enableColumnFilter: false, + cell: props =>

{props.getValue()}

+ }, columnHelper.accessor("genres", { cell: props => { const genres = props.getValue() return }, + header: "Genres", filterFn: "arrIncludes" //TODO - write custom filter function, to account for an array of objects }), diff --git a/src/app/submission/columns.tsx b/src/app/submission/columns.tsx index c8cd503..f44cbe4 100644 --- a/src/app/submission/columns.tsx +++ b/src/app/submission/columns.tsx @@ -18,14 +18,14 @@ export const columns: ColumnDef[] = [ variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} > - Date Submitted + Submitted ) }, enableColumnFilter: false, sortingFn: "datetime", - cell: props => { return props.getValue().toLocaleDateString() } + cell: props => { return

{props.getValue().toLocaleDateString()}

} }, { accessorFn: row => row.responded ? new Date(row.responded) : null, @@ -36,14 +36,14 @@ export const columns: ColumnDef[] = [ variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} > - Date Responded + Responded ) }, enableColumnFilter: false, sortingFn: "datetime", - cell: props => props.getValue() ? props.getValue().toLocaleDateString() : '-' + cell: props =>

{props.getValue() ? props.getValue().toLocaleDateString() : '-'}

}, { accessorFn: row => { diff --git a/src/app/submission/create.tsx b/src/app/submission/create.tsx index ffe1731..4dc5b31 100644 --- a/src/app/submission/create.tsx +++ b/src/app/submission/create.tsx @@ -17,10 +17,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com - + New submission - Create an entry for a new story i.e. a thing you intend to submit for publication. + Create an entry for a new submission. diff --git a/src/app/tailwind.css b/src/app/tailwind.css index c0fc71c..a8513fd 100644 --- a/src/app/tailwind.css +++ b/src/app/tailwind.css @@ -984,6 +984,23 @@ body { max-width: 24rem; } +.max-w-fit { + max-width: -moz-fit-content; + max-width: fit-content; +} + +.max-w-24 { + max-width: 6rem; +} + +.max-w-96 { + max-width: 24rem; +} + +.max-w-52 { + max-width: 13rem; +} + .shrink-0 { flex-shrink: 0; } @@ -1108,6 +1125,10 @@ body { gap: 1rem; } +.gap-6 { + gap: 1.5rem; +} + .gap-x-16 { -moz-column-gap: 4rem; column-gap: 4rem; @@ -1121,6 +1142,27 @@ body { row-gap: 2rem; } +.gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.gap-y-4 { + row-gap: 1rem; +} + +.gap-y-40 { + row-gap: 10rem; +} + +.gap-y-6 { + row-gap: 1.5rem; +} + +.gap-y-2 { + row-gap: 0.5rem; +} + .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); @@ -1181,6 +1223,18 @@ body { margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } +.space-y-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); +} + +.space-y-5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); +} + .justify-self-end { justify-self: end; } @@ -1458,6 +1512,10 @@ body { line-height: 1.5rem; } +.text-clamp { + font-size: clamp(0.75rem, 5vw, 1rem); +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -2390,6 +2448,10 @@ body { border-bottom-width: 0px; } +.\[\&_\*\]\:text-clamp * { + font-size: clamp(0.75rem, 5vw, 1rem); +} + .\[\&_tr\:last-child\]\:border-0 tr:last-child { border-width: 0px; } diff --git a/src/app/ui/forms/sub.tsx b/src/app/ui/forms/sub.tsx index e62e00a..9594830 100644 --- a/src/app/ui/forms/sub.tsx +++ b/src/app/ui/forms/sub.tsx @@ -31,7 +31,8 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select" -import { useState } from "react" +import { ComponentProps, useState } from "react" +import { Pub, Story } from "@prisma/client" const FormSchema = z.object({ storyId: z.coerce.number(), @@ -66,7 +67,12 @@ const FormSchema = z.object({ ) -export default function SubmissionForm({ stories, pubs, responses, createSub }) { +export default function SubmissionForm({ className, stories, pubs, responses, createSub }: ComponentProps<"form"> & { + stories: Story[], + pubs: Pub[], + responses: Response[], + createSub: (arg0: any) => void +}) { const form = useForm>({ resolver: zodResolver(FormSchema), defaultValues: { @@ -123,7 +129,8 @@ export default function SubmissionForm({ stories, pubs, responses, createSub }) return (
- + - ( - - Date of submission - - - - - - - - { field.onChange(e); setIsSubCalendarOpen(false); }} - disabled={(date) => - date > new Date() || date < new Date("1900-01-01") - } - initialFocus - /> - - - - The date you sent it - - - - )} - /> +
+ ( + + Date of submission + + + + + + + + { field.onChange(e); setIsSubCalendarOpen(false); }} + disabled={(date) => + date > new Date() || date < new Date("1900-01-01") + } + initialFocus + /> + + + + The date you sent it + + + + )} + /> - ( - - Date of response - - - - - - - - { field.onChange(e); setIsRespCalendarOpen(false); }} - disabled={(date) => - date > new Date() || date < new Date("1900-01-01") - } - initialFocus - /> - - - - The date they wrote back - - - - )} - /> + ( + + Date of response + + + + + + + + { field.onChange(e); setIsRespCalendarOpen(false); }} + disabled={(date) => + date > new Date() || date < new Date("1900-01-01") + } + initialFocus + /> + + + + The date they wrote back + + + + )} + /> +
& { genres: Array }) { return ( -
+
{props.genres.map((e: Genre) => ({e.name}))}
) diff --git a/src/app/ui/tables/data-table.tsx b/src/app/ui/tables/data-table.tsx index 72bda68..2100a92 100644 --- a/src/app/ui/tables/data-table.tsx +++ b/src/app/ui/tables/data-table.tsx @@ -182,7 +182,7 @@ export function DataTable({
- +
{table.getHeaderGroups().map((headerGroup) => ( diff --git a/tailwind.config.js b/tailwind.config.js index 69aec5a..2a9ca50 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -21,6 +21,9 @@ module.exports = { }, }, extend: { + fontSize: { + clamp: "clamp(0.75rem, 0.707vw + 0.397rem, 1rem)", + }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))",