daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat(theater): full-screen detail body, eased content collapse, playing-release scoping

Browse Source 
Detail bodies fill 100vh below the nav so the visualizer reads full-screen; Theater toggle eases page content and the player-bar now-showing panel in/out instead of popping (reduced-motion honored); Theater only applies to the currently-playing release.
This commit is contained in:
daniel-c-harvey
2026-06-21 08:59:09 -04:00
parent a577df88dd
commit 9716092805
8 changed files with 202 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+35
View File
@@ -360,6 +360,41 @@ h2, h3, h4, h5, h6,
gap: 0.25rem;
}
/* Full-screen detail body (Phase 20 Wave 2 §1). The content body always fills the viewport below the
fixed nav so the ambient/full-bleed visualizer reads as genuinely full-screen and the footer is pushed
below the fold (scroll to reach it) — independent of Theater Mode. Reuses the shared
--deepdrft-nav-height token (88px desktop / 72px mobile) so the clearance tracks the bar across
breakpoints; no new layout token. Applied to each detail page's foreground content container. */
.dd-detail-fill {
min-height: calc(100vh - var(--deepdrft-nav-height, 88px));
}
/* Eased content collapse for Theater Mode (Phase 20 Wave 2 §2). The detail content stays mounted and
collapses to zero height (and fades) when .dd-theater-collapsed is applied, so toggling Theater eases
both directions instead of popping — when collapsed the content is fully out of the way and the
visualizer is unobstructed. overflow:hidden clips the content during the transition; the large open
max-height accommodates any realistic content height (it is a ceiling, not a fixed size). The same
pattern drives the player-bar "now showing" band so the bar grows/shrinks smoothly too. */
.dd-theater-collapsible {
overflow: hidden;
max-height: 400vh;
opacity: 1;
transition: max-height 0.45s ease, opacity 0.3s ease;
}
.dd-theater-collapsed {
max-height: 0;
opacity: 0;
}
/* Honor reduced-motion: collapse still happens (it is layout, not decoration) but instantly, matching
the parallax precedent (transition-duration: 0). */
@media (prefers-reduced-motion: reduce) {
.dd-theater-collapsible {
transition-duration: 0ms;
}
}
.deepdrft-track-detail-meta {
display: flex;
flex-direction: row;