nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: compact map topbar back control

Browse Source
This commit is contained in:
Nico 2026-06-04 02:44:19 -07:00
parent bf34cc341a
commit af08bf5c94
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/maps/LocationMapTopbar.jsx
View File

@ -5,8 +5,13 @@ export default function LocationMapTopbar({ location, status, onBack }) {
return ( return (
<header className="location-map-topbar"> <header className="location-map-topbar">
<button type="button" className="location-map-back" onClick={onBack}> <button
Back type="button"
className="location-map-back"
onClick={onBack}
aria-label="Back to grocery list"
>
<span aria-hidden="true">&larr;</span>
</button> </button>
<div className="location-map-title"> <div className="location-map-title">
<h1>{getStoreName(location)}</h1> <h1>{getStoreName(location)}</h1>

7
frontend/src/styles/pages/LocationMapManager.css
View File

@ -33,7 +33,10 @@
} }
.location-map-back { .location-map-back {
padding: 0 0.85rem; width: 40px;
padding: 0;
font-size: 1.15rem;
line-height: 1;
} }
.location-map-title { .location-map-title {
@ -789,7 +792,7 @@
} }
.location-map-back { .location-map-back {
padding: 0 0.65rem; width: 40px;
} }
.location-map-status { .location-map-status {

8
frontend/tests/location-map-manager.spec.ts
View File

@ -324,7 +324,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
await confirmSlide(page); await confirmSlide(page);
await expect(page.locator(".location-map-object", { hasText: "Temporary Freezer" })).toHaveCount(0); await expect(page.locator(".location-map-object", { hasText: "Temporary Freezer" })).toHaveCount(0);
await page.getByRole("button", { name: "Back" }).click(); await page.getByRole("button", { name: "Back to grocery list" }).click();
await expect(page.getByRole("heading", { name: "Leave with unsaved changes?" })).toBeVisible(); await expect(page.getByRole("heading", { name: "Leave with unsaved changes?" })).toBeVisible();
await page.getByRole("button", { name: "Cancel" }).click(); await page.getByRole("button", { name: "Cancel" }).click();
await expect(page).toHaveURL(/\/stores\/100\/locations\/10\/map$/); await expect(page).toHaveURL(/\/stores\/100\/locations\/10\/map$/);
@ -569,6 +569,7 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
await page.getByRole("button", { name: "Preview Draft" }).click(); await page.getByRole("button", { name: "Preview Draft" }).click();
const topbar = page.locator(".location-map-topbar"); const topbar = page.locator(".location-map-topbar");
const backButton = page.getByRole("button", { name: "Back to grocery list" });
const status = page.locator(".location-map-status"); const status = page.locator(".location-map-status");
const toolbar = page.locator(".location-map-toolbar"); const toolbar = page.locator(".location-map-toolbar");
const modeButtons = page.locator(".location-map-mode-buttons"); const modeButtons = page.locator(".location-map-mode-buttons");
@ -576,21 +577,24 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
await expect(status).toHaveText("Draft Preview"); await expect(status).toHaveText("Draft Preview");
const topbarBox = await topbar.boundingBox(); const topbarBox = await topbar.boundingBox();
const backButtonBox = await backButton.boundingBox();
const titleBox = await page.locator(".location-map-title").boundingBox(); const titleBox = await page.locator(".location-map-title").boundingBox();
const statusBox = await status.boundingBox(); const statusBox = await status.boundingBox();
const toolbarBox = await toolbar.boundingBox(); const toolbarBox = await toolbar.boundingBox();
const modeBox = await modeButtons.boundingBox(); const modeBox = await modeButtons.boundingBox();
const zoomBox = await zoomControls.boundingBox(); const zoomBox = await zoomControls.boundingBox();
expect(topbarBox).not.toBeNull(); expect(topbarBox).not.toBeNull();
expect(backButtonBox).not.toBeNull();
expect(titleBox).not.toBeNull(); expect(titleBox).not.toBeNull();
expect(statusBox).not.toBeNull(); expect(statusBox).not.toBeNull();
expect(toolbarBox).not.toBeNull(); expect(toolbarBox).not.toBeNull();
expect(modeBox).not.toBeNull(); expect(modeBox).not.toBeNull();
expect(zoomBox).not.toBeNull(); expect(zoomBox).not.toBeNull();
if (!topbarBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) { if (!topbarBox || !backButtonBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) {
throw new Error("Mobile map controls layout was not measurable"); throw new Error("Mobile map controls layout was not measurable");
} }
expect(topbarBox.height).toBeLessThanOrEqual(66); expect(topbarBox.height).toBeLessThanOrEqual(66);
expect(backButtonBox.width).toBeLessThanOrEqual(42);
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height); expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
expect(statusBox.x).toBeGreaterThan(titleBox.x); expect(statusBox.x).toBeGreaterThan(titleBox.x);
expect(toolbarBox.height).toBeLessThanOrEqual(64); expect(toolbarBox.height).toBeLessThanOrEqual(64);