Bill
2ebfb9d2ec
Specializations move from a 340px left rail to a horizontal 2-row chip grid at the top (drag L→R to rank). Each chip shows rank, spec-colored abbreviation tag matching the tags used in plans/schedule, full name on its own row, status glyph, and a micro credit bar. Hover/tap a chip to see full status, allocated/threshold credits, and contributing-courses breakdown in a popover. The right pane splits into two side-by-side columns on desktop: Top Plans (left) and Schedule (right), each scrolling independently. The search progress bar hoists into a global strip below the spec grid so it stays visible regardless of which column is scrolled. Schedule blocks render their course choices as a horizontal row of equal-width buttons (3-5 per set) instead of stacked rows. Pinned sets collapse to a single line with the course name inline next to the set title. Term headers (Spring/Summer/Fall) remain as section dividers. On mobile, the layout becomes a 3-tab segmented control (Specializations / Plans / Courses) with the search progress strip above the tabs. The previous floating MobileStatusBanner and MobileCourseBanner are dropped — tabs replace their navigation function.
108 lines
7.3 KiB
Markdown
108 lines
7.3 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Desktop horizontal specialization strip
|
|
On desktop, the specialization panel SHALL render as a single-row horizontal strip of compact chips, one chip per specialization, ordered left-to-right by priority rank. Each chip SHALL display the rank number, the specialization's 3-letter abbreviation, and a micro credit progress bar. The chip's background color SHALL encode the specialization's status using the same four-color palette used for vertical rows on mobile (achieved, achievable, missing required, unreachable).
|
|
|
|
#### Scenario: Strip rendering on desktop
|
|
- **WHEN** the user views the app on desktop
|
|
- **THEN** all specializations SHALL render as a horizontal row of compact chips in priority order (highest priority leftmost)
|
|
|
|
#### Scenario: Chip status color
|
|
- **WHEN** a specialization is in the "achieved" status
|
|
- **THEN** its chip SHALL render with the achieved-status background color from `STATUS_STYLES`
|
|
|
|
#### Scenario: Chip content
|
|
- **WHEN** a specialization chip renders on desktop
|
|
- **THEN** the chip SHALL display the rank number, the 3-letter abbreviation (e.g., "FIN"), and a micro credit progress bar reflecting allocated credits versus the 9-credit threshold
|
|
|
|
#### Scenario: Strip overflow on narrow desktop viewports
|
|
- **WHEN** the desktop viewport width is too narrow to fit all chips at their target width
|
|
- **THEN** the strip SHALL allow horizontal scrolling within itself rather than wrap to multiple rows
|
|
|
|
### Requirement: Specialization chip hover popover
|
|
On desktop, hovering or tapping a specialization chip SHALL open a popover anchored to the chip showing the full specialization name, the status word ("Achieved" / "Achievable" / "Missing Required" / "Unreachable"), the allocated/threshold credits in numeric form (e.g., "5.5 / 9.0"), and — for achieved specializations — the contributing-courses breakdown (each contributing course name and its credit amount). The popover SHALL stay open while the cursor is over either the chip or the popover, and SHALL close when the cursor leaves both.
|
|
|
|
#### Scenario: Hover opens popover
|
|
- **WHEN** the user moves the cursor over a specialization chip on desktop
|
|
- **THEN** a popover SHALL open anchored to the chip showing the full name, status word, and allocated/threshold credits
|
|
|
|
#### Scenario: Popover for achieved specialization
|
|
- **WHEN** the user hovers a chip whose specialization is achieved
|
|
- **THEN** the popover SHALL additionally list each contributing course's name and its credit amount
|
|
|
|
#### Scenario: Popover for non-achieved specialization
|
|
- **WHEN** the user hovers a chip whose specialization is not in the achieved status
|
|
- **THEN** the popover SHALL omit the contributing-courses breakdown but SHALL still show the full name, status word, and allocated/threshold credits
|
|
|
|
#### Scenario: Tap toggles popover on touch
|
|
- **WHEN** the user taps a chip on a touch device using the desktop layout
|
|
- **THEN** the popover SHALL toggle open or closed; tapping outside the chip and popover SHALL close it
|
|
|
|
#### Scenario: Popover stays open while cursor moves to popover
|
|
- **WHEN** the user hovers a chip to open the popover and then moves the cursor onto the popover
|
|
- **THEN** the popover SHALL remain open
|
|
|
|
#### Scenario: Popover does not clip at viewport edges
|
|
- **WHEN** a chip near the right edge of the viewport is hovered
|
|
- **THEN** the popover SHALL be repositioned horizontally so that it remains within the viewport
|
|
- **WHEN** a chip is near the bottom of available space
|
|
- **THEN** the popover SHALL flip above the chip if there is more space above than below
|
|
|
|
### Requirement: Horizontal drag-to-reorder on desktop
|
|
On desktop, the specialization chip strip SHALL support drag-and-drop reordering using a left-to-right horizontal sorting strategy. Dragging a chip and dropping it at a new horizontal position SHALL update the priority ranking accordingly.
|
|
|
|
#### Scenario: Drag chip left or right
|
|
- **WHEN** the user drags a specialization chip to a new horizontal position on desktop
|
|
- **THEN** the priority ranking SHALL update to reflect the new left-to-right order (leftmost chip is highest priority)
|
|
|
|
#### Scenario: Mobile keeps vertical drag
|
|
- **WHEN** the user drags a specialization on mobile
|
|
- **THEN** reordering SHALL continue to use vertical drag semantics
|
|
|
|
## MODIFIED Requirements
|
|
|
|
### Requirement: Specialization rows include credit progress
|
|
On mobile, each specialization row in the ranking list SHALL display the credit progress bar and allocated/threshold credits alongside the rank, name, and status badge. The row layout SHALL be: reorder controls, rank number, name, credits (e.g. "7.5 / 9.0"), status badge, with a credit bar below. On desktop the equivalent information SHALL render in the chip + hover-popover combination defined in this capability rather than as full rows.
|
|
|
|
#### Scenario: Mobile row displays allocated credits and bar
|
|
- **WHEN** a specialization has 7.5 allocated credits from pinned courses on mobile
|
|
- **THEN** the row SHALL show "7.5 / 9.0" and a credit progress bar filled to 7.5/9.0
|
|
|
|
#### Scenario: Mobile row displays zero credits
|
|
- **WHEN** a specialization has no allocated credits on mobile
|
|
- **THEN** the row SHALL show "0 / 9.0" and an empty credit progress bar with the 9-credit threshold marker visible
|
|
|
|
#### Scenario: Desktop chip displays credit progress
|
|
- **WHEN** a specialization has any allocated credits on desktop
|
|
- **THEN** the chip SHALL show a micro credit bar reflecting the allocated proportion against the 9-credit threshold, and the popover SHALL display the numeric "X.X / 9.0" value
|
|
|
|
### Requirement: Expandable allocation breakdown
|
|
On mobile, achieved specialization rows SHALL be tappable/clickable to expand and show the allocation breakdown (which courses contribute how many credits). On desktop, the allocation breakdown SHALL render inside the chip's hover popover for achieved specializations rather than via in-place expansion.
|
|
|
|
#### Scenario: Mobile tap to expand achieved spec
|
|
- **WHEN** a user taps an achieved specialization row on mobile
|
|
- **THEN** the row SHALL expand to show a list of contributing courses and their credit amounts
|
|
|
|
#### Scenario: Mobile tap to collapse
|
|
- **WHEN** a user taps an already-expanded achieved specialization row on mobile
|
|
- **THEN** the allocation breakdown SHALL collapse
|
|
|
|
#### Scenario: Mobile non-achieved specs are not expandable
|
|
- **WHEN** a user taps a specialization that is not achieved on mobile
|
|
- **THEN** nothing SHALL happen (no expand/collapse)
|
|
|
|
#### Scenario: Desktop allocation breakdown via popover
|
|
- **WHEN** a user hovers an achieved specialization chip on desktop
|
|
- **THEN** the chip's popover SHALL show the contributing-courses breakdown (each course name and its credit amount); no in-place expansion of the chip occurs
|
|
|
|
### Requirement: Achievement summary
|
|
The panel SHALL display a summary count showing how many specializations are currently achieved. On mobile, the summary appears above the ranking list. On desktop, the summary appears in the specialization strip's header area (above or alongside the strip).
|
|
|
|
#### Scenario: Some achieved
|
|
- **WHEN** 2 specializations are achieved
|
|
- **THEN** the panel SHALL display "2 specializations achieved" (mobile: above the list; desktop: in the strip header)
|
|
|
|
#### Scenario: None achieved
|
|
- **WHEN** no specializations are achieved
|
|
- **THEN** the panel SHALL display "No specializations achieved yet" (mobile: above the list; desktop: in the strip header)
|