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:
parent
3ade78d512
commit
f780f0dab6
10 changed files with 344 additions and 22 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue