klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: increase gallery grid from 4 to 5 columns per row on desktopfeat: increase gallery grid from 4 to 5 columns per row on desktop

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-25 19:11:23 +01:00
parent 5c97488e80
commit 0032aec02f
131 changed files with 15674 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
resources/js/components/artwork/ArtworkHero.jsx
View File

@@ -4,7 +4,7 @@ const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'
const FALLBACK_LG = 'https://files.skinbase.org/default/missing_lg.webp'
const FALLBACK_XL = 'https://files.skinbase.org/default/missing_xl.webp'
export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl }) {
export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl, onOpenViewer, hasPrev, hasNext, onPrev, onNext }) {
const [isLoaded, setIsLoaded] = useState(false)
const mdSource = presentMd?.url || artwork?.thumbs?.md?.url || null
@@ -23,24 +23,20 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl }
return (
<figure className="w-full">
<div className="relative mx-auto w-full max-w-[1280px]">
{blurBackdropSrc && (
<div className="pointer-events-none absolute inset-0 -z-10 scale-105 overflow-hidden rounded-2xl">
<img
src={blurBackdropSrc}
alt=""
aria-hidden="true"
className="h-full w-full object-cover opacity-35 blur-2xl"
loading="lazy"
decoding="async"
/>
</div>
)}
{hasRealArtworkImage && (
<div className="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-b from-nova-700/20 via-nova-900/15 to-deep/40" />
<div className="absolute inset-0 -z-10" />
)}
<div className="relative w-full aspect-video rounded-xl overflow-hidden bg-deep shadow-2xl ring-1 ring-nova-600/30">
<div
className={`relative w-full aspect-video overflow-hidden ${onOpenViewer ? 'cursor-zoom-in' : ''}`}
onClick={onOpenViewer}
role={onOpenViewer ? 'button' : undefined}
aria-label={onOpenViewer ? 'View fullscreen' : undefined}
tabIndex={onOpenViewer ? 0 : undefined}
onKeyDown={onOpenViewer ? (e) => e.key === 'Enter' && onOpenViewer() : undefined}
>
<img
src={md}
alt={artwork?.title ?? 'Artwork'}
@@ -62,6 +58,47 @@ export default function ArtworkHero({ artwork, presentMd, presentLg, presentXl }
event.currentTarget.src = FALLBACK_LG
}}
/>
{/* Prev arrow */}
{hasPrev && (
<button
type="button"
aria-label="Previous artwork"
onClick={(e) => { e.stopPropagation(); onPrev?.(); }}
className="absolute left-3 top-1/2 -translate-y-1/2 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-black/50 text-white/70 backdrop-blur-sm ring-1 ring-white/15 shadow-lg opacity-50 hover:opacity-100 focus:opacity-100 transition-opacity duration-150"
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
)}
{/* Next arrow */}
{hasNext && (
<button
type="button"
aria-label="Next artwork"
onClick={(e) => { e.stopPropagation(); onNext?.(); }}
className="absolute right-3 top-1/2 -translate-y-1/2 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-black/50 text-white/70 backdrop-blur-sm ring-1 ring-white/15 shadow-lg opacity-50 hover:opacity-100 focus:opacity-100 transition-opacity duration-150"
>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
)}
{onOpenViewer && (
<button
type="button"
aria-label="View fullscreen"
onClick={(e) => { e.stopPropagation(); onOpenViewer(); }}
className="absolute bottom-3 right-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/50 text-white/80 backdrop-blur-sm ring-1 ring-white/15 opacity-0 hover:opacity-100 focus:opacity-100 [div:hover_&]:opacity-100 transition-opacity duration-150 shadow-lg"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
</svg>
</button>
)}
</div>
{hasRealArtworkImage && (