Skip to content

per-page scroll layouts, parallax keyboard, modal overlays

jedmund requested to merge jedmund/fix-scroll-layouts into main

Created by: jedmund

Summary

  • Each lesson page fills the viewport and decides its own internal layout (left/right split, top/bottom exercise split, or centered modal card) within a single vertically-paging scroll view
  • Keyboard stays fixed via visualEffect parallax when scrolling between same-layout pages, with caption crossfade and proper hit-testing so invisible sticky keyboards don't intercept taps
  • Modal pages (quizzes, checks) blur the background page with scroll-tracked intensity instead of replacing it
  • Exercise pages split into reading region (60%) and edge-to-edge keyboard (40%) with shared observable state, safe area handling, and device-corner-radius keys
  • Scroll gestures on keyboard regions are blocked via a custom UIGestureRecognizer on the parent UIScrollView without interfering with key taps or drags
  • Callout blocks redesigned with warm muted colors and inlined into reading content; quiz views restyled; note sequence keyboards highlight active pitches during playback with major/pentatonic scale buttons

Test plan

  • Scroll through all pages in the chromatic scale lesson verifying layout transitions
  • Tap piano keys on every keyboard page and confirm audio plays
  • Drag vertically on keyboards and confirm page does not scroll
  • Play chromatic, major, and pentatonic sequences and watch key highlights
  • Verify modal quiz slides over blurred background content
  • Check exercise keyboard extends to screen edge with proper corner rounding

Merge request reports