Bill/emba-course-solver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity
Files
main
emba-course-solver/app/openspec/changes/mobile-course-selection-floating-banner/proposal.md
Bill Ballou 7940050196 Add mobile floating banners for specialization status and course selection progress 
On mobile, the single-column layout makes it easy to lose context when
scrolling between the specializations and course selection panels. This adds
two floating banners that appear via IntersectionObserver:

- Top banner: summarizes specialization statuses (achieved/achievable/missing/unreachable)
- Bottom banner: shows course selection progress (N/12 selected)

Both slide in/out with CSS transitions and scroll to their respective
sections on tap. Only rendered on mobile viewports (max-width: 639px).
2026-02-28 22:27:07 -05:00

1.6 KiB
Raw Permalink Blame History

Why

On mobile, the course selection panel renders below the specializations panel. When the user scrolls up past the course selection section (e.g., to review or reorder specializations), they lose visibility of their current course selection progress — how many of the 12 elective sets have been picked. A floating bottom banner mirrors the existing top specializations banner, giving the user a persistent summary of course selection state and a quick way to scroll back.

What Changes

  • Add a floating banner at the bottom of the viewport on mobile when the user scrolls above the course selection section
  • The banner summarizes course selection progress: number of sets selected out of 12 total
  • Tapping the banner scrolls down to the course selection section
  • Uses the same animation pattern as the existing MobileStatusBanner (slide in/out via translateY)
  • Only renders on mobile breakpoint (max-width: 639px)

Capabilities

New Capabilities

  • mobile-course-banner: A floating bottom UI component that summarizes course selection progress on mobile when the course selection section is scrolled out of view

Modified Capabilities

Impact

  • Components: New MobileCourseBanner component; changes to App.tsx to mount it with a second IntersectionObserver on the course selection wrapper
  • Styling: Second position: fixed element in the codebase (bottom: 0), using z-index 1000 consistent with the existing top banner
  • Dependencies: No new libraries required
  • Performance: Minimal — one additional IntersectionObserver
Reference in New Issue View Git Blame Copy Permalink