Bill Ballou
7a8330e205
Animate course set pin/unpin with cross-fade content swap, credit bar width changes, status badge color transitions, expand/collapse panels (CreditLegend, AllocationBreakdown), mode toggle switching, and ModeComparison banner fade. Specialization rows flash on credit/status changes. Threshold markers animate position. All animations respect prefers-reduced-motion.
35 lines
1.8 KiB
Markdown
35 lines
1.8 KiB
Markdown
## 1. Global Accessibility Setup
|
|
|
|
- [x] 1.1 Add `prefers-reduced-motion` media query to `index.css` that sets all animation and transition durations to 0.01ms
|
|
|
|
## 2. Course Selection Transitions
|
|
|
|
- [x] 2.1 Add `transition: border-color 200ms, background-color 200ms` to the ElectiveSet container div in `CourseSelection.tsx`
|
|
|
|
## 3. Credit Bar Transitions
|
|
|
|
- [x] 3.1 Add `transition: width 300ms ease-out` to both the allocated and potential bar segments in the CreditBar component in `SpecializationRanking.tsx`
|
|
|
|
## 4. Status Badge Transitions
|
|
|
|
- [x] 4.1 Add `transition: background 200ms, color 200ms` to the status badge span in the SortableItem component in `SpecializationRanking.tsx`
|
|
|
|
## 5. Expand/Collapse Animations
|
|
|
|
- [x] 5.1 Refactor CreditLegend to always mount the content panel and use `max-height` + `overflow: hidden` + `transition: max-height 200ms ease-out` instead of conditional rendering
|
|
- [x] 5.2 Refactor AllocationBreakdown in SortableItem to always mount and use `max-height` + `overflow: hidden` + `transition: max-height 200ms ease-out` instead of conditional rendering
|
|
|
|
## 6. Mode Toggle Transition
|
|
|
|
- [x] 6.1 Add `transition: background 150ms, box-shadow 150ms, color 150ms` to both mode toggle buttons in `ModeToggle.tsx`
|
|
|
|
## 7. ModeComparison Banner Animation
|
|
|
|
- [x] 7.1 Refactor ModeComparison in `Notifications.tsx` to always render the banner div and use `opacity` + `max-height` transitions for enter/exit instead of returning null
|
|
|
|
## 8. Verification
|
|
|
|
- [ ] 8.1 Manually verify all transitions play correctly: pin/unpin courses, toggle mode, expand/collapse legend and breakdown, observe credit bars and status badges
|
|
- [ ] 8.2 Verify reduced-motion: confirm all animations are effectively instant when `prefers-reduced-motion: reduce` is active
|
|
- [x] 8.3 Run existing tests to ensure no regressions from the refactored conditional rendering
|