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
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:
1 parent
0e177ca2ec
commit
4e4b30e812
14 files changed
+1118
-440
No files matched your search
@@ -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 });
|
||||
|
||||
Reference in new issue
Block a user