From 25bf57804aa292fc519575171ac45c6f86170140 Mon Sep 17 00:00:00 2001 From: max-1-max <201788345+max-1-max@users.noreply.github.com> Date: Thu, 22 Oct 2026 12:53:13 +0100 Subject: [PATCH] Event page polish: full address, firmer styling, no cover lip --- .claude/rules/features/homepage-sections.md | 2 +- .../EventHomepage/EventHomepage.module.scss | 24 +++++++++++-------- .../layouts/EventHomepage/EventIntro.tsx | 8 ++----- .../layouts/EventHomepage/index.tsx | 2 -- .../HomepageFrame/HomepageFrame.module.scss | 23 +++++++----------- .../layouts/HomepageFrame/_homepage.scss | 23 +++++------------- .../OrganizerHomepage.module.scss | 4 ---- .../layouts/OrganizerHomepage/index.tsx | 2 +- frontend/src/utilites/effectiveLocation.ts | 4 +--- 9 files changed, 33 insertions(+), 59 deletions(-) diff --git a/.claude/rules/features/homepage-sections.md b/.claude/rules/features/homepage-sections.md index 9780caf3f1..c01360ef3b 100644 --- a/.claude/rules/features/homepage-sections.md +++ b/.claude/rules/features/homepage-sections.md @@ -16,4 +16,4 @@ paths: - Event page layouts (Marquee, Flyer, Story, Invite) are rows of traits in `constants/eventLayouts.ts`; CSS keys off the traits (`data-rail`, `data-poster`, `data-width`, `data-centered`), never layout names. A new layout is a new row, a designer sketch in `LayoutPicker/LayoutPreview.tsx`, and a backend `HomepageLayout` case. `DEFAULT_EVENT_LAYOUT` applies to every event without a saved layout. - Sections render in columns from ~350px (phones, Flyer on tablet) to ~690px, so their responsive rules use container queries (`hp.narrow`, `hp.compact`) on the section, never viewport media queries. Dialogs portal to `main` and keep viewport rules. - Status labels ("This event has ended", "Happening now") come from the server's `lifecycle_status`, never the client clock, so SSR and hydration agree. An ended event renders no Tickets block and no ticket rail; Marquee drops to the medium width. -- The intro always offers Get directions. It shows venue name and city when the Location section is on (the section carries the full address), and the full address when it is off. +- The intro always shows the venue's full address with Get directions, even when the Location section repeats it lower down. diff --git a/frontend/src/components/layouts/EventHomepage/EventHomepage.module.scss b/frontend/src/components/layouts/EventHomepage/EventHomepage.module.scss index 1572ce76a7..e68fbb95fa 100644 --- a/frontend/src/components/layouts/EventHomepage/EventHomepage.module.scss +++ b/frontend/src/components/layouts/EventHomepage/EventHomepage.module.scss @@ -6,10 +6,6 @@ position: relative; padding: 24px 20px 8px; - &[data-has-cover] { - @include hp.lip; - } - @include hp.tablet-up { --section-bleed: 40px; padding: 36px 40px 16px; @@ -230,7 +226,7 @@ a.host:hover { height: 48px; overflow: hidden; border: 1px solid var(--hp-border); - border-radius: 14px; + border-radius: 12px; background: var(--hp-surface); color: var(--hp-text); @@ -405,7 +401,7 @@ a.host:hover { .hi-product-widget-container { --widget-card-bg-color: var(--hp-surface); --widget-border-color: var(--hp-border); - --widget-radius: 16px; + --widget-radius: 12px; --widget-accent-text-color: var(--hp-accent-ink); padding: 0; background: transparent; @@ -420,13 +416,21 @@ a.host:hover { .hi-product-title h3 { font-family: hp.$font; } + + .hi-product-widget-container .hi-footer-row .hi-continue-button { + &:disabled, &[data-disabled] { + background: var(--hp-fill-strong); + color: var(--hp-muted); + opacity: 1; + } + } } .body[data-rail] & { @include hp.wide { padding: 20px; border: 1px solid var(--hp-border); - border-radius: 24px; + border-radius: 18px; background: var(--hp-surface); box-shadow: var(--hp-shadow-md); } @@ -439,7 +443,7 @@ a.host:hover { gap: 16px; padding: 20px; border: 1px solid var(--hp-border); - border-radius: 18px; + border-radius: 14px; } .locationText { @@ -470,7 +474,7 @@ a.host:hover { gap: 14px; padding: 20px; border: 1px solid var(--hp-border); - border-radius: 18px; + border-radius: 14px; } .hostCardTop { @@ -498,7 +502,7 @@ a.host:hover { flex-shrink: 0; width: 48px; height: 48px; - border-radius: 14px; + border-radius: 12px; object-fit: cover; &[data-placeholder] { diff --git a/frontend/src/components/layouts/EventHomepage/EventIntro.tsx b/frontend/src/components/layouts/EventHomepage/EventIntro.tsx index 9ec4ad52c9..57d441da0b 100644 --- a/frontend/src/components/layouts/EventHomepage/EventIntro.tsx +++ b/frontend/src/components/layouts/EventHomepage/EventIntro.tsx @@ -36,7 +36,6 @@ interface EventIntroProps extends EventHostProps { lastOccurrenceDate: string | null; status: IntroStatus | null; location: EventLocationDisplay | null; - locationDetailsBelow: boolean; variedLocationLabel: string | null; } @@ -89,7 +88,6 @@ export const EventIntro = ({ lastOccurrenceDate, status, location, - locationDetailsBelow, variedLocationLabel, ...hostProps }: EventIntroProps) => { @@ -129,10 +127,8 @@ export const EventIntro = ({ {location && !location.isOnline && (location.venueName || location.full) && ( } - title={locationDetailsBelow ? location.venueName || location.short || location.full : location.venueName || location.full} - detail={locationDetailsBelow - ? (location.venueName ? location.city : null) - : (location.venueName ? location.full : null)} + title={location.venueName || location.full} + detail={location.venueName ? location.full : null} extra={location.mapsUrl && ( {t`Get directions`} diff --git a/frontend/src/components/layouts/EventHomepage/index.tsx b/frontend/src/components/layouts/EventHomepage/index.tsx index f02005082d..a55a0f89fe 100644 --- a/frontend/src/components/layouts/EventHomepage/index.tsx +++ b/frontend/src/components/layouts/EventHomepage/index.tsx @@ -249,7 +249,6 @@ const EventHomepage = ({...loaderData}: EventHomepageProps) => { lastOccurrenceDate={event.type === EventType.RECURRING ? lastOccurrenceDate : null} status={status} location={location} - locationDetailsBelow={hasVenue && homepageSections.some(section => section.type === 'LOCATION')} variedLocationLabel={variedLocationLabel} /> ); @@ -311,7 +310,6 @@ const EventHomepage = ({...loaderData}: EventHomepageProps) => {
{cover && } -
+
{logo ? diff --git a/frontend/src/utilites/effectiveLocation.ts b/frontend/src/utilites/effectiveLocation.ts index 67d09cd931..0d4b0b0caa 100644 --- a/frontend/src/utilites/effectiveLocation.ts +++ b/frontend/src/utilites/effectiveLocation.ts @@ -8,7 +8,6 @@ export const resolveEventLocation = (event: Event, occurrence?: EventOccurrence export interface EventLocationDisplay { isOnline: boolean; venueName: string | null; - city: string | null; short: string | null; full: string | null; mapsUrl: string | null; @@ -86,7 +85,7 @@ export const buildEventLocationDisplay = ( } if (eventLocation.type === LocationType.Online) { - return {isOnline: true, venueName: null, city: null, short: null, full: null, mapsUrl: null}; + return {isOnline: true, venueName: null, short: null, full: null, mapsUrl: null}; } const address = eventLocation.location?.structured_address ?? null; @@ -101,7 +100,6 @@ export const buildEventLocationDisplay = ( return { isOnline: false, venueName, - city: address?.city?.trim() || null, short: short ?? venueName, full, mapsUrl: buildMapsUrl(event, allowCustomMapsUrl, eventLocation, full ? address : null),