feat(search): align the map view with the mockup and open it on desktop
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m14s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 19s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m20s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 26s

The map view now follows option B of the results-controls mockups:

- The list sits in a pane on the left, under the result count and sort,
  and the map fills the rest of the screen below the pinned toolbar. The
  toolbar's height is measured, so the split ends 1rem above the bottom
  of the screen however the controls wrap.
- Pins are brand-teal dots and the selected one is coral. The search
  location is an ink dot, the search radius a dashed circle with its
  distance, and the view fits that circle. Tiles are muted and the zoom
  sits under the fullscreen button.
- A school picked on the map or in the list opens a card on the map
  (View, + Compare, following the basket), and its list card is ringed
  and scrolled into view. Phones keep the bottom sheet.
- The list cards show the full name, Ofsted and school type, the
  headline figure and pupils.

The map cards now follow the list rows: no England benchmark for
special schools, PRUs and AP, and no placeholder all-zero RWM (Greenmead
showed "0% RWM -62 pts vs national"). That rule moves to a shared
listRwmValue helper.

A postcode search opens on the map for desktop browsers, chosen on the
server from the user agent so the list never paints first. The client
falls back to the list below 1024px, and follows the default through
client-side navigation from the hero until the reader picks a view.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
TudorandClaude Opus 5.5 committed 2026-09-30 21:30:33 +01:00
1 parent 0e177ca2ec
commit 4e4b30e812
14 files changed
+1118 -440

No files matched your search

+33 -1
View File
@@ -532,7 +532,10 @@ test('the results toolbar stays pinned with its List/Map switch', async ({ page
const view = page.getByRole('group', { name: 'Results view' });
await expect(view).toBeVisible();
await expect(page.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
// Desktop opens on the map; the list is the long page that scrolls.
await page.getByRole('button', { name: 'List', exact: true }).click();
await expect(page.getByRole('button', { name: 'List', exact: true }))
.toHaveAttribute('aria-pressed', 'true');
await page.evaluate(() => window.scrollTo(0, 1500));
await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(1000);
@@ -548,6 +551,35 @@ test('the results toolbar stays pinned with its List/Map switch', async ({ page
.toHaveAttribute('aria-pressed', 'true');
});
/*
* Desktop opens a postcode search on the map (mockup B): the list in a pane on
* the left, the map filling the rest of the screen, and a card on the map for
* the school picked in either.
*/
test('a desktop postcode search opens on the map with the list beside it', async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 800 });
await searchByName(page, 'B1 1BB');
await expect(page.getByRole('button', { name: 'Map', exact: true }))
.toHaveAttribute('aria-pressed', 'true', { timeout: 15_000 });
const pane = page.locator('[class*="mapListPane"]');
const card = pane.locator('[data-urn]').first();
await expect(card).toBeVisible({ timeout: 15_000 });
await expect(page.locator('.sc-pin').first()).toBeVisible({ timeout: 15_000 });
// The split runs to the bottom of the screen rather than stopping short.
const split = await page.locator('[class*="mapViewContainer"]').boundingBox();
expect(split!.y + split!.height).toBeGreaterThan(800 - 40);
expect(split!.y + split!.height).toBeLessThanOrEqual(800);
// A card picks its pin and opens its card on the map. Clicked in its padding,
// clear of the name link and the Compare button.
const name = (await card.locator('a').first().innerText()).trim();
await card.click({ position: { x: 6, y: 6 } });
await expect(page.locator('.sc-pin--selected')).toHaveCount(1);
await expect(page.locator('.sc-popup')).toContainText(name);
});
for (const width of [360, 390, 430]) {
test(`the floating Map button is in reach at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 800 });