diff --git a/.claude/rules/features/homepage-sections.md b/.claude/rules/features/homepage-sections.md index 8534f2762e..9780caf3f1 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 shows venue name and city when the Location section is on (the section carries the full address and directions), and the full address with directions when it is off. +- 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. diff --git a/e2e/tests/events/event-page-navigation.spec.ts b/e2e/tests/events/event-page-navigation.spec.ts index 7cf523a756..d263d01fa7 100644 --- a/e2e/tests/events/event-page-navigation.spec.ts +++ b/e2e/tests/events/event-page-navigation.spec.ts @@ -8,6 +8,7 @@ const travelInfo = Array.from({ length: 18 }, (_, index) => `
Travel note ${in
const createEventWithSections = async (api: ApiClient, organizerId: number) => {
const event = await createLiveEventWithProduct(api, { organizerId, price: 15 });
await api.updateEventSettings(event.eventId, {
+ homepage_theme_settings: { accent: '#7c3aed', background: '#f5f3ff', mode: 'light', background_type: 'COLOR', layout: 'MARQUEE' },
homepage_sections: [
{ id: 'tickets', type: 'TICKETS', enabled: true },
{ id: 'travel', type: 'TEXT', enabled: true, heading: 'Getting there', body: travelInfo },
diff --git a/e2e/tests/management/homepage-designer.spec.ts b/e2e/tests/management/homepage-designer.spec.ts
index 77ae073801..fd8a8b521f 100644
--- a/e2e/tests/management/homepage-designer.spec.ts
+++ b/e2e/tests/management/homepage-designer.spec.ts
@@ -56,8 +56,8 @@ test.describe('homepage designer', () => {
const designer = new DesignerPage(authedPage);
await designer.gotoHomepageDesigner(event.eventId);
- await expect(designer.layoutOption('marquee')).toHaveAttribute('aria-checked', 'true');
- await expect(authedPage.getByText('Suits conferences and long lineups', { exact: false })).toBeVisible();
+ await expect(designer.layoutOption('story')).toHaveAttribute('aria-checked', 'true');
+ await expect(authedPage.getByText('A focused reading column.', { exact: false })).toBeVisible();
await designer.layoutOption('invite').click();
await expect(designer.layoutOption('invite')).toHaveAttribute('aria-checked', 'true');
diff --git a/frontend/src/components/layouts/EventHomepage/EventIntro.tsx b/frontend/src/components/layouts/EventHomepage/EventIntro.tsx
index 85513717ad..9ec4ad52c9 100644
--- a/frontend/src/components/layouts/EventHomepage/EventIntro.tsx
+++ b/frontend/src/components/layouts/EventHomepage/EventIntro.tsx
@@ -133,7 +133,7 @@ export const EventIntro = ({
detail={locationDetailsBelow
? (location.venueName ? location.city : null)
: (location.venueName ? location.full : null)}
- extra={!locationDetailsBelow && location.mapsUrl && (
+ extra={location.mapsUrl && (
{t`Get directions`}