Refresh gallery layout and tile styling
This commit is contained in:
Codex Agent
@@ -364,124 +364,129 @@ export default function GalleryPage() {
|
|||||||
{t('galleryPage.loading', 'Lade…')}
|
{t('galleryPage.loading', 'Lade…')}
|
||||||
</motion.p>
|
</motion.p>
|
||||||
)}
|
)}
|
||||||
<motion.div className="grid grid-cols-2 gap-2 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
|
<motion.section
|
||||||
{list.map((p: GalleryPhoto) => {
|
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%)]"
|
||||||
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
|
{...fadeUpMotion}
|
||||||
const createdLabel = p.created_at
|
>
|
||||||
? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
<motion.div className="grid grid-cols-2 gap-3 pb-12 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
|
||||||
: t('galleryPage.photo.justNow', 'Gerade eben');
|
{list.map((p: GalleryPhoto) => {
|
||||||
const likeCount = counts[p.id] ?? (p.likes_count || 0);
|
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
|
||||||
const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
|
const createdLabel = p.created_at
|
||||||
const altSuffix = localizedTaskTitle
|
? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||||
? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
|
: t('galleryPage.photo.justNow', 'Gerade eben');
|
||||||
: '';
|
const likeCount = counts[p.id] ?? (p.likes_count || 0);
|
||||||
const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
|
const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
|
||||||
|
const altSuffix = localizedTaskTitle
|
||||||
|
? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
|
||||||
|
: '';
|
||||||
|
const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
|
||||||
|
|
||||||
const openPhoto = () => {
|
const openPhoto = () => {
|
||||||
const index = list.findIndex((photo) => photo.id === p.id);
|
const index = list.findIndex((photo) => photo.id === p.id);
|
||||||
setCurrentPhotoIndex(index >= 0 ? index : null);
|
setCurrentPhotoIndex(index >= 0 ? index : null);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={p.id}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
onClick={openPhoto}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
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"
|
||||||
|
style={{ borderRadius: radius }}
|
||||||
|
{...fadeScaleMotion}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={imageUrl}
|
||||||
|
alt={altText}
|
||||||
|
className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
|
||||||
|
onError={(e) => {
|
||||||
|
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
|
||||||
|
}}
|
||||||
|
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}>
|
||||||
|
{localizedTaskTitle && (
|
||||||
|
<p
|
||||||
|
className="text-sm font-semibold leading-tight line-clamp-2 text-white"
|
||||||
|
style={headingFont ? { fontFamily: headingFont } : undefined}
|
||||||
|
>
|
||||||
|
{localizedTaskTitle}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-wrap items-center gap-2 text-[11px] text-white/90">
|
||||||
|
<span className="rounded-full bg-white/15 px-2 py-1 backdrop-blur">{createdLabel}</span>
|
||||||
|
<span className="rounded-full bg-white/10 px-2 py-1 backdrop-blur">
|
||||||
|
{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}
|
||||||
|
</span>
|
||||||
|
</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>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={p.id}
|
key={`placeholder-${idx}`}
|
||||||
role="button"
|
className="relative overflow-hidden border border-muted/40 bg-white shadow-sm ring-1 ring-black/5 dark:bg-slate-950 dark:ring-white/10"
|
||||||
tabIndex={0}
|
|
||||||
onClick={openPhoto}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
openPhoto();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="group relative overflow-hidden border border-white/20 bg-gray-950 text-white shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-400"
|
|
||||||
style={{ borderRadius: radius }}
|
style={{ borderRadius: radius }}
|
||||||
{...fadeScaleMotion}
|
{...fadeScaleMotion}
|
||||||
>
|
>
|
||||||
<img
|
<div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
|
||||||
src={imageUrl}
|
<div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
|
||||||
alt={altText}
|
<ImageIcon className="h-6 w-6" aria-hidden />
|
||||||
className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
|
<div className="h-2 w-10 rounded-full bg-muted/40" />
|
||||||
onError={(e) => {
|
|
||||||
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
|
|
||||||
}}
|
|
||||||
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}>
|
|
||||||
{localizedTaskTitle && (
|
|
||||||
<p
|
|
||||||
className="text-sm font-semibold leading-tight line-clamp-2 text-white"
|
|
||||||
style={headingFont ? { fontFamily: headingFont } : undefined}
|
|
||||||
>
|
|
||||||
{localizedTaskTitle}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<div className="flex flex-wrap items-center gap-2 text-[11px] text-white/90">
|
|
||||||
<span className="rounded-full bg-white/15 px-2 py-1 backdrop-blur">{createdLabel}</span>
|
|
||||||
<span className="rounded-full bg-white/10 px-2 py-1 backdrop-blur">
|
|
||||||
{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}
|
|
||||||
</span>
|
|
||||||
</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>
|
||||||
|
<div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
))}
|
||||||
})}
|
</motion.div>
|
||||||
{list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
|
</motion.section>
|
||||||
<motion.div
|
|
||||||
key={`placeholder-${idx}`}
|
|
||||||
className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm"
|
|
||||||
style={{ borderRadius: radius }}
|
|
||||||
{...fadeScaleMotion}
|
|
||||||
>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
|
|
||||||
<div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
|
|
||||||
<ImageIcon className="h-6 w-6" aria-hidden />
|
|
||||||
<div className="h-2 w-10 rounded-full bg-muted/40" />
|
|
||||||
</div>
|
|
||||||
<div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</motion.div>
|
|
||||||
</PullToRefresh>
|
</PullToRefresh>
|
||||||
{currentPhotoIndex !== null && list.length > 0 && (
|
{currentPhotoIndex !== null && list.length > 0 && (
|
||||||
<PhotoLightbox
|
<PhotoLightbox
|
||||||
|
|||||||
Reference in New Issue
Block a user