Bill Ballou
7940050196
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).
3.4 KiB
3.4 KiB
ADDED Requirements
Requirement: Banner appears when course selection scrolls out of view
The system SHALL display a floating summary banner fixed to the bottom of the viewport on mobile when the course selection section is no longer visible in the viewport.
Scenario: User scrolls above course selection on mobile
- WHEN the user is on a mobile viewport (max-width: 639px) and scrolls up until the course selection section leaves the viewport
- THEN a fixed banner SHALL slide in from the bottom of the screen displaying course selection progress
Scenario: User scrolls back down to course selection on mobile
- WHEN the banner is visible and the user scrolls down until the course selection section re-enters the viewport
- THEN the banner SHALL slide out of view (downward)
Scenario: User is on tablet or desktop
- WHEN the viewport width is greater than 639px
- THEN the banner SHALL NOT render at all
Requirement: Banner displays course selection progress
The banner SHALL show the number of elective sets that have a selected course out of the total 12 sets.
Scenario: Some courses selected
- WHEN the banner is visible and the user has selected courses in 5 of 12 elective sets
- THEN the banner SHALL display "5 / 12 courses selected"
Scenario: No courses selected
- WHEN the banner is visible and no courses have been selected
- THEN the banner SHALL display "0 / 12 courses selected"
Scenario: All courses selected
- WHEN the banner is visible and all 12 elective sets have selections
- THEN the banner SHALL display "12 / 12 courses selected"
Scenario: Selection count updates reactively
- WHEN the user selects or deselects a course while the banner is visible
- THEN the banner count SHALL update to reflect the new selection count
Requirement: Banner animates in and out
The banner SHALL animate its appearance and disappearance using a vertical slide transition from the bottom.
Scenario: Banner slides in
- WHEN the course selection section scrolls out of the viewport on mobile
- THEN the banner SHALL transition from
translateY(100%)totranslateY(0)over 200ms with ease-out timing
Scenario: Banner slides out
- WHEN the course selection section scrolls back into the viewport on mobile
- THEN the banner SHALL transition from
translateY(0)totranslateY(100%)over 200ms with ease-out timing
Requirement: Tapping banner scrolls to course selection
The banner SHALL be tappable. Tapping it SHALL smoothly scroll the page so the course selection section is visible.
Scenario: User taps the banner
- WHEN the banner is visible and the user taps anywhere on it
- THEN the page SHALL smooth-scroll to bring the course selection section into view
Scenario: Banner hides after scroll completes
- WHEN the user taps the banner and the page scrolls to the course selection section
- THEN the banner SHALL slide out as the course selection section becomes visible (via the standard intersection trigger)
Requirement: Banner renders above all other content at bottom
The banner SHALL use position: fixed with bottom: 0 and z-index: 1000 to ensure it layers above all other page content at the bottom of the viewport.
Scenario: Banner overlaps page content at bottom
- WHEN the banner is visible
- THEN it SHALL be rendered at
position: fixed; bottom: 0spanning the full viewport width, above all other elements