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

Tighten gallery spacing and add filter dividers
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 15:08:28 +01:00
parent c0510581c6
commit 3612c97e86
2 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/js/guest/components/FiltersBar.tsx
View File

@@ -43,22 +43,29 @@ export default function FiltersBar({
style={styleOverride}
>
<div className="inline-flex items-center rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
{filters.map((filter, index) => (
<button
key={filter.value}
type="button"
onClick={() => onChange(filter.value)}
className={cn(
'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
value === filter.value
? 'bg-pink-500 text-white shadow'
: 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
)}
>
{React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
<span className="whitespace-nowrap">{t(filter.labelKey)}</span>
</button>
))}
{filters.map((filter, index) => {
const isActive = value === filter.value;
return (
<div key={filter.value} className="flex items-center">
<button
type="button"
onClick={() => onChange(filter.value)}
className={cn(
'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
isActive
? 'bg-pink-500 text-white shadow'
: 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
)}
>
{React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
<span className="whitespace-nowrap">{t(filter.labelKey)}</span>
</button>
{index < filters.length - 1 && (
<span className="mx-1 h-4 w-px bg-border/60 dark:bg-white/10" aria-hidden />
)}
</div>
);
})}
</div>
</div>
);

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

@@ -316,19 +316,19 @@ export default function GalleryPage() {
refreshingLabel={t('common.refreshing')}
>
<motion.section
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="mx-0.5 space-y-2 rounded-3xl border border-pink-200/40 bg-white/90 p-2 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/80"
style={bodyFont ? { fontFamily: bodyFont, borderRadius: radius } : { borderRadius: radius }}
{...containerMotion}
>
<motion.div {...fadeUpMotion}>
<div className="flex flex-wrap items-start justify-between gap-4">
<div className="flex flex-wrap items-center justify-between gap-2">
<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 }}>
<ImageIcon className="h-5 w-5" aria-hidden />
</div>
<div>
<div className="flex flex-wrap items-center gap-2">
<h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
<h1 className="text-lg font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1>
<span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${badgeEmphasisClass}`}
style={{ borderRadius: radius }}
@@ -351,7 +351,7 @@ export default function GalleryPage() {
</button>
)}
</div>
<div className="mt-4">
<div className="mt-2">
<FiltersBar
value={filter}
onChange={setFilter}
@@ -366,7 +366,7 @@ export default function GalleryPage() {
{t('galleryPage.loading', 'Lade…')}
</motion.p>
)}
<motion.div className="grid grid-cols-2 gap-3 pb-8 sm:grid-cols-3 lg:grid-cols-4" {...gridMotion}>
<motion.div className="grid grid-cols-2 gap-3 pb-6 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