From 3998180830b04e27713303083249b380a07c3565 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Tue, 24 Sep 2024 13:32:26 +0200
Subject: [PATCH] make subs page responsive

---
 package-lock.json              |  6 ++++
 package.json                   |  1 +
 src/app/layout.tsx             |  2 +-
 src/app/submission/columns.tsx | 59 +++++++++++++++++++++++++++-------
 src/app/submission/create.tsx  |  6 +++-
 src/app/submission/page.tsx    |  2 +-
 src/app/tailwind.css           | 18 +++++++++++
 src/app/ui/navLinks.tsx        |  2 +-
 src/app/ui/titleContainer.tsx  |  4 +--
 9 files changed, 83 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 21fbc4c..95983ef 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index fc966ac..644d84d 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1acf1e1..fed526e 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/app/submission/columns.tsx b/src/app/submission/columns.tsx
index c80c6d8..8143d42 100644
--- a/src/app/submission/columns.tsx
+++ b/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
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <span className="hidden md:block"> Date Submitted </span>
+          <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
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <span className="hidden md:block"> Date Responded </span>
+          <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",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()}</p>)
+    header: ({ column }) => {
+      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>)
   },
 
 ]
diff --git a/src/app/submission/create.tsx b/src/app/submission/create.tsx
index 38b5816..59bfa95 100644
--- a/src/app/submission/create.tsx
+++ b/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>
diff --git a/src/app/submission/page.tsx b/src/app/submission/page.tsx
index 2622dec..43ad6ee 100644
--- a/src/app/submission/page.tsx
+++ b/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}
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 1bc491b..d2566ce 100644
--- a/src/app/tailwind.css
+++ b/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;
   }
diff --git a/src/app/ui/navLinks.tsx b/src/app/ui/navLinks.tsx
index 2cf7cf9..3bbf7a3 100644
--- a/src/app/ui/navLinks.tsx
+++ b/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)
               }
diff --git a/src/app/ui/titleContainer.tsx b/src/app/ui/titleContainer.tsx
index d5e51b9..34b51f5 100644
--- a/src/app/ui/titleContainer.tsx
+++ b/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>
 }