discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sky.html: snap-binary aperture scroll (wheel ↔ form, full aperture each); SAVE SKY animates scrollTop back to 0 — TDD

Browse Source 
post-save the .sky-page aperture flips into scroll-snap-y-mandatory mode: wheel-col & form-col each fill the aperture & carry scroll-snap-align:start, so vertical scroll toggles between them rather than free-flowing through both. Modal-body uses display:contents so the cols become direct flex children of .sky-page (where min-height:100% resolves against the explicit aperture height); wheel-col's aspect-ratio/max-height caps are released under body.sky-saved so the section actually fills the aperture instead of clipping at 480px. SAVE SKY's success branch calls _scrollApertureToTop(), a 280ms RAF loop w. ease-out cubic so the user lands back on the wheel after confirming from the form section. New FT class MySkyApertureSnapScrollTest covers (T1) snap-type:y mandatory + scroll-snap-align:start on both cols, (T2) scrollTop returns to 0 after SAVE SKY click; both red before the SCSS+JS, green after. Snap behavior is gated on body.sky-saved (set by sky_view based on user.sky_chart_data) so the pre-save form-only flow is untouched.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-08 12:24:11 -04:00
parent 3beedc3f0a
commit 319b787109
4 changed files with 166 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/static_src/scss/_sky.scss
View File

@@ -963,6 +963,48 @@ body.page-sky {
overflow-y: visible;
}
// ── Snap-binary aperture (post-save) ──────────────────────────────────────────
// Once a sky is saved, the .sky-page aperture flips into scroll-snap mode:
// the wheel section + form section each fill the aperture, so scrolling toggles
// between them rather than free-flowing. SAVE SKY (in sky.html's click handler)
// animates the aperture back to the top after a successful save.
//
// modal-body keeps height:100% (= aperture height), so its two flex children
// using min-height:100% each resolve to a full aperture each → modal-body's
// content overflows itself → .sky-page (overflow-y:auto) becomes the scroller.
body.sky-saved {
.sky-page {
scroll-snap-type: y mandatory;
}
// modal-body acts as a layout pass-through so the wheel & form cols become
// direct flex children of .sky-page, where `min-height: 100%` resolves
// against the aperture height (.sky-page has flex:1 + min-height:0 so its
// height is explicit in the parent flex column).
.sky-page .sky-modal-body {
display: contents;
}
.sky-page .sky-wheel-col,
.sky-page .sky-form-col {
scroll-snap-align: start;
scroll-snap-stop: always;
min-height: 100%;
flex: 0 0 auto;
}
// Release the wheel-col aspect-ratio cap so the section fills the aperture;
// .sky-svg inside still renders square (its own aspect-ratio:1/1) and stays
// centered via the col's align-items:center.
.sky-page .sky-wheel-col {
aspect-ratio: auto;
max-width: none;
max-height: none;
width: 100%;
}
}
// ── Sidebar z-index sink (landscape sidebars must go below backdrop) ───────────
@media (orientation: landscape) {