Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make subs page responsive

This commit is contained in:
andrzej 2024-09-24 13:32:26 +02:00
parent def21a236c
commit bc675cd258
9 changed files with 83 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

2
src/app/layout.tsx
View File

@ -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>

59
src/app/submission/columns.tsx
View File

@ -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>)
},
]

6
src/app/submission/create.tsx
View File

@ -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>

2
src/app/submission/page.tsx
View File

@ -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}

18
src/app/tailwind.css
View File

@ -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;
}

2
src/app/ui/navLinks.tsx
View File

@ -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)
}

4
src/app/ui/titleContainer.tsx
View File

@ -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>
}