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

Fix responsive layout on artwork single page

Browse Source
This commit is contained in:
Citali
2026-02-02 00:12:11 +01:00
parent 874aa5f343
commit d70f00314b
2 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/(normal)/artworks/single/[id]/page.tsx
View File

@ -8,7 +8,12 @@ import { PlayCircle } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
export default async function SingleArtworkPage({ params }: { params: { id: string }; searchParams: Record<string, string | string[] | undefined>; }) {
export default async function SingleArtworkPage({
params,
}: {
params: { id: string };
searchParams: Record<string, string | string[] | undefined>;
}) {
const { id } = await params;
const artwork = await prisma.artwork.findUnique({
where: {
@ -24,34 +29,44 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
tags: true,
variants: true,
timelapse: { where: { enabled: true } },
}
})
},
});
if (!artwork) return <div>Artwork with this ID could not be found</div>
if (!artwork) return <div>Artwork with this ID could not be found</div>;
const { width, height } = artwork.variants.find((v) => v.type === "resized") ?? { width: 0, height: 0 }
const { width, height } = artwork.variants.find(
(v) => v.type === "resized",
) ?? { width: 0, height: 0 };
const colors =
artwork.colors?.map((c) => c.color?.hex).filter((hex): hex is string => Boolean(hex)) ?? []
artwork.colors
?.map((c) => c.color?.hex)
.filter((hex): hex is string => Boolean(hex)) ?? [];
const gradientColors = colors.length
? colors.join(", ")
: "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
: "rgba(0,0,0,0.1), rgba(0,0,0,0.03)";
return (
<div className="px-8 py-4">
<div className="px-4 sm:px-8 py-4">
<div className="relative w-full min-h-10 flex items-center mb-4">
<div className="z-10"><ContextBackButton /></div>
<div className="z-10 hidden sm:block">
<ContextBackButton />
</div>
{artwork.name ? (
<div className="pointer-events-none absolute left-1/2 -translate-x-1/2 text-center">
<div className="pointer-events-auto"><h1 className="text-2xl font-bold mb-4 py-4">{artwork.name}</h1></div>
<div className="w-full text-center sm:pointer-events-none sm:absolute sm:left-1/2 sm:-translate-x-1/2">
<div className="sm:pointer-events-auto">
<h1 className="text-xl sm:text-2xl font-bold mb-2 sm:mb-4 py-2 sm:py-4 px-2 sm:px-0 wrap-break-word">
{artwork.name}
</h1>
</div>
</div>
) : null}
</div>
<div className="flex flex-col items-center gap-4">
<div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background relative">
<div className="relative w-full bg-muted items-center justify-center"
<div
className="relative w-full bg-muted items-center justify-center"
style={{ aspectRatio: "4 / 3" }}
>
<Link href={`/raw/${artwork.id}`}>
@ -94,7 +109,10 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
tags={artwork.tags}
/>
</div>
<div className="w-full flex justify-center sm:hidden">
<ContextBackButton className="mx-auto flex justify-center" />
</div>
</div>
</div >
</div>
);
}
}