feat: configurable footer player width via size attribute (#62)#68
Merged
Conversation
The size attribute on <podcast-footer> controls the bar's visual footprint through CSS custom properties: "small" (default) keeps the current compact layout, "medium" widens the bar with a larger cover and controls, and "large" reserves the most room for long titles. On viewports narrower than 768px, all three variants collapse to the same compact layout. The attribute is purely visual; persistence, playback, and the audio source URL are unaffected.
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.
A new
sizeattribute on<podcast-footer>controls the bar's visual footprint through CSS custom properties:size="small"(default): the current compact bar. 36px cover, 140px info column, 32px buttons.size="medium": a wider bar with a 48px cover, 240px info column, 36px buttons, larger fonts.size="large": a full-bleed banner with a 64px cover, 400px info column, 44-56px buttons, the largest fonts.On viewports narrower than 768px, all three variants collapse to the same compact layout. Unknown values fall back to
small. The attribute is purely visual; persistence, playback, and the audio source URL are unaffected.Changes
assets/js/podcast-player.js:PodcastFooter.observedAttributes+="size"attributeChangedCallbackadds asizeno-op branch (CSS handles the visual change):host([size="..."])blocks declare 13--podcast-footer-*custom properties eachexampleSite/layouts/_default/baseof.html:size="medium"added to the default footer to demonstrate the featureexampleSite/content/docs/homepage-setup.md(+ ES mirror): new## Footer SizeH2 sectionCHANGELOG.md: bullet under[Unreleased]/### Addedtests/js/web-component.test.js: 13 new Vitest unit teststests/e2e/player.spec.js: 6 new Playwright E2E tests (incl. cover-width assertions at each size + responsive collapse + Turbolinks persistence)Test plan
npx vitest run- 134/134 tests pass (121 pre-existing + 13 new)npx playwright test ... tests/e2e/player.spec.js- 34/34 tests pass (28 pre-existing + 6 new), including computed-style assertions at each sizeCloses #62