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

enhancements of the homepage in the guest pwa

Browse Source
This commit is contained in:
Codex Agent
2025-12-15 19:05:27 +01:00
parent 763af12617
commit f2473c6f6d
14 changed files with 568 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
resources/js/guest/components/Header.tsx
View File

@@ -172,19 +172,13 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
}, [notificationsOpen]);
if (!eventToken) {
const guestName = identity?.name && identity?.hydrated ? identity.name : null;
return (
<div
className="guest-header sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40"
className="guest-header z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 dark:bg-black/40"
style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
>
<div className="flex flex-col">
<div className="font-semibold">{title}</div>
{guestName && (
<span className="text-xs text-muted-foreground">
{`${t('common.hi')} ${guestName}`}
</span>
)}
</div>
<div className="flex items-center gap-2">
<AppearanceToggleDropdown />
@@ -194,20 +188,20 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
);
}
const guestName =
identity && identity.eventKey === eventToken && identity.hydrated && identity.name ? identity.name : null;
const headerFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
const headerStyle: React.CSSProperties = {
background: `linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
color: headerTextColor,
fontFamily: branding.fontFamily ?? undefined,
fontFamily: headerFont,
};
const accentColor = branding.secondaryColor;
if (status === 'loading') {
return (
<div className="guest-header sticky top-0 z-20 flex items-center justify-between border-b border-white/10 px-4 py-2 text-white shadow-sm backdrop-blur" style={headerStyle}>
<div className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-2 text-white shadow-sm backdrop-blur" style={headerStyle}>
<div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
<div className="flex items-center gap-2">
<AppearanceToggleDropdown />
@@ -225,19 +219,14 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
statsContext && statsContext.eventKey === eventToken ? statsContext : undefined;
return (
<div
className="guest-header sticky top-0 z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
style={headerStyle}
>
<div className="flex items-center gap-3">
{renderEventAvatar(event.name, event.type?.icon, accentColor, headerTextColor, branding.logo)}
<div className="flex flex-col" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>
<div className="font-semibold text-base">{event.name}</div>
{guestName && (
<span className="text-xs text-white/80">
{`${t('common.hi')} ${guestName}`}
</span>
)}
<div className="flex items-center gap-2 text-xs text-white/70">
<div className="flex flex-col" style={headerFont ? { fontFamily: headerFont } : undefined}>
<div className="font-semibold text-lg">{event.name}</div>
<div className="flex items-center gap-2 text-xs text-white/70" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
{stats && (
<>
<span className="flex items-center gap-1">