Compare commits
1 Commits
responsive
...
animal-ind
| Author | SHA1 | Date | |
|---|---|---|---|
cee86edf44
|
@ -1,4 +1,4 @@
|
||||
import { ArrowLeftIcon } from "lucide-react";
|
||||
import { ArrowLeftIcon, ChevronRightIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import {
|
||||
@ -82,16 +82,17 @@ export default async function AnimalListPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="space-y-1.5">
|
||||
<ul className="space-y-1">
|
||||
{list.map((a) => (
|
||||
<li key={a.id}>
|
||||
<Link
|
||||
href={`/artworks/single/${a.id}?from=animal-index`}
|
||||
className="
|
||||
inline-flex items-center gap-2
|
||||
rounded-md px-2 py-1
|
||||
group flex w-full items-center gap-2
|
||||
rounded-md px-2 py-1.5
|
||||
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
|
||||
@ -102,7 +103,7 @@ export default async function AnimalListPage() {
|
||||
group-hover:translate-x-0.5
|
||||
"
|
||||
>
|
||||
→
|
||||
<ChevronRightIcon className="h-4 w-4" />
|
||||
</span>
|
||||
|
||||
<span className="leading-snug">{a.name}</span>
|
||||
@ -149,7 +150,7 @@ export default async function AnimalListPage() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-6 sm:space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-base">
|
||||
@ -177,15 +178,17 @@ export default async function AnimalListPage() {
|
||||
const isStandalone = children.length === 0;
|
||||
|
||||
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
|
||||
className="
|
||||
py-4
|
||||
py-4 sm:py-3
|
||||
rounded-md px-2 -mx-2
|
||||
bg-hover text-hover-foreground dark:bg-hover dark:text-hover-foreground
|
||||
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
|
||||
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">
|
||||
@ -211,41 +214,44 @@ export default async function AnimalListPage() {
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="pb-5">
|
||||
<AccordionContent className="pb-4 sm:pb-4">
|
||||
{isStandalone ? (
|
||||
<div className="rounded-md border p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="text-sm font-medium">Artworks</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm font-medium">
|
||||
<span>Artworks</span>
|
||||
<Badge variant="outline">{p.artworks.length}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<ArtworkList items={p.artworks} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-4 sm:space-y-3">
|
||||
{p.artworks.length > 0 ? (
|
||||
<>
|
||||
<div className="rounded-md border p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="text-sm font-medium">{/* Directly tagged */}</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm font-medium">
|
||||
<span>Direct artworks</span>
|
||||
<Badge variant="outline">{p.artworks.length}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<ArtworkList items={p.artworks} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
</>
|
||||
) : 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) => (
|
||||
<div key={c.id} className="rounded-md border p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div key={c.id} className="space-y-2 pt-3">
|
||||
<div className="flex items-center justify-between text-sm font-medium">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium">{c.name}</div>
|
||||
<div className="truncate">{c.name}</div>
|
||||
</div>
|
||||
<Badge variant="outline">{c.artworks.length}</Badge>
|
||||
</div>
|
||||
|
||||
<ArtworkList items={c.artworks} />
|
||||
</div>
|
||||
))}
|
||||
@ -269,12 +275,12 @@ export default async function AnimalListPage() {
|
||||
Tags whose parent is not visible (or not configured for the animal page).
|
||||
</p> */}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<CardContent className="space-y-4 sm:space-y-2">
|
||||
<div className="grid grid-cols-1 gap-4 sm:gap-2 sm:grid-cols-2">
|
||||
{orphans.map((t) => (
|
||||
<div key={t.id} className="rounded-md border p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="truncate text-sm font-medium">{t.name}</div>
|
||||
<div key={t.id} className="space-y-2 pt-3">
|
||||
<div className="flex items-center justify-between text-sm font-medium">
|
||||
<div className="truncate">{t.name}</div>
|
||||
<Badge variant="outline">{t.artworks.length}</Badge>
|
||||
</div>
|
||||
<ArtworkList items={t.artworks} />
|
||||
|
||||
@ -105,6 +105,8 @@
|
||||
--border: oklch(0.3289 0.0092 268.3843);
|
||||
--input: oklch(0.3289 0.0092 268.3843);
|
||||
--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-2: oklch(0.6132 0.2294 291.7437);
|
||||
--chart-3: oklch(0.8077 0.1035 19.5706);
|
||||
|
||||
Reference in New Issue
Block a user