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

fix: compact selected zone panel

Browse Source
This commit is contained in:
Nico 2026-06-03 15:22:54 -07:00
parent 757a5fb5b7
commit a8f747984d
3 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,7 @@ export default function LocationMapBottomSheet({
: editorTool === "edit"
? "Tap an area to select it."
: "Drag and zoom without changing objects.";
const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject);
const showEditorControls = mode === "edit" && canManage;
const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject);
const changedLayerCount = DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length;
@ -109,7 +110,12 @@ export default function LocationMapBottomSheet({
<aside className="location-map-bottom-sheet">
<div className="location-map-sheet-header">
<div>
<strong>{sheetTitle}</strong>
<div className="location-map-sheet-heading">
<strong>{sheetTitle}</strong>
{showHeaderItemCount ? (
<span className="location-map-sheet-count">{selectedItemCountLabel}</span>
) : null}
</div>
{mode === "edit" && canManage ? (
<span>{sheetDescription}</span>
) : null}
@ -250,10 +256,6 @@ export default function LocationMapBottomSheet({
</p>
) : selectedObject ? (
<div className="location-map-zone-items">
<div className="location-map-zone-items-title">
<h2>{selectedTitle}</h2>
<span>{selectedItemCountLabel}</span>
</div>
{selectedZoneItems.length === 0 ? (
<div className="location-map-zone-empty">
<p className="location-map-muted">

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

@ -335,8 +335,16 @@
min-width: 0;
}
.location-map-sheet-heading {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.location-map-sheet-header strong {
display: block;
min-width: 0;
color: #f8fafc;
overflow: hidden;
text-overflow: ellipsis;
@ -355,6 +363,19 @@
color: #9fb3c8;
}
.location-map-sheet-header .location-map-sheet-count {
flex: 0 0 auto;
min-width: 58px;
margin-top: 0;
padding: 0.2rem 0.45rem;
border-radius: 999px;
background: rgba(96, 165, 250, 0.18);
color: #f8fafc;
font-size: 0.82rem;
font-weight: 900;
text-align: center;
}
.location-map-layer-toggle {
min-height: 40px;
display: inline-flex;
@ -491,29 +512,6 @@
gap: 0.45rem;
}
.location-map-zone-items h2 {
font-size: 1rem;
}
.location-map-zone-items-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.55rem;
}
.location-map-zone-items-title span {
min-width: 58px;
padding: 0.2rem 0.45rem;
border-radius: 999px;
background: rgba(96, 165, 250, 0.18);
color: #f8fafc;
font-size: 0.82rem;
font-weight: 900;
text-align: center;
}
.location-map-zone-empty {
display: grid;
gap: 0.55rem;

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

@ -364,8 +364,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
await expect(page.getByText("loose batteries")).toHaveCount(0);
await page.locator(".location-map-object", { hasText: "Bread Wall" }).locator("rect").first().click();
const zonePanel = page.locator(".location-map-zone-items");
await expect(zonePanel.locator(".location-map-zone-items-title span")).toHaveText("2 items");
await expect(page.locator(".location-map-sheet-count")).toHaveText("2 items");
await expect(page.getByText("french bread")).toBeVisible();
await expect(page.getByText("sourdough")).toBeVisible();
await expect(page.getByText("frozen salmon")).toHaveCount(0);
@ -759,12 +758,12 @@ test("viewer explains when selected zone items are hidden by filters", async ({
await expect(page.locator(".location-map-pin")).toHaveCount(0);
await frozenArea.locator("rect").first().click();
await expect(page.locator(".location-map-zone-items-title span")).toHaveText("0 shown");
await expect(page.locator(".location-map-sheet-count")).toHaveText("0 shown");
await expect(page.getByText("Items are assigned here, but hidden by layer filters.")).toBeVisible();
await expect(page.getByText("frozen salmon")).toHaveCount(0);
await page.getByRole("button", { name: "Show Zone Items" }).click();
await expect(page.locator(".location-map-zone-items-title span")).toHaveText("1 item");
await expect(page.locator(".location-map-sheet-count")).toHaveText("1 item");
await expect(page.getByText("frozen salmon")).toBeVisible();
await expect(frozenArea.locator(".location-map-count")).toHaveText("1 item");
await expect(page.locator(".location-map-pin")).toHaveCount(0);
@ -833,11 +832,11 @@ test("viewer handles empty and many-item zone panels without default pins", asyn
await expect(page.locator(".location-map-pin")).toHaveCount(0);
await page.locator('[data-object-key="1562"]').locator("rect").first().click();
await expect(page.locator(".location-map-zone-items-title span")).toHaveText("0 items");
await expect(page.locator(".location-map-sheet-count")).toHaveText("0 items");
await expect(page.getByText("No items assigned to this zone yet.")).toBeVisible();
await page.locator('[data-object-key="1561"]').locator("rect").first().click();
await expect(page.locator(".location-map-zone-items-title span")).toHaveText("14 items");
await expect(page.locator(".location-map-sheet-count")).toHaveText("14 items");
await expect(page.locator(".location-map-zone-items li")).toHaveCount(14);
await expect(page.locator(".location-map-zone-items li").first()).toContainText("bulk item 1");
await expect(page.locator(".location-map-zone-items li").last()).toContainText("bulk item 14");