Repository navigation
feat(events): show event images in the upcoming list - #601
Merged
Merged
Conversation
The soonest confirmed event gets a "Next up" spotlight with its image shown whole (object-contain in a fixed-height frame, so tall flyers aren't cropped and layout doesn't shift). Other rows get a 72px thumbnail only when the event has a real image. Upcoming never falls back to default.jpg: an image-less or failed spotlight shows a typographic date panel, and a row simply drops its thumbnail. Also moves the section onto the live design system (Grove Green and ink tokens replace #EA4335 and gray utilities). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Deploying website with
|
| Latest commit: |
1606710
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cde048cc.website-aun.pages.dev |
| Branch Preview URL: | https://feat-upcoming-event-images.website-aun.pages.dev |
The CTA label varies in width ("More info", "Register", "Watch online",
"Soon"), so a content-sized slot pushed each row's thumbnail to a different
x position. Give the CTA a fixed-width, right-aligned slot from sm up.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Right-aligned labels in the fixed slot made "Soon" start further right than "More info". Left-align them so every label starts at the same x. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A teammate suggested showing event images on the events page itself instead of only in the popup. This adds them to the Upcoming section on
/eventswithout breaking date-first scanning, and without the list looking broken when an event has no image (common in the feed).object-containin a fixed-height Stone frame), because many previews are flyers with text baked in that would be ruined by cropping. The fixed height also prevents layout shift on load. On mobile the image stacks above the text.default.jpgin Upcoming. A spotlight event with no image, or whose image fails to load, shows a typographic date panel instead. A row whose thumbnail fails removes it.#EA4335and gray utilities onto Grove Green and the ink tokens from DESIGN.md. The popup, the Past carousel and the page header are unchanged.Code
eventsLogic.ts:hasPreviewImage,isUpcomingConfirmed,splitSpotlight(pure, unit-tested).EventPreviewImage.tsx: optionalonUnavailable,loading,width/heightprops. Existing callers behave exactly as before.UpcomingEventsSection.tsx: spotlight and row components sharing one click handler (popup, else external link).Accessibility
Thumbnails use
alt=""because the title beside them already names the event. The spotlight image usesalt="Event image for {title}". Every clickable surface has a Grove Green focus outline. No motion was added.Test plan
pnpm test(new tests for the three helpers)pnpm lint(0 errors),pnpm check(0 errors)/eventswhen the next event has a tall flyer, a wide banner, and no image🤖 Generated with Claude Code