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 (
<header className="location-map-topbar">
<button type="button" className="location-map-back" onClick={onBack}>
Back
<button
type="button"
className="location-map-back"
onClick={onBack}
aria-label="Back to grocery list"
>
<span aria-hidden="true">&larr;</span>
</button>
<div className="location-map-title">
<h1>{getStoreName(location)}</h1>

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

@ -33,7 +33,10 @@
}
.location-map-back {
padding: 0 0.85rem;
width: 40px;
padding: 0;
font-size: 1.15rem;
line-height: 1;
}
.location-map-title {
@ -789,7 +792,7 @@
}
.location-map-back {
padding: 0 0.65rem;
width: 40px;
}
.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 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 page.getByRole("button", { name: "Cancel" }).click();
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();
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 toolbar = page.locator(".location-map-toolbar");
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");
const topbarBox = await topbar.boundingBox();
const backButtonBox = await backButton.boundingBox();
const titleBox = await page.locator(".location-map-title").boundingBox();
const statusBox = await status.boundingBox();
const toolbarBox = await toolbar.boundingBox();
const modeBox = await modeButtons.boundingBox();
const zoomBox = await zoomControls.boundingBox();
expect(topbarBox).not.toBeNull();
expect(backButtonBox).not.toBeNull();
expect(titleBox).not.toBeNull();
expect(statusBox).not.toBeNull();
expect(toolbarBox).not.toBeNull();
expect(modeBox).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");
}
expect(topbarBox.height).toBeLessThanOrEqual(66);
expect(backButtonBox.width).toBeLessThanOrEqual(42);
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
expect(statusBox.x).toBeGreaterThan(titleBox.x);
expect(toolbarBox.height).toBeLessThanOrEqual(64);