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

Tighten gallery filters and badge placement

Browse Source
This commit is contained in:
Codex Agent
2026-01-14 14:04:31 +01:00
parent 318f812adf
commit d3ef54a410
2 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,27 +37,29 @@ export default function FiltersBar({
return ( return (
<div <div
className={cn( className={cn(
'flex gap-2 overflow-x-auto px-4 pb-2 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', 'flex overflow-x-auto px-1 pb-2 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
className, className,
)} )}
style={styleOverride} style={styleOverride}
> >
{filters.map((filter) => ( <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">
<button {filters.map((filter, index) => (
key={filter.value} <button
type="button" key={filter.value}
onClick={() => onChange(filter.value)} type="button"
className={cn( onClick={() => onChange(filter.value)}
'inline-flex items-center gap-2 rounded-full border px-4 py-2 transition', className={cn(
value === filter.value 'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
? 'border-pink-500 bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow' value === filter.value
: 'border-transparent bg-white/70 text-muted-foreground hover:border-pink-200', ? 'bg-pink-500 text-white shadow'
)} : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
> )}
{filter.icon} >
{t(filter.labelKey)} {React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
</button> <span className="whitespace-nowrap">{t(filter.labelKey)}</span>
))} </button>
))}
</div>
</div> </div>
); );
} }

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

@@ -327,24 +327,28 @@ export default function GalleryPage() {
<ImageIcon className="h-5 w-5" aria-hidden /> <ImageIcon className="h-5 w-5" aria-hidden />
</div> </div>
<div> <div>
<h1 className="text-2xl font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>{t('galleryPage.title')}</h1> <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>
<span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${badgeEmphasisClass}`}
style={{ borderRadius: radius }}
>
{newPhotosBadgeText}
</span>
</div>
<p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p> <p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
</div> </div>
</div> </div>
{newCount > 0 ? ( {newCount > 0 && (
<button <button
type="button" type="button"
onClick={acknowledgeNew} onClick={acknowledgeNew}
className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`} className="inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold text-pink-600 transition hover:bg-pink-50"
style={{ borderRadius: radius }} style={{ borderRadius: radius }}
> >
{newPhotosBadgeText} {t('galleryPage.badge.markSeen', 'Gesehen')}
</button> </button>
) : (
<span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`} style={{ borderRadius: radius }}>
{newPhotosBadgeText}
</span>
)} )}
</div> </div>
<div className="mt-4"> <div className="mt-4">