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

photo visibility for demo events, hardened the demo mode. fixed dark/light mode toggle and notification bell toggle. fixed photo upload page sizes & header visibility.

Browse Source
This commit is contained in:
Codex Agent
2025-12-18 21:14:24 +01:00
parent 7c4067b32b
commit 53ec427e6e
25 changed files with 965 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
resources/js/guest/components/GalleryPreview.tsx
View File

@@ -7,6 +7,7 @@ import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
import { Heart } from 'lucide-react';
import { useTranslation } from '../i18n/useTranslation';
import { useEventBranding } from '../context/EventBrandingContext';
import { cn } from '@/lib/utils';
type Props = { token: string };
@@ -90,7 +91,11 @@ export default function GalleryPreview({ token }: Props) {
];
return (
<Card className="border border-muted/30 shadow-sm" style={{ borderRadius: radius, background: 'var(--guest-surface)', fontFamily: bodyFont }}>
<Card
className="border border-muted/30 bg-[var(--guest-surface)] shadow-sm dark:border-slate-800/70 dark:bg-slate-950/70"
data-testid="gallery-preview"
style={{ borderRadius: radius, fontFamily: bodyFont }}
>
<CardContent className="space-y-3 p-3">
<div className="flex items-center justify-between">
<div>
@@ -107,28 +112,36 @@ export default function GalleryPreview({ token }: Props) {
</div>
<div className="flex gap-2 overflow-x-auto pb-1 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none]">
{filters.map((filter) => (
<button
key={filter.value}
type="button"
onClick={() => setMode(filter.value)}
style={{
borderRadius: radius,
border: mode === filter.value ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
background: mode === filter.value ? branding.primaryColor : 'var(--guest-surface)',
color: mode === filter.value ? '#ffffff' : 'var(--foreground)',
boxShadow: mode === filter.value ? `0 8px 18px ${branding.primaryColor}33` : 'none',
}}
className="px-4 py-1 transition"
>
{filter.label}
</button>
))}
</div>
{filters.map((filter) => {
const isActive = mode === filter.value;
return (
<button
key={filter.value}
type="button"
onClick={() => setMode(filter.value)}
style={{
borderRadius: radius,
border: isActive ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
background: isActive ? branding.primaryColor : undefined,
boxShadow: isActive ? `0 8px 18px ${branding.primaryColor}33` : 'none',
}}
className={cn(
'px-4 py-1 transition',
isActive
? 'text-white'
: 'bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70 dark:text-slate-100',
)}
>
{filter.label}
</button>
);
})}
</div>
{loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
{!loading && items.length === 0 && (
<div className="flex items-center gap-3 rounded-xl border border-muted/30 bg-[var(--guest-surface)] p-3 text-sm text-muted-foreground">
<div className="flex items-center gap-3 rounded-xl border border-muted/30 bg-[var(--guest-surface)] p-3 text-sm text-muted-foreground dark:border-slate-800/60 dark:bg-slate-950/60">
<Heart className="h-4 w-4" style={{ color: branding.secondaryColor }} aria-hidden />
Noch keine Fotos. Starte mit deinem ersten Upload!
</div>
@@ -139,11 +152,10 @@ export default function GalleryPreview({ token }: Props) {
<Link
key={p.id}
to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
className="group relative block overflow-hidden text-foreground"
className="group relative block overflow-hidden bg-[var(--guest-surface)] text-foreground dark:bg-slate-950/70"
style={{
borderRadius: radius,
border: `1px solid ${branding.primaryColor}22`,
background: 'var(--guest-surface)',
boxShadow: `0 12px 26px ${branding.primaryColor}22`,
}}
>