Redesign ring header into structured 2-row grid, show full now-playing title and thumbnail

Ring header restructured from flat 1fr/auto grid into two semantic rows:
- Info row: title + badges left, progress counter right
- Controls row: Reverse and Autoplay toggles right-aligned

Now-playing row shows full title (no line-clamp truncation) and product
thumbnail. JS reads og:image meta tag for current thumbnail during SPA
navigation. SPA updates for edit button, download button, file info,
comments, and canonical link. Footer and docs updates.
This commit is contained in:
russell@unturf.com 2026-02-09 11:46:54 -05:00
parent 3ade78d512
commit f780f0dab6
10 changed files with 344 additions and 22 deletions

View file

@ -218,6 +218,13 @@ Always use `uuid_str` when you need a string copy of the identifier. Models inhe
**MOBILE USABILITY**: Never use hover-only interactions (`:hover` to reveal controls, `opacity: 0` with hover reveal, etc.). Mobile/touch devices have no hover state — controls hidden behind hover are invisible and unreachable. All interactive elements (buttons, toggles, links) must be always visible and tappable. Design touch-first, then optionally enhance for desktop hover.
**SPA + NORMAL MODE**: Watch mode uses SPA navigation (`watch.js`) that swaps content without a full page reload. When adding or modifying links, buttons, forms, or any product-specific content on pages that participate in watch mode (content.j2, product.j2), you MUST ensure:
1. **Server-rendered HTML** works for the initial page load (normal mode, no-JS, crawlers)
2. **`updatePageContent()` in watch.js** updates the same element during SPA navigation
3. **The watch JSON endpoint** (`watch.py`) returns any new data the JS needs
Elements that must stay in sync: CTA edit button, download button, comment form `product_id`, file type/size, description, title, canonical link, related items. If you add a new product-specific element, add it to all three layers.
**TESTING INTEGRITY**: NEVER skip, delete, or disable unit tests or integration tests when they break. When tests fail:
1. **FIX THE TESTS** - Update them to work with new functionality
2. **FIX THE CODE** - If the tests reveal actual defects, fix the underlying issue