feat(ui): replace card grid with row-based results and plain-language metric labels
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 1m2s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s

Replace the school card grid with a scannable row list that shows 3x more
results per screen. Each row shows: school name + R,W&M % with trend,
area/type meta, and reading/writing/maths progress scores with plain-English
band labels (e.g. "above average") instead of raw numbers.

Add lib/metrics.ts as a single source of truth for plain-language metric
explanations and the progressBand() helper. Map view toggle is unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-23 22:32:33 +00:00
parent 3d24050d11
commit 0f29397253
5 changed files with 554 additions and 64 deletions

View File

@@ -8,7 +8,7 @@
import { useState, useEffect } from 'react';
import { useSearchParams } from 'next/navigation';
import { FilterBar } from './FilterBar';
import { SchoolCard } from './SchoolCard';
import { SchoolRow } from './SchoolRow';
import { SchoolMap } from './SchoolMap';
import { Pagination } from './Pagination';
import { EmptyState } from './EmptyState';
@@ -134,8 +134,8 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
</h2>
<select value={sortOrder} onChange={e => setSortOrder(e.target.value)} className={styles.sortSelect}>
<option value="default">Sort: Relevance</option>
<option value="rwm_desc">Highest RWM%</option>
<option value="rwm_asc">Lowest RWM%</option>
<option value="rwm_desc">Highest R, W &amp; M %</option>
<option value="rwm_asc">Lowest R, W &amp; M %</option>
{isLocationSearch && <option value="distance">Nearest first</option>}
<option value="name_asc">Name AZ</option>
</select>
@@ -204,11 +204,12 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
) : (
/* List View Layout */
<>
<div className={styles.grid}>
<div className={styles.schoolList}>
{sortedSchools.map((school) => (
<SchoolCard
<SchoolRow
key={school.urn}
school={school}
isLocationSearch={isLocationSearch}
onAddToCompare={addSchool}
onRemoveFromCompare={removeSchool}
isInCompare={selectedSchools.some(s => s.urn === school.urn)}