Repository navigation
web UI: style ranking page (comparisons, Favorite Foods, Dining Hall Ranking) #38
Description
What to build
Style src/routes/rank/+page.svelte — the most feature-dense screen in the app: pairwise comparison UI (two dish choice buttons + skip), "Your ranking" list, "Favorite Foods" list, and "Dining hall ranking" (ranked + unranked-with-"not enough data yet" sections). Reuse #35's tokens.
The pairwise comparison is the primary interaction here — the two choice buttons should feel like the focal point of the page (this is the Beli-style "which do you like more" moment), with the three ranking lists below as secondary/reference content.
Acceptance criteria
- Rank page fully restyled using web UI: install Tailwind CSS + design tokens + styled shared layout #35's tokens
- Comparison buttons are the clear visual focus; ranked vs. unranked halls are visually distinguishable (not just text saying "not enough data yet")
-
npx playwright testpasses unchanged (covered byrank.spec.ts, which locates lists by nearest-preceding<h2>text — keep those headings' text and structure intact) -
pnpm --filter web checkclean, CI passes
Blocked by
#35 (Tailwind + design tokens + shared layout)
Activity
TSVRN9 commentedon Aug 19, 2026
A WIP branch exists with a partial restyle of this page:
wip/rank-page-styling(https://github.com/TSVRN9/UDine/tree/wip/rank-page-styling), commit d676481, +148/-44 onweb/src/routes/rank/+page.svelte.This was uncommitted work-in-progress found sitting in a worktree from a prior session (alongside the unrelated #43 shell implementation). It has not been verified against this issue's acceptance criteria (comparison-button focal treatment, ranked/unranked visual distinction,
npx playwright test,pnpm --filter web check). Evaluate whether to build on it or start fresh before treating it as progress.TSVRN9 commentedon Aug 19, 2026
Resolved via PR #59 (branch
ux/rank-page-v2, not merged — awaiting review).Evaluated the WIP (
wip/rank-page-styling, d676481) and kept it verbatim. The "pre-merge shell" concern didn't apply here:git diff 1139de3:web/src/routes/rank/+page.svelte main:web/src/routes/rank/+page.svelteis empty — the rank page's code onmaintoday is byte-identical to what it was at the WIP's merge-base, so nothing about the shell landing differently actually touched this file.git cherry-pick d676481onto currentmainapplied cleanly, zero conflicts. Its styling approach (component classes + token-based Tailwind utilities) also matches the exact pattern already established in landed, reviewed code (halls/[slug]/+page.svelte).Kept: the entire WIP diff, unmodified.
Added: one e2e assertion in
rank.spec.ts(AC2 required "not just text" for the ranked/unranked hall distinction — the existing spec only asserted wording, so I added a class-based check that the ranked row carries.cardand the unranked row doesn't).Acceptance criteria:
npx playwright testpasses unchanged — 17/17 green atPORT=4301, includingrank.spec.ts's original assertions untouched.pnpm --filter web checkclean —396 FILES 0 ERRORS 0 WARNINGS.pnpm --filter web buildalso succeeds.Red/green (two cycles, full logs in PR body):
"Your ranking"list showed"Fried Plantain"first instead of"French Toast"→ reverted → green.cardfrom the ranked hall<li>'s classes → newtoHaveClass(/card/)assertion failed with the actual (un-carded) class string → restored → green.Live-verified against the dev server on a non-default port with a throwaway Playwright script mirroring the real e2e flow (mock menu, log 2 dishes, compare) — screenshots of empty state and post-comparison state described in the PR.
wip/rank-page-stylingis fully incorporated (commit d20e498 in this branch) and safe to delete — left it alone, don't have delete rights here.web UI: style ranking page (#59)