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

fix: compact map layer reset

Browse Source
This commit is contained in:
Nico 2026-06-04 20:20:43 -07:00
parent 1020d11382
commit 2af22f6bb2
3 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/maps/LocationMapBottomSheet.jsx
View File

@ -221,8 +221,12 @@ export default function LocationMapBottomSheet({
className="location-map-layer-reset" className="location-map-layer-reset"
onClick={resetLayerFilters} onClick={resetLayerFilters}
aria-label="Reset layer filters" aria-label="Reset layer filters"
title="Reset layer filters"
> >
Reset <svg className="location-map-layer-reset-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 7v5h5" />
<path d="M5.2 12a7 7 0 1 0 2.1-5" />
</svg>
</button> </button>
) : null} ) : null}
<button <button

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

@ -564,16 +564,32 @@
} }
.location-map-layer-reset { .location-map-layer-reset {
width: 40px;
min-width: 40px;
min-height: 40px; min-height: 40px;
padding: 0.35rem 0.65rem; padding: 0;
border: 1px solid var(--color-border-light); border: 1px solid var(--color-border-light);
border-radius: 999px; border-radius: 999px;
background: rgba(15, 23, 34, 0.72); background: rgba(15, 23, 34, 0.72);
color: #dbeafe; color: #dbeafe;
font-weight: 800; display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer; cursor: pointer;
} }
.location-map-layer-reset-icon {
width: 18px;
height: 18px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.location-map-display-controls { .location-map-display-controls {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));

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

@ -4069,6 +4069,8 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
expect(resetLayersButtonBox).not.toBeNull(); expect(resetLayersButtonBox).not.toBeNull();
if (!resetLayersButtonBox) throw new Error("Mobile layer reset button was not measurable"); if (!resetLayersButtonBox) throw new Error("Mobile layer reset button was not measurable");
expect(resetLayersButtonBox.height).toBeGreaterThanOrEqual(40); expect(resetLayersButtonBox.height).toBeGreaterThanOrEqual(40);
expect(resetLayersButtonBox.width).toBeLessThanOrEqual(44);
await expect(page.locator(".location-map-layer-reset-icon")).toHaveCount(1);
await page.getByRole("button", { name: "Reset layer filters" }).click(); await page.getByRole("button", { name: "Reset layer filters" }).click();
await page.getByRole("button", { name: "Layers" }).click(); await page.getByRole("button", { name: "Layers" }).click();
await expect(page.locator(".location-map-pin")).toHaveCount(0); await expect(page.locator(".location-map-pin")).toHaveCount(0);