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.
3.3 KiB
MODIFIED Requirements
Requirement: Mobile-first responsive layout
The app SHALL adapt its layout to two viewport classes: mobile (<768px) and desktop (≥768px). On mobile, all panels SHALL stack vertically in a single column. On desktop, the layout SHALL use a top-to-bottom arrangement of: header + mode toggle + mode comparison banner, a horizontal specialization strip, a global search-progress strip, and a 2-column workspace below containing Top Plans (left) and Schedule (right). The two workspace columns SHALL scroll independently while the spec strip and progress strip SHALL remain fixed at the top of the workspace area.
Scenario: Mobile viewport
- WHEN the viewport width is less than 768px
- THEN the layout SHALL display as a single column with the specialization panel above the Top Plans section above the Schedule section, all full-width
Scenario: Desktop viewport
- WHEN the viewport width is 768px or greater
- THEN the layout SHALL display the horizontal specialization strip across the top, a global progress strip directly below it, and a 2-column workspace below the progress strip with Top Plans on the left and Schedule on the right
Scenario: Independent column scroll on desktop
- WHEN the user is on desktop and scrolls inside the Top Plans column
- THEN only the Top Plans column SHALL scroll while the Schedule column, the progress strip, and the specialization strip SHALL remain in place
Scenario: Independent column scroll on desktop (Schedule)
- WHEN the user is on desktop and scrolls inside the Schedule column
- THEN only the Schedule column SHALL scroll while the Top Plans column, the progress strip, and the specialization strip SHALL remain in place
Requirement: Notification banners span full width
Mode comparison and mutual exclusion warnings SHALL render as full-width banners above the main panel layout, not inside a specific column.
Scenario: Warning banner placement
- WHEN a mutual exclusion warning or mode comparison banner is active
- THEN the banner SHALL appear between the header/mode toggle and the specialization strip (desktop) or the specialization panel (mobile), spanning the full container width
ADDED Requirements
Requirement: Global search-progress strip on desktop
On desktop, the active search progress bar SHALL render as a thin full-width strip directly below the specialization strip and above the workspace columns. It SHALL remain visible from any scroll position within either workspace column. On mobile, the progress bar SHALL remain inside the Top Plans section as today.
Scenario: Search in progress on desktop
- WHEN the decision-tree search is running on desktop
- THEN an animated progress bar SHALL render in a strip between the specialization strip and the workspace columns, showing the iteration count and percent complete
Scenario: Search complete on desktop
- WHEN the decision-tree search has completed on desktop
- THEN the progress bar SHALL no longer animate; the static "Search complete · N explored" or "Search incomplete · cap hit at N" status MAY remain visible inline with the Top Plans header
Scenario: Search progress on mobile
- WHEN the decision-tree search is running on mobile
- THEN the progress bar SHALL render inside the Top Plans section, not in a global strip