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

Refresh gallery layout and tile styling

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 11:48:40 +01:00
parent 5388a051cb
commit 0486aaaf88
1 changed files with 115 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -364,7 +364,11 @@ 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
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
@@ -393,7 +397,7 @@ export default function GalleryPage() {
openPhoto(); 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" 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 }} style={{ borderRadius: radius }}
{...fadeScaleMotion} {...fadeScaleMotion}
> >
@@ -469,7 +473,7 @@ export default function GalleryPage() {
{list.length === 0 && Array.from({ length: 6 }).map((_, idx) => ( {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
<motion.div <motion.div
key={`placeholder-${idx}`} key={`placeholder-${idx}`}
className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm" 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"
style={{ borderRadius: radius }} style={{ borderRadius: radius }}
{...fadeScaleMotion} {...fadeScaleMotion}
> >
@@ -482,6 +486,7 @@ export default function GalleryPage() {
</motion.div> </motion.div>
))} ))}
</motion.div> </motion.div>
</motion.section>
</PullToRefresh> </PullToRefresh>
{currentPhotoIndex !== null && list.length > 0 && ( {currentPhotoIndex !== null && list.length > 0 && (
<PhotoLightbox <PhotoLightbox