make subs page responsive

package-lock.json

@@ -28,6 +28,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "jose": "^5.8.0",
+        "lucide": "^0.445.0",
         "lucide-react": "^0.394.0",
         "next": "^14.2.13",
         "next-themes": "^0.3.0",
@@ -6415,6 +6416,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lucide": {
+      "version": "0.445.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.445.0.tgz",
+      "integrity": "sha512-Xkaf7xwXnx2DQj6dHAAnEsL8LI0iSeqh1ObVr6CTw9eYLpRchfXHzB+VL6qypqAy18jZmCY1bu4U652dCTHC3Q=="
+    },
     "node_modules/lucide-react": {
       "version": "0.394.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.394.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "jose": "^5.8.0",
+    "lucide": "^0.445.0",
     "lucide-react": "^0.394.0",
     "next": "^14.2.13",
     "next-themes": "^0.3.0",

src/app/layout.tsx

@@ -33,7 +33,7 @@ export default function RootLayout({
         >
           <div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
             <div className="w-full md:w-5/6 flex flex-col md:flex-row">
-              <div id="sidebar" className=" flex flex-row md:flex-col justify-between"> <header className="">
+              <div id="sidebar" className=" flex flex-row md:flex-col w-full justify-between"> <header className="">
                 <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden md:block">SubMan</h1>
                 <p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
               </header>

src/app/submission/columns.tsx

@@ -1,10 +1,11 @@
 "use client"
 import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { ArrowUpDown } from "lucide-react"
+import { ArrowUpDown, BookText, CalendarMinus, CalendarPlus, MessageCircleReply, NotepadText } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { selectCol } from "app/ui/tables/selectColumn"
 import TitleContainer from "app/ui/titleContainer"
+import { CalendarArrowUp } from "lucide"
 
 
 
@@ -18,7 +19,12 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "story",
-    header: "Story",
+    header: () => (
+      <>
+        <span className="hidden md:block">Story</span>
+        <NotepadText className="block md:hidden" />
+      </>
+    ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
@@ -29,7 +35,12 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "pub",
-    header: "Publication",
+    header: () => (
+      <>
+        <span className="hidden md:block">Publication</span>
+        <BookText className="block md:hidden" />
+      </>
+    ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
@@ -39,16 +50,24 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
+          className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Submitted
+          <span className="hidden md:block"> Date Submitted </span>
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <CalendarPlus className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue().toLocaleDateString()}</p>)
+    cell: (props: CellContext<any, any>) => (
+      <p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
+        day: 'numeric',
+        month: 'numeric',
+        year: '2-digit'
+      })}</p>
+    )
   },
   {
     accessorFn: row => row.responded ? new Date(row.responded) : null,
@@ -57,16 +76,22 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
+          className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Responded
+          <span className="hidden md:block"> Date Responded </span>
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <CalendarMinus className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()?.toLocaleDateString()}</p>)
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
+      day: 'numeric',
+      month: 'numeric',
+      year: '2-digit'
+    })}</p>)
   },
   {
     accessorFn: row => {
@@ -76,8 +101,20 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "response",
-    header: "Response",
+    header: ({ column }) => {
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()}</p>)
+      return (
+        <Button
+          variant="ghost"
+          className="p-0"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          <span className="hidden md:block"> Response </span>
+          <MessageCircleReply className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+        </Button>
+      )
+    },
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
   },
 
 ]

src/app/submission/create.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { ComponentProps } from "react";
 import { Pub, Response, Story } from "@prisma/client";
 import SubmissionForm from "app/ui/forms/sub";
+import { Plus } from "lucide-react";
 
 
 type CreateSubDefaults = {
@@ -22,7 +23,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses, defau
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button>Create new submission</Button>
+        <Button>
+          <span className="hidden md:block">Create new submission</span>
+          <Plus className="block md:hidden" />
+        </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

src/app/submission/page.tsx

@@ -18,7 +18,7 @@ export default async function Page() {
   const genres = await getGenres()
 
   return (
-    <div className="container">
+    <div className="container px-1 md:px-4 mx-auto">
       <DataTable data={subs} columns={columns} tableName="sub"
         stories={stories}
         pubs={pubs}

src/app/tailwind.css

@@ -1097,6 +1097,10 @@ body {
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1210,6 +1214,10 @@ body {
   border-radius: calc(var(--radius) - 4px);
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-l-3xl {
   border-top-left-radius: 1.5rem;
   border-bottom-left-radius: 1.5rem;
@@ -1220,6 +1228,11 @@ body {
   border-top-right-radius: 1.5rem;
 }
 
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-tl-3xl {
   border-top-left-radius: 1.5rem;
 }
@@ -2397,6 +2410,11 @@ body {
     flex-direction: column;
   }
 
+  .md\:rounded-l-3xl {
+    border-top-left-radius: 1.5rem;
+    border-bottom-left-radius: 1.5rem;
+  }
+
   .md\:p-4 {
     padding: 1rem;
   }

src/app/ui/navLinks.tsx

@@ -24,7 +24,7 @@ export default function Navlinks(props: ComponentProps<"div">) {
       <div className="text-secondary-foreground flex flex-row md:flex-col" >
         {
           links.map(e => (<NavLink key={e.link} href={e.link}
-            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-l-3xl ",
+            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full p-2 pl-6 antialiased text-secondary-foreground bg-secondary rounded-3xl md:rounded-l-3xl ",
               {
                 "text-primary-foreground bg-primary": pathname.includes(e.link)
               }

src/app/ui/titleContainer.tsx

@@ -1,9 +1,9 @@
 import { ComponentProps } from "react";
 
 export default function TitleContainer({ children }: ComponentProps<"div">) {
-  let classes = "w-full text-left m-auto"
+  let classes = "w-full text-left m-auto h-fit flex align-center text-xs md:text-sm"
   if (children == "RECORD DELETED") {
     classes = classes + " text-destructive font-bold"
   }
-  return <span className="h-10 flex align-center"><p className={classes}>{children}</p></span>
+  return <p className={classes}>{children}</p>
 }