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

Unify gallery header and grid section
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 13:53:35 +01:00
parent cf7b2e563a
commit e05ee3b186
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -315,12 +315,12 @@ export default function GalleryPage() {
releaseLabel={t('common.releaseToRefresh')} releaseLabel={t('common.releaseToRefresh')}
refreshingLabel={t('common.refreshing')} refreshingLabel={t('common.refreshing')}
> >
<motion.div className="space-y-3 px-2" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...containerMotion}> <motion.section
<motion.div className="mx-2 space-y-4 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"
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={bodyFont ? { fontFamily: bodyFont, borderRadius: radius } : { borderRadius: radius }}
style={{ borderRadius: radius }} {...containerMotion}
{...fadeUpMotion}
> >
<motion.div {...fadeUpMotion}>
<div className="flex flex-wrap items-start justify-between gap-4"> <div className="flex flex-wrap items-start justify-between gap-4">
<div className="flex items-center gap-3"> <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 h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500" style={{ borderRadius: radius }}>
@@ -347,7 +347,6 @@ export default function GalleryPage() {
</span> </span>
)} )}
</div> </div>
<div className="mt-4"> <div className="mt-4">
<FiltersBar <FiltersBar
value={filter} value={filter}
@@ -358,13 +357,12 @@ export default function GalleryPage() {
/> />
</div> </div>
</motion.div> </motion.div>
</motion.div>
{loading && ( {loading && (
<motion.p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined} {...fadeUpMotion}> <motion.p className="px-1" {...fadeUpMotion}>
{t('galleryPage.loading', 'Lade…')} {t('galleryPage.loading', 'Lade…')}
</motion.p> </motion.p>
)} )}
<motion.div className="grid grid-cols-2 gap-3 px-2 pb-16 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}> <motion.div className="grid grid-cols-2 gap-3 pb-8 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