fix: compact mobile map toolbar
This commit is contained in:
parent
ff6468bd71
commit
18b11edba9
@ -31,8 +31,10 @@ export default function LocationMapToolbar({
|
||||
disabled={!hasAnyMap}
|
||||
onClick={onEdit}
|
||||
aria-pressed={mode === "edit"}
|
||||
aria-label="Edit Draft"
|
||||
>
|
||||
Edit Draft
|
||||
<span className="location-map-label-full">Edit Draft</span>
|
||||
<span className="location-map-label-short">Edit</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@ -188,6 +188,10 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.location-map-label-short {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.location-map-canvas-shell {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
@ -616,21 +620,45 @@
|
||||
}
|
||||
|
||||
.location-map-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
}
|
||||
|
||||
.location-map-mode-group,
|
||||
.location-map-mode-buttons,
|
||||
.location-map-tool-buttons,
|
||||
.location-map-zoom-controls {
|
||||
.location-map-mode-buttons {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.location-map-mode-buttons button,
|
||||
.location-map-tool-buttons button,
|
||||
.location-map-zoom-controls button {
|
||||
.location-map-mode-buttons button {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding-inline: 0.45rem;
|
||||
}
|
||||
|
||||
.location-map-label-full {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.location-map-label-short {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.location-map-zoom-controls {
|
||||
flex: 0 0 auto;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.location-map-zoom-controls button {
|
||||
min-width: 40px;
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
.location-map-zoom-controls span {
|
||||
min-width: 42px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.location-map-tool-buttons {
|
||||
|
||||
@ -505,18 +505,31 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
|
||||
|
||||
const topbar = page.locator(".location-map-topbar");
|
||||
const status = page.locator(".location-map-status");
|
||||
const toolbar = page.locator(".location-map-toolbar");
|
||||
const modeButtons = page.locator(".location-map-mode-buttons");
|
||||
const zoomControls = page.locator(".location-map-zoom-controls");
|
||||
await expect(status).toHaveText("Draft Preview");
|
||||
|
||||
const topbarBox = await topbar.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(titleBox).not.toBeNull();
|
||||
expect(statusBox).not.toBeNull();
|
||||
if (!topbarBox || !titleBox || !statusBox) throw new Error("Mobile topbar layout was not measurable");
|
||||
expect(toolbarBox).not.toBeNull();
|
||||
expect(modeBox).not.toBeNull();
|
||||
expect(zoomBox).not.toBeNull();
|
||||
if (!topbarBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) {
|
||||
throw new Error("Mobile map controls layout was not measurable");
|
||||
}
|
||||
expect(topbarBox.height).toBeLessThanOrEqual(66);
|
||||
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
|
||||
expect(statusBox.x).toBeGreaterThan(titleBox.x);
|
||||
expect(toolbarBox.height).toBeLessThanOrEqual(64);
|
||||
expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
|
||||
});
|
||||
|
||||
test("admin selecting an object does not mark a draft dirty until it changes", async ({ page }) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user