Problem/Motivation
The RightUp site template ships /podcasts and /podcasts/last-call as Canvas pages. Compared with the design frames they came from, both differ in ways a visitor sees.
Show page (/podcasts/last-call):
- The episode list sits on a black band. The design puts it on the page's white ground, with black titles and a 60%-black summary.
- The episode eyebrow and the circular play control are the mint accent. The design uses brand tertiary (
#4f46e1) for both. - The row rules are
border-light, which is a hairline meant for dark bands. - The "View More Episodes" action under the list is missing entirely.
- The three "More Podcasts" cards carry an empty Button text, so none of them renders the design's "View Show →" action.
- The show's cover art is in the leading column. The design puts the copy first and the cover art at the end of the banner.
Landing page (/podcasts):
- Five of the six show cards carry an empty Button text, so only "Last Call" renders a "View Show →" action.
- The "Last Call" card carries a four-line summary where every other card has two, so its meta line and action sit lower than the rest of the row and the grid reads as broken.
Steps to reproduce
- Install the RightUp site template.
- Open
/podcasts. Only the first card has a "View Show" action, and that card is taller than its neighbours. - Open
/podcasts/last-call. The episode list is white on black, the eyebrows and play buttons are mint, and there is no "View More Episodes" action under the list.
Proposed resolution
Correct the two shipped Canvas pages. No component changes are needed: every value below is already an option on the components the pages use.
- Drop
background_color/text_colorfrom the episodes section so it takes the page's white ground, and droptext-whitefrom the titles and summaries inside it. - Set the episode eyebrow to
text-tertiaryand the card's Icon color tobg-tertiary. - Set the "Hosted by … · N Mins" line to
text-subtle-text, the enum value that matches the design's 60% black. - Set the row rules to
border-blackand the two section labels' rules toborder-tertiary. - Add the design's "View More Episodes" action under the episode list: the Button component,
btn-dark,rounded-0, left-aligned. - Give every podcast card on both pages a "View Show" Button text and a URL.
- Flip the show banner to 80-20 and move the cover art to the trailing column.
- Shorten the "Last Call" card summary to the design's one sentence.
Keep every band's own copy white where the band is dark: the banner, and the newsletter band, both of which sit inside these pages.
After, as the merge request renders it
Captured as an anonymous visitor at 1920×1080 on a fresh Drupal CMS site with the RightUp site template, scrolled first so every Drimage placeholder had been swapped for its derivative.
Landing page — all six show cards now carry the design's "View Show →", and the Last Call summary is two lines like the rest, so the row no longer reads as broken:

Show page — the episode list sits on the page's white ground with black titles, the eyebrow and the circular play control are brand tertiary, the row rules are tertiary rather than the dark-band hairline, View More Episodes is present, and all three More Podcasts cards render their action. The banner keeps its white copy, since that band is genuinely dark:

Episode page — the stored episode number renders as the design's eyebrow, and the title appears once. Measured on this render: the eyebrow reads EPISODE 16, the h1 text occurs exactly once in main, and the player is a single <audio preload="none">:

Remaining tasks
- ✅ File an issue
- ❌ Repaint the show page's episode list to the design's white band and tertiary accents
- ❌ Add the View More Episodes action
- ❌ Give every show card its View Show action and URL
- ❌ Flip the show banner so the cover art sits at the end
- ❌ Even out the landing grid's card summaries
- ❌ Verify in a real browser at 1440px and 375px
- ❌ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support
- ➖ User Guide Documentation support
- ❌ UX/UI designer responsibilities
- ❌ Accessibility and Readability
- ❌ Reviewed by a human
- ❌ Code review by maintainers
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ❌ Update Release Notes
- ❌ Release
User interface changes
- The podcast landing and show pages take the design's colours, actions and banner order.
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- The shipped podcast landing and show pages now match the RightUp design: the episode list sits on the page's white ground with brand-tertiary eyebrows and play controls, every show card carries its "View Show" action, and the episode list ends with "View More Episodes".
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | mr27-episode-page.png | 307.17 KB | rajab natshah |
| #3 | mr27-show-page-last-call.png | 615.15 KB | rajab natshah |
| #3 | mr27-podcasts-landing.png | 563.89 KB | rajab natshah |
Issue fork rightup-3622949
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
rajab natshahComment #5
rajab natshahReleased in rightup 1.0.0-alpha1.
Comment #7
rajab natshah