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).
65 lines
3.4 KiB
Markdown
65 lines
3.4 KiB
Markdown
## 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%)` to `translateY(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)` to `translateY(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: 0` spanning the full viewport width, above all other elements
|