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

misc styling

This commit is contained in:
andrzej 2024-09-30 11:49:47 +02:00
parent 5b4e961859
commit 91a1bf468e
7 changed files with 44 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
"peer h-3 w-3 sm:h-6 sm:w-6 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}

5
src/app/layout.tsx
View File

@ -33,8 +33,9 @@ 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="">
<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>
<div id="sidebar" className=" flex flex-row md:flex-col justify-between items-center"> <header className="">
<h1 className="font-black text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 text-sm sm:text-4xl
">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="md:mt-6" />

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

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

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

@ -31,7 +31,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
},
cell: cell => (
<>
<p className="block break-words max-w-36 md:hidden text-xs">{cell.getValue()}</p>
<p className="block break-words max-w-28 md:hidden text-xs">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
</>
),

75
src/app/tailwind.css
View File

@ -706,10 +706,6 @@ body {
z-index: 100;
}
.float-right {
float: right;
}
.m-auto {
margin: auto;
}
@ -968,10 +964,6 @@ body {
width: 100vw;
}
.w-1\/2 {
width: 50%;
}
.min-w-\[8rem\] {
min-width: 8rem;
}
@ -997,6 +989,10 @@ body {
max-width: 9rem;
}
.max-w-60 {
max-width: 15rem;
}
.max-w-full {
max-width: 100%;
}
@ -1013,16 +1009,12 @@ body {
max-width: 20rem;
}
.max-w-40 {
max-width: 10rem;
.max-w-32 {
max-width: 8rem;
}
.max-w-\[50\%\] {
max-width: 50%;
}
.max-w-60 {
max-width: 15rem;
.max-w-28 {
max-width: 7rem;
}
.shrink-0 {
@ -1109,18 +1101,6 @@ body {
flex-wrap: wrap;
}
.content-center {
align-content: center;
}
.content-start {
align-content: flex-start;
}
.content-between {
align-content: space-between;
}
.items-start {
align-items: flex-start;
}
@ -1240,10 +1220,6 @@ body {
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.self-end {
align-self: flex-end;
}
.justify-self-end {
justify-self: end;
}
@ -1476,6 +1452,11 @@ body {
padding-bottom: 1rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.pl-3 {
padding-left: 0.75rem;
}
@ -1512,10 +1493,6 @@ body {
text-align: center;
}
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
@ -1559,11 +1536,6 @@ body {
line-height: 1rem;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.font-black {
font-weight: 900;
}
@ -2397,6 +2369,22 @@ body {
display: none;
}
.sm\:h-4 {
height: 1rem;
}
.sm\:h-6 {
height: 1.5rem;
}
.sm\:w-4 {
width: 1rem;
}
.sm\:w-6 {
width: 1.5rem;
}
.sm\:flex-row {
flex-direction: row;
}
@ -2435,6 +2423,11 @@ body {
text-align: left;
}
.sm\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
--tw-enter-translate-y: 100%;
}

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

@ -245,8 +245,8 @@ export function DataTable<TData, TValue>({
if (!res) toast({ title: "Oh dear...", description: "Failed to delete." })
if (res) toast({ title: "Successfully deleted records of id:", description: JSON.stringify(recordIds) })
table.resetRowSelection()
router.refresh()
setIsDeleteDialogVisible(false)
router.refresh()
}}>
Yes, delete them!</Button>
</DialogFooter>
@ -284,7 +284,7 @@ export function DataTable<TData, TValue>({
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="rounded-md border">
<div className="rounded-md">
<Table>

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

@ -77,9 +77,9 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
control={form.control}
name="genres"
render={({ field }) => (
<FormItem className="w-full max-w-xs flex flex-col">
<FormItem className="w-full max-w-32 flex flex-col">
<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-0"><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>
}
</PopoverTrigger>