Commit Graph

8 Commits

Author SHA1 Message Date
8aca0a7a53 feat(ui): site-wide UX/UI audit — unified buttons, tokens, accessibility
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 35s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m10s
Build and Push Docker Images / Build Integrator (push) Successful in 57s
Build and Push Docker Images / Build Kestra Init (push) Successful in 31s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
- Add shared button system (.btn-primary/secondary/tertiary/active) in globals.css
- Replace 40+ hardcoded rgba() values with design tokens across all CSS modules
- Add skip link, :focus-visible indicators, and ARIA landmarks
- Standardise button labels ("+ Compare" / "✓ Comparing") across all components
- Add collapse/minimize toggle to ComparisonToast
- Fix heading hierarchy (h3→h2 in ComparisonView)
- Add aria-live on search results, aria-label on trend SVGs
- Add "Search" nav link, fix footer empty section, unify max-widths
- Darken --text-muted for WCAG AA compliance (4.6:1 contrast ratio)
- Net reduction of ~180 lines through button style deduplication

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-25 20:28:03 +00:00
b3892c1629 style(buttons): standardise button sizes across all components
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 32s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m4s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Define two button tiers and apply consistently:
- sm (inline pairs): padding 0.5rem 1rem, font-size 0.875rem, radius 6px
- md (standalone CTAs): padding 0.625rem 1.25rem, font-size 0.9rem, radius 8px

RankingsView: viewButton was 0.25rem/0.8rem/4px vs addButton 0.5rem/0.875rem/8px
— biggest mismatch, both now sm with same radius.
SchoolCard: horizontal padding 0.75rem → 1rem, font-size 0.8125rem → 0.875rem.
SchoolRow: padding 0.4375rem → 0.5rem to match sm exactly.
SchoolDetailView: font-size 0.8125rem → 0.875rem.
ComparisonView/Modal: addButton and shareButton aligned to md spec.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 22:53:09 +00:00
3d24050d11 feat(ux): implement comprehensive UX audit fixes across all pages
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 1m8s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m5s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Addresses 28 issues identified in UX audit (P0–P3 severity):

P0 — Critical:
- Fix compare URL sharing: seed ComparisonContext from SSR initialData
  when localStorage is empty, making /compare?urns=... links shareable
- Remove permanently broken "Avg. Scaled Score" column from school
  detail historical data table

P1 — High priority:
- Add radius selector (0.5–10 mi) to postcode search in FilterBar
- Make Add to Compare a toggle (remove) on SchoolCards
- Hide hero title/description once a search is active
- Show school count + quick-search prompts on empty landing page
- Compare empty state opens in-page school search modal directly
- Remove URN from school detail header (irrelevant to end users)
- Move map above performance chart in school detail page
- Add ← Back navigation to school detail page
- Add sort controls to search results (RWM%, distance, A–Z)
- Show metric descriptions below metric selector
- Expand ComparisonToast to list school names with per-school remove
- Add progress score explainer (0 = national average) throughout

P2 — Medium:
- Remove console.log statements from ComparisonView
- Colour-code comparison school cards to match chart line colours
- Replace plain loading text with LoadingSkeleton in ComparisonView
- Rankings empty state uses shared EmptyState component
- Rankings year filter shows actual year e.g. "2023 (Latest)"
- Rankings subtitle shows top-N count
- Add View link alongside Add button in rankings table
- Remove placeholder Privacy Policy / Terms links from footer
- Replace untappable 10px info icons with visible metric hint text
- Show active filter chips in search results header

P3 — Polish:
- Remove redundant "Home" nav link (logo already links home)
- Add / and Ctrl+K keyboard shortcut to focus search input
- Add Share button to compare page (copies URL to clipboard)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 21:31:28 +00:00
Tudor
2a39cfca82 Group metrics dropdown by category in rankings and comparison views
Some checks failed
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Build and Push Docker Images / Build Frontend (Next.js) (push) Failing after 1m1s
Build and Push Docker Images / Trigger Portainer Update (push) Has been skipped
Added optgroup elements to organize metrics into logical categories:
- Expected Standard
- Higher Standard
- Progress Scores
- Average Scores
- Gender Performance
- Equity (Disadvantaged)
- School Context
- 3-Year Trends

Also added CSS styling for optgroup labels to match the design system.

Note: School names in rankings are already clickable links to school details.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 11:50:13 +00:00
Tudor
05c667e6d3 Fix latestValue block to stick to bottom of school cards
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m10s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
- Add flex layout to schoolCard for proper content distribution
- Use flex: 1 on schoolMeta to fill available space
- Change margin-top to auto on latestValue to push to bottom

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-03 14:55:01 +00:00
Tudor
c2ec067495 Apply warm editorial design system across all components
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 1m19s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m22s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Replace generic blue/gray colors with warm editorial palette:
- Navigation: coral active states, branded logo colors
- Footer: navy background, gold section titles
- FilterBar: coral search button and focus states
- SchoolCard: coral left accent on hover, teal/coral buttons
- HomeView: gradient hero section, Playfair Display headings
- RankingsView: gold top-3 highlights, warm table styling
- ComparisonView: teal card borders, coral buttons

Consistent use of CSS variables and Playfair Display serif font
for headings throughout.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-03 10:11:23 +00:00
Tudor
04ba09ab3b Add loading state and debugging for comparison chart
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 35s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m13s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Added better UX and debugging for the comparison screen:

1. Loading state for chart section
   - Shows "Loading comparison data..." when schools are selected
     but data hasn't loaded yet
   - Provides visual feedback to users

2. Enhanced debugging logs
   - Log URNs being fetched
   - Log API response status
   - Log received comparison data
   - Better error handling with null state on failure

3. Improved conditional rendering
   - Chart shows when data is available
   - Loading message shows when waiting for data
   - Nothing shows when no schools selected

This helps diagnose any API issues and provides better user feedback
during data loading.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-02 22:47:37 +00:00
Tudor
ff7f5487e6 Complete Next.js migration with SSR and Docker deployment
Some checks failed
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 1m26s
Build and Push Docker Images / Build Frontend (Next.js) (push) Failing after 1m48s
Build and Push Docker Images / Trigger Portainer Update (push) Has been skipped
- Migrate from vanilla JavaScript SPA to Next.js 16 with App Router
- Add server-side rendering for all pages (Home, Compare, Rankings)
- Create individual school pages with dynamic routing (/school/[urn])
- Implement Chart.js and Leaflet map integrations
- Add comprehensive SEO with sitemap, robots.txt, and JSON-LD
- Set up Docker multi-service architecture (PostgreSQL, FastAPI, Next.js)
- Update CI/CD pipeline to build both backend and frontend images
- Fix Dockerfile to include devDependencies for TypeScript compilation
- Add Jest testing configuration
- Implement performance optimizations (code splitting, caching)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-02 20:34:35 +00:00