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

Refresh gallery layout and tile styling
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 11:48:40 +01:00
parent 83c58358a1
commit 719afb6920
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…')}
</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) => {
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
const createdLabel = p.created_at
@@ -393,7 +397,7 @@ export default function GalleryPage() {
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 }}
{...fadeScaleMotion}
>
@@ -469,7 +473,7 @@ export default function GalleryPage() {
{list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
<motion.div
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 }}
{...fadeScaleMotion}
>
@@ -482,6 +486,7 @@ export default function GalleryPage() {
</motion.div>
))}
</motion.div>
</motion.section>
</PullToRefresh>
{currentPhotoIndex !== null && list.length > 0 && (
<PhotoLightbox