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

  1. Install the RightUp site template.
  2. Open /podcasts. Only the first card has a "View Show" action, and that card is taller than its neighbours.
  3. 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_color from the episodes section so it takes the page's white ground, and drop text-white from the titles and summaries inside it.
  • Set the episode eyebrow to text-tertiary and the card's Icon color to bg-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-black and the two section labels' rules to border-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:

The podcasts landing page with six show cards in two rows of three, each card showing cover art, title, a two-line summary, an episode count and a View Show action.

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:

 a dark banner, then seven episode rows on a white ground with purple episode eyebrows and round play controls, a View More Episodes button, and three More Podcasts cards each with a View Show action.

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">:

An episode page showing an EPISODE 16 eyebrow above the title No Straight Walls, an audio player with no label above it, cover art, and the transcript below.

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".

Issue fork rightup-3622949

Command icon 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

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes
StatusFileSize
new563.89 KB
new615.15 KB
new307.17 KB

  • rajab natshah committed fb510cba on 1.0.x
    fix: #3622949 Lay out the shipped podcast pages the way the design does
    
rajab natshah’s picture

Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue tags: +rightup-1.0.0-alpha1

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.