style table and dialog

2024-06-28 12:31:48 +02:00 · 2024-06-28 12:31:48 +02:00 · 16e2300019
parent 97a537f5a2
commit 16e2300019
10 changed files with 180 additions and 101 deletions
--- a/prisma/dev.db
+++ b/prisma/dev.db
--- a/src/app/publication/columns.tsx
+++ b/src/app/publication/columns.tsx
@ -49,13 +49,15 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
        .map(e => <Badge>{e.name}</Badge>)
      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 => <p className="w-full text-center">{props.getValue()}</p>
  },


--- a/src/app/story/columns.tsx
+++ b/src/app/story/columns.tsx
@ -38,13 +38,16 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
        </Button>
      )
    },
-    enableColumnFilter: false
+    enableColumnFilter: false,
+    cell: props => <p className="w-full text-center">{props.getValue()}</p>
+
  },
  columnHelper.accessor("genres", {
    cell: props => {
      const genres = props.getValue()
      return <GenreBadges genres={genres} />
    },
+    header: "Genres",
    filterFn: "arrIncludes"
    //TODO - write custom filter function, to account for an array of objects
  }),
--- a/src/app/submission/columns.tsx
+++ b/src/app/submission/columns.tsx
@ -18,14 +18,14 @@ export const columns: ColumnDef<SubComplete>[] = [
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
-          Date Submitted
+          Submitted
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
-    cell: props => { return props.getValue().toLocaleDateString() }
+    cell: props => { return <p className="w-full text-center">{props.getValue().toLocaleDateString()}</p> }
  },
  {
    accessorFn: row => row.responded ? new Date(row.responded) : null,
@ -36,14 +36,14 @@ export const columns: ColumnDef<SubComplete>[] = [
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
-          Date Responded
+          Responded
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
-    cell: props => props.getValue() ? props.getValue().toLocaleDateString() : '-'
+    cell: props => <p className="w-full text-center">{props.getValue() ? props.getValue().toLocaleDateString() : '-'}</p>
  },
  {
    accessorFn: row => {
--- a/src/app/submission/create.tsx
+++ b/src/app/submission/create.tsx
@ -17,10 +17,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com
      <DialogTrigger asChild>
        <Button>Create new submission</Button>
      </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-w-fit">
        <DialogHeader>
          <DialogTitle>New submission</DialogTitle>
-          <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
+          <DialogDescription>Create an entry for a new submission.</DialogDescription>
        </DialogHeader>
        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
        <DialogFooter>
--- 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;
 }
--- 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<z.infer<typeof FormSchema>>({
 		resolver: zodResolver(FormSchema),
 		defaultValues: {
@ -123,7 +129,8 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })

 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className={className + " " + "space-y-8"}
+			>
 				<FormField
 					control={form.control}
 					name="storyId"
@ -171,95 +178,97 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					)}
 				/>

-				<FormField
-					control={form.control}
-					name="submitted"
-					render={({ field }) => (
-						<FormItem className="flex flex-col">
-							<FormLabel>Date of submission</FormLabel>
-							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
-								<PopoverTrigger asChild>
-									<FormControl>
-										<Button
-											variant={"outline"}
-											className={cn(
-												"w-[240px] pl-3 text-left font-normal",
-												!field.value && "text-muted-foreground"
-											)}
-										>
-											{field.value ? (
-												format(field.value, "PPP")
-											) : (
-												<span>Pick a date</span>
-											)}
-											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-										</Button>
-									</FormControl>
-								</PopoverTrigger>
-								<PopoverContent className="w-auto p-0" align="start">
-									<Calendar
-										mode="single"
-										selected={field.value}
-										onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
-										disabled={(date) =>
-											date > new Date() || date < new Date("1900-01-01")
-										}
-										initialFocus
-									/>
-								</PopoverContent>
-							</Popover>
-							<FormDescription>
-								The date you sent it
-							</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
+				<div className="flex flex-row gap-6">
+					<FormField
+						control={form.control}
+						name="submitted"
+						render={({ field }) => (
+							<FormItem className="inline-flex flex-col">
+								<FormLabel>Date of submission</FormLabel>
+								<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
+									<PopoverTrigger asChild>
+										<FormControl>
+											<Button
+												variant={"outline"}
+												className={cn(
+													"w-[240px] pl-3 text-left font-normal",
+													!field.value && "text-muted-foreground"
+												)}
+											>
+												{field.value ? (
+													format(field.value, "PPP")
+												) : (
+													<span>Pick a date</span>
+												)}
+												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+											</Button>
+										</FormControl>
+									</PopoverTrigger>
+									<PopoverContent className="w-auto p-0" align="start">
+										<Calendar
+											mode="single"
+											selected={field.value}
+											onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
+											disabled={(date) =>
+												date > new Date() || date < new Date("1900-01-01")
+											}
+											initialFocus
+										/>
+									</PopoverContent>
+								</Popover>
+								<FormDescription>
+									The date you sent it
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>

-				<FormField
-					control={form.control}
-					name="responded"
-					render={({ field }) => (
-						<FormItem className="flex flex-col">
-							<FormLabel>Date of response</FormLabel>
-							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
-								<PopoverTrigger asChild>
-									<FormControl>
-										<Button
-											variant={"outline"}
-											className={cn(
-												"w-[240px] pl-3 text-left font-normal",
-												!field.value && "text-muted-foreground"
-											)}
-										>
-											{field.value ? (
-												format(field.value, "PPP")
-											) : (
-												<span>Pick a date</span>
-											)}
-											<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-										</Button>
-									</FormControl>
-								</PopoverTrigger>
-								<PopoverContent className="w-auto p-0" align="start">
-									<Calendar
-										mode="single"
-										selected={field.value}
-										onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
-										disabled={(date) =>
-											date > new Date() || date < new Date("1900-01-01")
-										}
-										initialFocus
-									/>
-								</PopoverContent>
-							</Popover>
-							<FormDescription>
-								The date they wrote back
-							</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
+					<FormField
+						control={form.control}
+						name="responded"
+						render={({ field }) => (
+							<FormItem className="inline-flex flex-col">
+								<FormLabel>Date of response</FormLabel>
+								<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
+									<PopoverTrigger asChild>
+										<FormControl>
+											<Button
+												variant={"outline"}
+												className={cn(
+													"w-[240px] pl-3 text-left font-normal",
+													!field.value && "text-muted-foreground"
+												)}
+											>
+												{field.value ? (
+													format(field.value, "PPP")
+												) : (
+													<span>Pick a date</span>
+												)}
+												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+											</Button>
+										</FormControl>
+									</PopoverTrigger>
+									<PopoverContent className="w-auto p-0" align="start">
+										<Calendar
+											mode="single"
+											selected={field.value}
+											onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
+											disabled={(date) =>
+												date > new Date() || date < new Date("1900-01-01")
+											}
+											initialFocus
+										/>
+									</PopoverContent>
+								</Popover>
+								<FormDescription>
+									The date they wrote back
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				</div>


 				<FormField
--- a/src/app/ui/genreBadges.tsx
+++ b/src/app/ui/genreBadges.tsx
@ -4,7 +4,7 @@ import { Badge } from "@/components/ui/badge";

 export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
  return (
-    <div className={props.className}>
+    <div className={props.className + " max-w-52 flex flex-wrap gap-x-1 gap-y-1"}>
      {props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))}
    </div>
  )
--- a/src/app/ui/tables/data-table.tsx
+++ b/src/app/ui/tables/data-table.tsx
@ -182,7 +182,7 @@ export function DataTable<TData, TValue>({
    </div>
    <div className="rounded-md border">

-      <Table>
+      <Table className="text-clamp">
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
--- 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))",