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

swap md: for sm:

This commit is contained in:
andrzej 2024-09-29 13:22:35 +02:00
parent 0ab70fec08
commit 1f1ea79de2
20 changed files with 131 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/@/components/ui/table.tsx
View File

@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
<th <th
ref={ref} ref={ref}
className={cn( className={cn(
"h-12 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", "h-12 sm:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className className
)} )}
{...props} {...props}
@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<td <td
ref={ref} ref={ref}
className={cn("md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} className={cn("sm:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props} {...props}
/> />
)) ))

2
src/@/components/ui/toast.tsx
View File

@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
<ToastPrimitives.Viewport <ToastPrimitives.Viewport
ref={ref} ref={ref}
className={cn( className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]",
className className
)} )}
{...props} {...props}

14
src/app/layout.tsx
View File

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

12
src/app/publication/columns.tsx
View File

@ -32,8 +32,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
}, },
cell: cell => ( cell: cell => (
<> <>
<p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p> <p className="block text-xs max-w-24 break-words sm:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" /> <TextInputCell cellContext={cell} className="hidden sm:block" />
</> </>
), ),
meta: { formSchema: pubSchema } meta: { formSchema: pubSchema }
@ -49,8 +49,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
), ),
cell: cell => ( cell: cell => (
<> <>
<p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p> <p className="block text-xs max-w-16 truncate sm:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" /> <TextInputCell cellContext={cell} className="hidden sm:block" />
</> </>
), ),
meta: { formSchema: pubSchema } meta: { formSchema: pubSchema }
@ -78,8 +78,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
), ),
cell: cell => ( cell: cell => (
<> <>
<p className="block md:hidden text-center">{cell.getValue()}</p> <p className="block sm:hidden text-center">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden md:block" /> <NumberInputCell cellContext={cell} className="hidden sm:block" />
</> </>
), ),
meta: { meta: {

4
src/app/publication/create.tsx
View File

@ -20,8 +20,8 @@ export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { ge
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button> <Button>
<span className="hidden md:block">Create new publication</span> <span className="hidden sm:block">Create new publication</span>
<Plus className="block md:hidden" /> <Plus className="block sm:hidden" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>

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

@ -12,7 +12,7 @@ export default async function Page() {
const genres = await getGenres() const genres = await getGenres()
const pubs = await getPubsWithGenres() const pubs = await getPubsWithGenres()
return ( return (
<div className="container px-1 md:px-4 mx-auto"> <div className="container px-1 sm:px-4 mx-auto">
<DataTable data={pubs} columns={columns} tableName="pub" genres={genres}> <DataTable data={pubs} columns={columns} tableName="pub" genres={genres}>
<CreatePubDialog genres={genres} /> <CreatePubDialog genres={genres} />
</DataTable> </DataTable>

8
src/app/story/columns.tsx
View File

@ -31,8 +31,8 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
}, },
cell: cell => ( cell: cell => (
<> <>
<p className="block break-words max-w-36 md:hidden text-xs">{cell.getValue()}</p> <p className="block break-words max-w-36 sm:hidden text-xs">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" /> <TextInputCell cellContext={cell} className="hidden sm:block" />
</> </>
), ),
meta: { formSchema: storySchema } meta: { formSchema: storySchema }
@ -59,8 +59,8 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
enableColumnFilter: false, enableColumnFilter: false,
cell: cell => ( cell: cell => (
<> <>
<p className="block md:hidden text-center text-xs">{cell.getValue()}</p> <p className="block sm:hidden text-center text-xs">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden md:block" /> <NumberInputCell cellContext={cell} className="hidden sm:block" />
</> </>
), ),
meta: { meta: {

4
src/app/story/create.tsx
View File

@ -19,8 +19,8 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<div> <div>
<Button className="hidden md:block">Create new story</Button> <Button className="hidden sm:block">Create new story</Button>
<Button className="block md:hidden"><Plus /> </Button> <Button className="block sm:hidden"><Plus /> </Button>
</div> </div>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>

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

@ -19,7 +19,7 @@ export default async function Page() {
return ( return (
<div className="container px-1 md:px-4 mx-auto"> <div className="container px-1 sm:px-4 mx-auto">
<DataTable columns={columns} data={storiesWithGenres} tableName="story" <DataTable columns={columns} data={storiesWithGenres} tableName="story"
genres={genres} genres={genres}
> >

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

@ -21,8 +21,8 @@ export const columns: ColumnDef<SubComplete>[] = [
id: "story", id: "story",
header: () => ( header: () => (
<> <>
<span className="hidden md:block">Story</span> <span className="hidden sm:block">Story</span>
<NotepadText className="block md:hidden" /> <NotepadText className="block sm:hidden" />
</> </>
), ),
cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>) cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@ -37,8 +37,8 @@ export const columns: ColumnDef<SubComplete>[] = [
id: "pub", id: "pub",
header: () => ( header: () => (
<> <>
<span className="hidden md:block">Publication</span> <span className="hidden sm:block">Publication</span>
<BookText className="block md:hidden" /> <BookText className="block sm:hidden" />
</> </>
), ),
cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>) cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
@ -53,16 +53,16 @@ export const columns: ColumnDef<SubComplete>[] = [
className="p-0" className="p-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
> >
<span className="hidden md:block"> Date Submitted </span> <span className="hidden sm:block"> Date Submitted </span>
<CalendarPlus className="block md:hidden" /> <CalendarPlus className="block sm:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" /> <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
</Button> </Button>
) )
}, },
enableColumnFilter: false, enableColumnFilter: false,
sortingFn: "datetime", sortingFn: "datetime",
cell: (props: CellContext<any, any>) => ( cell: (props: CellContext<any, any>) => (
<p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', { <p className="w-full text-center text-xs sm:text-sm">{props.getValue().toLocaleDateString('ES', {
day: 'numeric', day: 'numeric',
month: 'numeric', month: 'numeric',
year: '2-digit' year: '2-digit'
@ -79,15 +79,15 @@ export const columns: ColumnDef<SubComplete>[] = [
className="p-0" className="p-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
> >
<span className="hidden md:block"> Date Responded </span> <span className="hidden sm:block"> Date Responded </span>
<CalendarMinus className="block md:hidden" /> <CalendarMinus className="block sm:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" /> <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
</Button> </Button>
) )
}, },
enableColumnFilter: false, enableColumnFilter: false,
sortingFn: "datetime", sortingFn: "datetime",
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', { cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()?.toLocaleDateString('ES', {
day: 'numeric', day: 'numeric',
month: 'numeric', month: 'numeric',
year: '2-digit' year: '2-digit'
@ -108,13 +108,13 @@ export const columns: ColumnDef<SubComplete>[] = [
className="p-0" className="p-0"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
> >
<span className="hidden md:block"> Response </span> <span className="hidden sm:block"> Response </span>
<MessageCircleReply className="block md:hidden" /> <MessageCircleReply className="block sm:hidden" />
<ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" /> <ArrowUpDown className="ml-2 h-4 w-4 hidden sm:block" />
</Button> </Button>
) )
}, },
cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>) cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs sm:text-sm">{props.getValue()}</p>)
}, },
] ]

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

@ -30,11 +30,11 @@ export default function CreateSubmissionDialog({ stories, pubs, responses, defau
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button> <Button>
<span className="hidden md:block">Create new submission</span> <span className="hidden sm:block">Create new submission</span>
<Plus className="block md:hidden" /> <Plus className="block sm:hidden" />
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="text-xs md:text-sm"> <DialogContent className="text-xs sm:text-sm">
<DialogHeader> <DialogHeader>
<DialogTitle>New submission</DialogTitle> <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 story i.e. a thing you intend to submit for publication.</DialogDescription>

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

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

55
src/app/tailwind.css
View File

@ -2340,6 +2340,14 @@ body {
top: auto; top: auto;
} }
.sm\:mt-6 {
margin-top: 1.5rem;
}
.sm\:mt-auto {
margin-top: auto;
}
.sm\:block { .sm\:block {
display: block; display: block;
} }
@ -2348,6 +2356,18 @@ body {
display: none; display: none;
} }
.sm\:w-24 {
width: 6rem;
}
.sm\:w-5\/6 {
width: 83.333333%;
}
.sm\:max-w-\[420px\] {
max-width: 420px;
}
.sm\:flex-row { .sm\:flex-row {
flex-direction: row; flex-direction: row;
} }
@ -2378,14 +2398,49 @@ body {
margin-bottom: calc(0px * var(--tw-space-y-reverse)); margin-bottom: calc(0px * var(--tw-space-y-reverse));
} }
.sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.sm\:rounded-lg { .sm\:rounded-lg {
border-radius: var(--radius); border-radius: var(--radius);
} }
.sm\:rounded-l-3xl {
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.sm\:p-4 {
padding: 1rem;
}
.sm\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.sm\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.sm\:text-left { .sm\:text-left {
text-align: left; text-align: left;
} }
.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] { .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
--tw-enter-translate-y: 100%; --tw-enter-translate-y: 100%;
} }

22
src/app/ui/forms/editSub.tsx
View File

@ -99,13 +99,13 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
return ( return (
<Form {...form}> <Form {...form}>
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8"> <form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8">
<FormField <FormField
control={form.control} control={form.control}
name="storyId" name="storyId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-sm md:text-base">Story</FormLabel> <FormLabel className="text-sm sm:text-base">Story</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
@ -118,7 +118,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
{storiesSelectItems} {storiesSelectItems}
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription> <FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@ -128,7 +128,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="pubId" name="pubId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-sm md:text-base">Publication</FormLabel> <FormLabel className="text-sm sm:text-base">Publication</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
@ -141,7 +141,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
{pubsSelectItems} {pubsSelectItems}
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription> <FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@ -152,7 +152,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="submitted" name="submitted"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col"> <FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of submission</FormLabel> <FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}> <Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<FormControl> <FormControl>
@ -184,7 +184,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormDescription className="text-xs md:text-base"> <FormDescription className="text-xs sm:text-base">
The date you sent it The date you sent it
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
@ -197,7 +197,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="responded" name="responded"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col"> <FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of response</FormLabel> <FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}> <Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<FormControl> <FormControl>
@ -229,7 +229,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormDescription className="text-xs md:text-base"> <FormDescription className="text-xs sm:text-base">
The date they wrote back The date they wrote back
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
@ -243,7 +243,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
name="responseId" name="responseId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-sm md:text-base">Response</FormLabel> <FormLabel className="text-sm sm:text-base">Response</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
@ -256,7 +256,7 @@ export default function EditSubmissionForm({ stories, pubs, responses, defaults,
{reponsesSelectItems} {reponsesSelectItems}
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription> <FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}

20
src/app/ui/forms/sub.tsx
View File

@ -95,7 +95,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
return ( return (
<Form {...form}> <Form {...form}>
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8 text-xs"> <form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 sm:space-y-8 text-xs">
<FormField <FormField
control={form.control} control={form.control}
name="storyId" name="storyId"
@ -114,7 +114,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
{storiesSelectItems} {storiesSelectItems}
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription> <FormDescription className="text-xs sm:text-base">The piece you submitted</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@ -124,7 +124,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="pubId" name="pubId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-sm md:text-base">Publication</FormLabel> <FormLabel className="text-sm sm:text-base">Publication</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
@ -137,7 +137,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
{pubsSelectItems} {pubsSelectItems}
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription> <FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@ -148,7 +148,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="submitted" name="submitted"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col"> <FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of submission</FormLabel> <FormLabel className="text-sm sm:text-base">Date of submission</FormLabel>
<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}> <Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<FormControl> <FormControl>
@ -180,7 +180,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormDescription className="text-xs md:text-base"> <FormDescription className="text-xs sm:text-base">
The date you sent it The date you sent it
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
@ -193,7 +193,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="responded" name="responded"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col"> <FormItem className="flex flex-col">
<FormLabel className="text-sm md:text-base">Date of response</FormLabel> <FormLabel className="text-sm sm:text-base">Date of response</FormLabel>
<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}> <Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<FormControl> <FormControl>
@ -225,7 +225,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormDescription className="text-xs md:text-base"> <FormDescription className="text-xs sm:text-base">
The date they wrote back The date they wrote back
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
@ -239,7 +239,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
name="responseId" name="responseId"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel className="text-sm md:text-base">Response</FormLabel> <FormLabel className="text-sm sm:text-base">Response</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}> <Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl> <FormControl>
<SelectTrigger> <SelectTrigger>
@ -252,7 +252,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
{reponsesSelectItems} {reponsesSelectItems}
</SelectContent> </SelectContent>
</Select> </Select>
<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription> <FormDescription className="text-xs sm:text-base">The market you sent it to</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}

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

@ -21,17 +21,17 @@ export default function Navlinks(props: ComponentProps<"div">) {
] ]
return ( return (
<div className={props.className}> <div className={props.className}>
<div className="text-secondary-foreground flex flex-row md:flex-col" > <div className="text-secondary-foreground flex flex-row sm:flex-col" >
{ {
links.map(e => (<NavLink key={e.link} href={e.link} 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-3xl md: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 sm:rounded-l-3xl ",
{ {
"text-primary-foreground bg-primary": pathname.includes(e.link) "text-primary-foreground bg-primary": pathname.includes(e.link)
} }
))} ))}
> >
<p className="drop-shadow-sm hidden md:block">{e.label}</p> <p className="drop-shadow-sm hidden sm:block">{e.label}</p>
<span className="block md:hidden">{e.icon}</span> <span className="block sm:hidden">{e.icon}</span>
</NavLink >)) </NavLink >))
} }
</ div> </ div>

4
src/app/ui/tables/data-table.tsx
View File

@ -130,11 +130,11 @@ export function DataTable<TData, TValue>({
const [filterBy, setFilterBy] = useState(table.getAllColumns()[0]) const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false) const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
return (<> return (<>
<div className="flex justify-between items-center py-1 md:py-4"> <div className="flex justify-between items-center py-1 sm:py-4">
<div className="flex gap-2"> <div className="flex gap-2">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="hidden md:display-blockml-auto"> <Button variant="outline" className="hidden sm:display-blockml-auto">
Filter by Filter by
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>

2
src/app/ui/tables/inputs/genrePickerInput.tsx
View File

@ -79,7 +79,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
render={({ field }) => ( render={({ field }) => (
<FormItem className="w-full max-w-xs flex flex-col"> <FormItem className="w-full max-w-xs flex flex-col">
<PopoverTrigger asChild> <PopoverTrigger asChild>
{value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs md:text-sm w-fit m-auto">Add genres</Button> {value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs sm:text-sm w-fit m-auto">Add genres</Button>
} }
</PopoverTrigger> </PopoverTrigger>

2
src/app/ui/tables/inputs/numberInput.tsx
View File

@ -78,7 +78,7 @@ export default function NumberInputCell({ cellContext, className }: { cellContex
<FormControl <FormControl
> >
<Input <Input
className="md:w-24" className="sm:w-24"
type="number" type="number"
autoFocus={true} autoFocus={true}
step={cellContext.column.columnDef.meta?.step} step={cellContext.column.columnDef.meta?.step}

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

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