soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify gallery layout and reduce image overlays
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 12:40:55 +01:00
parent 719afb6920
commit cf7b2e563a
1 changed files with 109 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
resources/js/guest/pages/GalleryPage.tsx
View File

@@ -307,68 +307,64 @@ export default function GalleryPage() {
return ( return (
<Page title=""> <Page title="">
<PullToRefresh <div className="relative">
onRefresh={handleRefresh} <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.10),_transparent_60%)] dark:bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.22),_transparent_65%)]" aria-hidden />
pullLabel={t('common.pullToRefresh')} <PullToRefresh
releaseLabel={t('common.releaseToRefresh')} onRefresh={handleRefresh}
refreshingLabel={t('common.refreshing')} pullLabel={t('common.pullToRefresh')}
> releaseLabel={t('common.releaseToRefresh')}
<motion.div className="space-y-3" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}> refreshingLabel={t('common.refreshing')}
<motion.div >
className="rounded-3xl border border-pink-200/40 bg-gradient-to-br from-pink-50 via-white to-white p-4 shadow-sm dark:border-white/10 dark:from-pink-500/10 dark:via-slate-950 dark:to-slate-950" <motion.div className="space-y-3 px-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}>
style={{ borderRadius: radius }} <motion.div
{...fadeUpMotion} className="rounded-3xl border border-pink-200/40 bg-white/90 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/80"
> style={{ borderRadius: radius }}
<div className="flex flex-wrap items-start justify-between gap-4"> {...fadeUpMotion}
<div className="flex items-center gap-3"> >
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}> <div className="flex flex-wrap items-start justify-between gap-4">
<ImageIcon className="h-5 w-5" aria-hidden /> <div className="flex items-center gap-3">
</div> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
<div> <ImageIcon className="h-5 w-5" aria-hidden />
<h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1> </div>
<p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p> <div>
<h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
<p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
</div>
</div> </div>
{newCount > 0 ? (
<button
type="button"
onClick={acknowledgeNew}
className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
style={{ borderRadius: radius }}
>
{newPhotosBadgeText}
</button>
) : (
<span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
{newPhotosBadgeText}
</span>
)}
</div> </div>
{newCount > 0 ? ( <div className="mt-4">
<button <FiltersBar
type="button" value={filter}
onClick={acknowledgeNew} onChange={setFilter}
className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`} className="mt-0"
style={{ borderRadius: radius }} showPhotobooth={showPhotoboothFilter}
> styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
{newPhotosBadgeText} />
</button> </div>
) : ( </motion.div>
<span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
{newPhotosBadgeText}
</span>
)}
</div>
</motion.div> </motion.div>
</motion.div> {loading && (
<motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
<motion.div className="sticky top-2 z-20" {...fadeUpMotion}> {t('galleryPage.loading', 'Lade…')}
<div className="rounded-2xl border border-border/60 bg-white/85 p-2 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70"> </motion.p>
<FiltersBar )}
value={filter} <motion.div className="grid grid-cols-2 gap-3 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
onChange={setFilter}
className="mt-0"
showPhotobooth={showPhotoboothFilter}
styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
/>
</div>
</motion.div>
{loading && (
<motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}>
{t('galleryPage.loading', 'Lade…')}
</motion.p>
)}
<motion.section
className="mx-2 rounded-[28px] border border-border/60 bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.08),_transparent_55%)] p-2 shadow-sm dark:border-white/10 dark:bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.18),_transparent_60%)]"
{...fadeUpMotion}
>
<motion.div className="grid grid-cols-2 gap-3 pb-12 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
{list.map((p: GalleryPhoto) => { {list.map((p: GalleryPhoto) => {
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path); const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
const createdLabel = p.created_at const createdLabel = p.created_at
@@ -397,75 +393,70 @@ export default function GalleryPage() {
openPhoto(); openPhoto();
} }
}} }}
className="group relative overflow-hidden border border-white/40 bg-white text-white shadow-md ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400 dark:border-white/10 dark:bg-slate-950 dark:ring-white/10" className="group flex flex-col overflow-hidden border border-border/60 bg-white shadow-sm ring-1 ring-black/5 transition duration-300 hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400 dark:border-white/10 dark:bg-slate-950 dark:ring-white/10"
style={{ borderRadius: radius }} style={{ borderRadius: radius }}
{...fadeScaleMotion} {...fadeScaleMotion}
> >
<img <div className="relative">
src={imageUrl} <img
alt={altText} src={imageUrl}
className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105" alt={altText}
onError={(e) => { className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg=='; onError={(e) => {
}} (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
loading="lazy" }}
/> loading="lazy"
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" aria-hidden /> />
<div className="absolute inset-x-0 bottom-0 space-y-2 px-3 pb-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}> <div className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/55 via-black/0 to-transparent" aria-hidden />
</div>
<div className="space-y-2 px-3 pb-3 pt-3" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
{localizedTaskTitle && ( {localizedTaskTitle && (
<p <p
className="text-sm font-semibold leading-tight line-clamp-2 text-white" className="text-sm font-semibold leading-tight line-clamp-2 text-foreground"
style={headingFont ? { fontFamily: headingFont } : undefined} style={headingFont ? { fontFamily: headingFont } : undefined}
> >
{localizedTaskTitle} {localizedTaskTitle}
</p> </p>
)} )}
<div className="flex flex-wrap items-center gap-2 text-[11px] text-white/90"> <div className="flex items-center justify-between gap-2 text-[11px] text-muted-foreground">
<span className="rounded-full bg-white/15 px-2 py-1 backdrop-blur">{createdLabel}</span> <span className="truncate">{createdLabel}</span>
<span className="rounded-full bg-white/10 px-2 py-1 backdrop-blur"> <span className="truncate">{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')} </div>
</span> <div className="flex items-center justify-between gap-2">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onLike(p.id);
}}
className={cn(
'inline-flex items-center gap-1 rounded-full border border-border/60 px-3 py-1 text-xs font-semibold text-foreground transition',
liked.has(p.id) ? 'border-pink-200 bg-pink-50 text-pink-600' : 'hover:bg-muted/40'
)}
aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
style={{ borderRadius: radius }}
>
<Heart className={`h-3.5 w-3.5 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
{likeCount}
</button>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onShare(p);
}}
className={cn(
'inline-flex items-center gap-1 rounded-full border border-border/60 px-3 py-1 text-xs font-semibold text-foreground transition',
shareTargetId === p.id ? 'opacity-60' : 'hover:bg-muted/40'
)}
aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
disabled={shareTargetId === p.id}
style={{ borderRadius: radius }}
>
<Share2 className="h-3.5 w-3.5" aria-hidden />
{t('galleryPage.photo.shareLabel', 'Teilen')}
</button>
</div> </div>
</div>
<div className="absolute right-3 top-3 z-10 flex items-center gap-1 rounded-full border border-white/20 bg-black/50 p-1 backdrop-blur">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onShare(p);
}}
className={cn(
'flex h-9 w-9 items-center justify-center text-white transition',
shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/10'
)}
aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
disabled={shareTargetId === p.id}
style={{
borderRadius: radius,
color: buttonStyle === 'outline' ? linkColor : undefined,
}}
>
<Share2 className="h-4 w-4" aria-hidden />
</button>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onLike(p.id);
}}
className={cn(
'flex items-center gap-1 px-3 py-1 text-sm font-medium transition',
liked.has(p.id) ? 'text-pink-300' : 'text-white'
)}
aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
style={{
borderRadius: radius,
color: buttonStyle === 'outline' ? linkColor : undefined,
}}
>
<Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
{likeCount}
</button>
</div> </div>
</motion.div> </motion.div>
); );
@@ -486,8 +477,8 @@ export default function GalleryPage() {
</motion.div> </motion.div>
))} ))}
</motion.div> </motion.div>
</motion.section> </PullToRefresh>
</PullToRefresh> </div>
{currentPhotoIndex !== null && list.length > 0 && ( {currentPhotoIndex !== null && list.length > 0 && (
<PhotoLightbox <PhotoLightbox
photos={list} photos={list}