add responsiveness
This commit is contained in:
parent
f8bb05d8b9
commit
164097e821
|
|
@ -29,7 +29,7 @@
|
|||
"date-fns": "^3.6.0",
|
||||
"jose": "^5.8.0",
|
||||
"lucide-react": "^0.394.0",
|
||||
"next": "14.2.3",
|
||||
"next": "^14.2.13",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18",
|
||||
"react-day-picker": "^8.10.1",
|
||||
|
|
@ -226,17 +226,19 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
|
||||
"integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA=="
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz",
|
||||
"integrity": "sha512-s3lh6K8cbW1h5Nga7NNeXrbe0+2jIIYK9YaA9T7IufDWnZpozdFUp6Hf0d5rNWUKu4fEuSX2rCKlGjCrtylfDw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
|
||||
"integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.13.tgz",
|
||||
"integrity": "sha512-IkAmQEa2Htq+wHACBxOsslt+jMoV3msvxCn0WFSfJSkv/scy+i/EukBKNad36grRxywaXUYJc9mxEGkeIs8Bzg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
|
|
@ -246,12 +248,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-x64": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
|
||||
"integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.13.tgz",
|
||||
"integrity": "sha512-Dv1RBGs2TTjkwEnFMVL5XIfJEavnLqqwYSD6LXgTPdEy/u6FlSrLBSSfe1pcfqhFEXRAgVL3Wpjibe5wXJzWog==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
|
|
@ -261,12 +264,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
|
||||
"integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.13.tgz",
|
||||
"integrity": "sha512-yB1tYEFFqo4ZNWkwrJultbsw7NPAAxlPXURXioRl9SdW6aIefOLS+0TEsKrWBtbJ9moTDgU3HRILL6QBQnMevg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
|
|
@ -276,12 +280,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
|
||||
"integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.13.tgz",
|
||||
"integrity": "sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
|
|
@ -291,12 +296,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
|
||||
"integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.13.tgz",
|
||||
"integrity": "sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
|
|
@ -306,12 +312,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
|
||||
"integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.13.tgz",
|
||||
"integrity": "sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
|
|
@ -321,12 +328,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
|
||||
"integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.13.tgz",
|
||||
"integrity": "sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
|
|
@ -336,12 +344,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-ia32-msvc": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
|
||||
"integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.13.tgz",
|
||||
"integrity": "sha512-V26ezyjPqQpDBV4lcWIh8B/QICQ4v+M5Bo9ykLN+sqeKKBxJVDpEc6biDVyluTXTC40f5IqCU0ttth7Es2ZuMw==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
|
|
@ -351,12 +360,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-x64-msvc": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
|
||||
"integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.13.tgz",
|
||||
"integrity": "sha512-WwzOEAFBGhlDHE5Z73mNU8CO8mqMNLqaG+AO9ETmzdCQlJhVtWZnOl2+rqgVQS+YHunjOWptdFmNfbpwcUuEsw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
|
|
@ -6557,11 +6567,12 @@
|
|||
"peer": true
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "14.2.3",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
|
||||
"integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
|
||||
"version": "14.2.13",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-14.2.13.tgz",
|
||||
"integrity": "sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@next/env": "14.2.3",
|
||||
"@next/env": "14.2.13",
|
||||
"@swc/helpers": "0.5.5",
|
||||
"busboy": "1.6.0",
|
||||
"caniuse-lite": "^1.0.30001579",
|
||||
|
|
@ -6576,15 +6587,15 @@
|
|||
"node": ">=18.17.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@next/swc-darwin-arm64": "14.2.3",
|
||||
"@next/swc-darwin-x64": "14.2.3",
|
||||
"@next/swc-linux-arm64-gnu": "14.2.3",
|
||||
"@next/swc-linux-arm64-musl": "14.2.3",
|
||||
"@next/swc-linux-x64-gnu": "14.2.3",
|
||||
"@next/swc-linux-x64-musl": "14.2.3",
|
||||
"@next/swc-win32-arm64-msvc": "14.2.3",
|
||||
"@next/swc-win32-ia32-msvc": "14.2.3",
|
||||
"@next/swc-win32-x64-msvc": "14.2.3"
|
||||
"@next/swc-darwin-arm64": "14.2.13",
|
||||
"@next/swc-darwin-x64": "14.2.13",
|
||||
"@next/swc-linux-arm64-gnu": "14.2.13",
|
||||
"@next/swc-linux-arm64-musl": "14.2.13",
|
||||
"@next/swc-linux-x64-gnu": "14.2.13",
|
||||
"@next/swc-linux-x64-musl": "14.2.13",
|
||||
"@next/swc-win32-arm64-msvc": "14.2.13",
|
||||
"@next/swc-win32-ia32-msvc": "14.2.13",
|
||||
"@next/swc-win32-x64-msvc": "14.2.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@opentelemetry/api": "^1.1.0",
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"date-fns": "^3.6.0",
|
||||
"jose": "^5.8.0",
|
||||
"lucide-react": "^0.394.0",
|
||||
"next": "14.2.3",
|
||||
"next": "^14.2.13",
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18",
|
||||
"react-day-picker": "^8.10.1",
|
||||
|
|
|
|||
BIN
prisma/dev.db
BIN
prisma/dev.db
Binary file not shown.
|
|
@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
|
|||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
"h-12 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
className={cn("p-2 md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@ export async function login(userLogin: LoginSchema) {
|
|||
if (!passwordIsValid) throw new Error("password is not valid")
|
||||
return { email: userLogin.email }
|
||||
} catch (error) {
|
||||
console.error("WHOOPS", error)
|
||||
throw new Error('login failed')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@ import "./globals.css";
|
|||
import Navlinks from "./ui/navLinks";
|
||||
import { ModeToggle } from "./ui/modeToggle";
|
||||
import { inter } from "./ui/fonts";
|
||||
import { LogOutIcon } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import LogoutButton from "./ui/logoutButton";
|
||||
|
||||
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Subman",
|
||||
description: "A self-hosted literary submission tracker."
|
||||
|
|
@ -32,14 +31,14 @@ export default function RootLayout({
|
|||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
|
||||
<div className="w-5/6 flex">
|
||||
<div id="sidebar" className="h-5/6 flex flex-col"> <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">SubMan</h1>
|
||||
<p className="mt-2 mx-1 text-sm antialiased w-40">The self-hosted literary submission tracker.</p>
|
||||
<div id="layout-container" className="md:p-4 w-screen h-screen md:mt-6 flex justify-center">
|
||||
<div className="w-11/12 md:w-5/6 flex flex-col md:flex-row">
|
||||
<div id="sidebar" className="h-5/6 flex justify-evenly content-center flex-row md:flex-col"> <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>
|
||||
<Navlinks className="mt-6" />
|
||||
<footer className="mt-auto flex justify-center"><ModeToggle /><LogoutButton />
|
||||
<Navlinks className="md:mt-6" />
|
||||
<footer className="my-auto md:mt-auto flex justify-center"><ModeToggle /><LogoutButton />
|
||||
</footer>
|
||||
</div>
|
||||
<div className="flex justify-center w-full">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client"
|
||||
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
|
||||
import { StoryWithGenres } from "./page"
|
||||
import { ArrowUpDown } from "lucide-react"
|
||||
import { ArrowUpDown, BookType, Drama, Tally5 } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import GenreBadges from "app/ui/genreBadges"
|
||||
import { selectCol } from "app/ui/tables/selectColumn"
|
||||
|
|
@ -19,9 +19,13 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
|
|||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="px-1"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="hidden sm:block">
|
||||
Title
|
||||
</span>
|
||||
<span className="display-block sm:hidden"><BookType /></span>
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
|
|
@ -36,9 +40,15 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
|
|||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="px-1"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
<span className="hidden sm:block">
|
||||
Word Count
|
||||
</span>
|
||||
<span className="sm:hidden">
|
||||
<Tally5 />
|
||||
</span>
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
|
|
@ -51,6 +61,12 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
|
|||
}
|
||||
},
|
||||
columnHelper.accessor("genres", {
|
||||
header: () => (
|
||||
<div className="w-fit mx-auto">
|
||||
<span className="hidden sm:block">Genres</span>
|
||||
<span className="sm:hidden"><Drama /></span>
|
||||
</div>
|
||||
),
|
||||
cell: GenrePickerInputCell,
|
||||
filterFn: "arrIncludes",
|
||||
meta: {}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
|
|||
import { ComponentProps } from "react";
|
||||
import { Genre } from "@prisma/client";
|
||||
import StoryForm from "app/ui/forms/story";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
|
||||
export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
|
||||
|
|
@ -12,7 +13,10 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
|
|||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Create new story</Button>
|
||||
<div>
|
||||
<Button className="hidden md:display-block">Create new story</Button>
|
||||
<Button className="display-block md:hidden"><Plus /> </Button>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default async function Page() {
|
|||
|
||||
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<div className="container px-1 mx-auto">
|
||||
<DataTable columns={columns} data={storiesWithGenres} tableName="story"
|
||||
genres={genres}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -642,6 +642,10 @@ body {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
|
@ -706,6 +710,10 @@ body {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -740,6 +748,16 @@ body {
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.mx-9 {
|
||||
margin-left: 2.25rem;
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
|
@ -768,6 +786,26 @@ body {
|
|||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-9 {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
.mr-6 {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -788,6 +826,10 @@ body {
|
|||
display: grid;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.size-full {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -955,6 +997,10 @@ body {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-11\/12 {
|
||||
width: 91.666667%;
|
||||
}
|
||||
|
||||
.min-w-\[8rem\] {
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
|
@ -1068,6 +1114,10 @@ body {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
|
@ -1092,6 +1142,10 @@ body {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
|
@ -1177,6 +1231,18 @@ body {
|
|||
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-x-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0px * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-x-9 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2.25rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2.25rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
|
@ -1308,6 +1374,11 @@ body {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
|
@ -1395,6 +1466,11 @@ body {
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
|
@ -1423,6 +1499,10 @@ body {
|
|||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.pr-1 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1474,6 +1554,16 @@ body {
|
|||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.text-9xl {
|
||||
font-size: 8rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.font-black {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
|
@ -2299,6 +2389,18 @@ body {
|
|||
top: auto;
|
||||
}
|
||||
|
||||
.sm\:mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sm\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -2343,9 +2445,72 @@ body {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.md\:mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.md\:mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.md\:mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.md\:mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:w-5\/6 {
|
||||
width: 83.333333%;
|
||||
}
|
||||
|
||||
.md\:w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.md\:max-w-\[420px\] {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.md\:gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.md\:py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.md\:px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/badge";
|
|||
export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
|
||||
return (
|
||||
<div className={"flex flex-wrap gap-1 justify-center " + props.className}>
|
||||
{props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))}
|
||||
{props.genres.map((e: Genre) => (<Badge className="" key={e.name}>{e.name}</Badge>))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { usePathname } from "next/navigation";
|
|||
import { ComponentProps } from "react";
|
||||
import clsx from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { ArrowUpNarrowWide, BookOpen, BookOpenText } from "lucide-react";
|
||||
|
||||
|
||||
function NavLink(props: ComponentProps<"div"> & { href: string }) {
|
||||
|
|
@ -14,21 +15,24 @@ function NavLink(props: ComponentProps<"div"> & { href: string }) {
|
|||
export default function Navlinks(props: ComponentProps<"div">) {
|
||||
const pathname = usePathname()
|
||||
const links = [
|
||||
{ link: "/story", label: "STORIES" },
|
||||
{ link: "/publication", label: "PUBLICATIONS" },
|
||||
{ link: "/submission", label: "SUBMISSIONS" },
|
||||
{ link: "/story", label: "STORIES", icon: <BookOpenText /> },
|
||||
{ link: "/publication", label: "PUBLICATIONS", icon: <BookOpen /> },
|
||||
{ link: "/submission", label: "SUBMISSIONS", icon: <ArrowUpNarrowWide /> },
|
||||
]
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div className="text-secondary-foreground" >
|
||||
<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-l-3xl ",
|
||||
{
|
||||
"text-primary-foreground bg-primary": pathname.includes(e.link)
|
||||
}
|
||||
))}
|
||||
><p className="drop-shadow-sm">{e.label}</p></NavLink >))
|
||||
>
|
||||
<p className="drop-shadow-sm hidden md:block">{e.label}</p>
|
||||
<span className="block md:hidden">{e.icon}</span>
|
||||
</NavLink >))
|
||||
}
|
||||
</ div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -122,11 +122,11 @@ export function DataTable<TData, TValue>({
|
|||
const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
|
||||
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
|
||||
return (<>
|
||||
<div className="flex justify-between items-center py-4">
|
||||
<div className="flex justify-between items-center py-1 md:py-4">
|
||||
<div className="flex gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="ml-auto">
|
||||
<Button variant="outline" className="hidden md:display-blockml-auto">
|
||||
Filter by
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
|
@ -251,6 +251,7 @@ export function DataTable<TData, TValue>({
|
|||
</div>
|
||||
<div className="rounded-md border">
|
||||
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
|
|||
<FormControl
|
||||
>
|
||||
<Input
|
||||
className="w-24"
|
||||
className="md:w-24"
|
||||
type="number"
|
||||
autoFocus={true}
|
||||
step={props.column.columnDef.meta?.step}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@ export const selectCol = {
|
|||
id: "select",
|
||||
header: (props: HeaderContext<any, any>) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="flex items-start justify-left mx-auto">
|
||||
<Checkbox
|
||||
className="mr-4 ml-2"
|
||||
checked={props.table.getIsAllRowsSelected()}
|
||||
onCheckedChange={props.table.toggleAllRowsSelected}
|
||||
aria-label="select/deselect all rows"
|
||||
|
|
@ -18,8 +19,9 @@ export const selectCol = {
|
|||
|
||||
cell: (props: CellContext<any, any>) => {
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="flex items-start justify-left">
|
||||
<Checkbox
|
||||
className="mr-4 ml-2"
|
||||
checked={props.row.getIsSelected()}
|
||||
onCheckedChange={props.row.toggleSelected}
|
||||
aria-label="select/deselect row"
|
||||
|
|
|
|||
Loading…
Reference in New Issue