Citali/v2.app.gaertan.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix animal list display

Browse Source
This commit is contained in:
Citali
2026-02-02 00:42:55 +01:00
parent 26118d2897
commit cee86edf44
2 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/app/(normal)/artworks/animalstudies/index/page.tsx
View File

@ -1,4 +1,4 @@
import { ArrowLeftIcon } from "lucide-react"; import { ArrowLeftIcon, ChevronRightIcon } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { import {
@ -82,16 +82,17 @@ export default async function AnimalListPage() {
} }
return ( return (
<ul className="space-y-1.5"> <ul className="space-y-1">
{list.map((a) => ( {list.map((a) => (
<li key={a.id}> <li key={a.id}>
<Link <Link
href={`/artworks/single/${a.id}?from=animal-index`} href={`/artworks/single/${a.id}?from=animal-index`}
className=" className="
inline-flex items-center gap-2 group flex w-full items-center gap-2
rounded-md px-2 py-1 rounded-md px-2 py-1.5
text-sm font-medium text-sm font-medium
hover:bg-muted hover:bg-muted/60
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
" "
> >
<span <span
@ -102,7 +103,7 @@ export default async function AnimalListPage() {
group-hover:translate-x-0.5 group-hover:translate-x-0.5
" "
> >
→ <ChevronRightIcon className="h-4 w-4" />
</span> </span>
<span className="leading-snug">{a.name}</span> <span className="leading-snug">{a.name}</span>
@ -149,7 +150,7 @@ export default async function AnimalListPage() {
</div> </div>
</header> </header>
<div className="space-y-6"> <div className="space-y-6 sm:space-y-4">
<Card> <Card>
<CardHeader className="space-y-1"> <CardHeader className="space-y-1">
<CardTitle className="text-base"> <CardTitle className="text-base">
@ -177,15 +178,17 @@ export default async function AnimalListPage() {
const isStandalone = children.length === 0; const isStandalone = children.length === 0;
return ( return (
<AccordionItem key={p.id} value={p.id} className="border-b"> <AccordionItem key={p.id} value={p.id} className="py-1 sm:py-1">
<AccordionTrigger <AccordionTrigger
className=" className="
py-4 py-4 sm:py-3
rounded-md px-2 -mx-2 rounded-md px-2 -mx-2
bg-hover text-hover-foreground dark:bg-hover dark:text-hover-foreground
transition-colors transition-colors
hover:bg-muted/60 hover:bg-hover/80 dark:hover:bg-hover/80
font-semibold
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
data-[state=open]:bg-muted/40 data-[state=open]:bg-muted/90 dark:data-[state=open]:bg-muted/90
" "
> >
<div className="flex w-full items-center justify-between pr-2"> <div className="flex w-full items-center justify-between pr-2">
@ -211,41 +214,44 @@ export default async function AnimalListPage() {
</div> </div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="pb-5"> <AccordionContent className="pb-4 sm:pb-4">
{isStandalone ? ( {isStandalone ? (
<div className="rounded-md border p-4"> <div className="space-y-2">
<div className="mb-3 flex items-center justify-between"> <div className="flex items-center justify-between text-sm font-medium">
<div className="text-sm font-medium">Artworks</div> <span>Artworks</span>
<Badge variant="outline">{p.artworks.length}</Badge> <Badge variant="outline">{p.artworks.length}</Badge>
</div> </div>
<div>
<ArtworkList items={p.artworks} /> <ArtworkList items={p.artworks} />
</div> </div>
</div>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-4 sm:space-y-3">
{p.artworks.length > 0 ? ( {p.artworks.length > 0 ? (
<> <>
<div className="rounded-md border p-4"> <div className="space-y-2">
<div className="mb-3 flex items-center justify-between"> <div className="flex items-center justify-between text-sm font-medium">
<div className="text-sm font-medium">{/* Directly tagged */}</div> <span>Direct artworks</span>
<Badge variant="outline">{p.artworks.length}</Badge> <Badge variant="outline">{p.artworks.length}</Badge>
</div> </div>
<div>
<ArtworkList items={p.artworks} /> <ArtworkList items={p.artworks} />
</div> </div>
</div>
<Separator /> <Separator />
</> </>
) : null} ) : null}
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
{children.map((c) => ( {children.map((c) => (
<div key={c.id} className="rounded-md border p-4"> <div key={c.id} className="space-y-2 pt-3">
<div className="mb-3 flex items-center justify-between"> <div className="flex items-center justify-between text-sm font-medium">
<div className="min-w-0"> <div className="min-w-0">
<div className="truncate text-sm font-medium">{c.name}</div> <div className="truncate">{c.name}</div>
</div> </div>
<Badge variant="outline">{c.artworks.length}</Badge> <Badge variant="outline">{c.artworks.length}</Badge>
</div> </div>
<ArtworkList items={c.artworks} /> <ArtworkList items={c.artworks} />
</div> </div>
))} ))}
@ -269,12 +275,12 @@ export default async function AnimalListPage() {
Tags whose parent is not visible (or not configured for the animal page). Tags whose parent is not visible (or not configured for the animal page).
</p> */} </p> */}
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-4 sm:space-y-2">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
{orphans.map((t) => ( {orphans.map((t) => (
<div key={t.id} className="rounded-md border p-4"> <div key={t.id} className="space-y-2 pt-3">
<div className="mb-3 flex items-center justify-between"> <div className="flex items-center justify-between text-sm font-medium">
<div className="truncate text-sm font-medium">{t.name}</div> <div className="truncate">{t.name}</div>
<Badge variant="outline">{t.artworks.length}</Badge> <Badge variant="outline">{t.artworks.length}</Badge>
</div> </div>
<ArtworkList items={t.artworks} /> <ArtworkList items={t.artworks} />

2
src/app/globals.css
View File

@ -105,6 +105,8 @@
--border: oklch(0.3289 0.0092 268.3843); --border: oklch(0.3289 0.0092 268.3843);
--input: oklch(0.3289 0.0092 268.3843); --input: oklch(0.3289 0.0092 268.3843);
--ring: oklch(0.6132 0.2294 291.7437); --ring: oklch(0.6132 0.2294 291.7437);
--hover: oklch(0.34 0.02 270);
--hover-foreground: var(--foreground);
--chart-1: oklch(0.8003 0.1821 151.7110); --chart-1: oklch(0.8003 0.1821 151.7110);
--chart-2: oklch(0.6132 0.2294 291.7437); --chart-2: oklch(0.6132 0.2294 291.7437);
--chart-3: oklch(0.8077 0.1035 19.5706); --chart-3: oklch(0.8077 0.1035 19.5706);