ekke/pwaLUPMIS2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drawing toolbar: lift the phone strip clear of the map controls

Browse Source 
Now that the strip paints on iPhone, it turned out to sit at the very bottom
edge — under the right-edge control stack and clipped by the dock.

The strip spans the full width, so it has to clear that stack rather than sit
beside it:

  My Location        bottom: 90px  + 44px tall -> top at 134px
  Base map switcher  bottom: 144px + 44px tall -> top at 188px

so bottom: 196px, 8px above the topmost of them. The arithmetic is written into
the rule, with a pointer to .ls-locate-toggle and the LayerSwitcher button in
layerswitcher.css, since a change to either silently reintroduces the overlap.

Landscape still fits: the map is ~270px tall there and the strip is one row at
that width, so 196 + 52 = 248px.

Verified against stand-ins for both buttons at phone and tablet widths: no
overlap in either the one-row or the wrapped two-row layout.

Service Worker v18 -> v19.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ekke 2026-08-20 17:04:08 +02:00
parent 7787f77f80
commit 1c0d4319b7
4 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dist/index.html vendored
View File

@ -1802,7 +1802,13 @@
justify-content: center;
row-gap: 3px;
top: auto;
bottom: 12px;
/* Clear of the right-edge control stack, which the strip spans the full
width of and would otherwise sit under:
My Location bottom: 90px + 44px tall -> top at 134px
Base map switcher bottom: 144px + 44px tall -> top at 188px
so 188 + 8px gap. Keep these in step with .ls-locate-toggle and the
LayerSwitcher button in src/styles/layerswitcher.css. */
bottom: 196px;
left: 8px;
/* width rather than `right`, which is the more conventional pairing
with `left` and avoids another layout edge case. */

6
dist/sw.js vendored
View File

@ -103,7 +103,11 @@
// become hairline dividers so the grouping survives the narrower layout.
// Building the rail is now also wrapped in a fallback: if it throws, the
// default ol-ext bar is shown instead of no bar at all.
const CACHE_VERSION = 'v18';
// v19: The phone strip sat at the very bottom edge, under the My Location and
// base-map buttons on the right and clipped by the dock. It now sits above
// that whole right-edge stack (bottom: 196px = the switcher's 144px anchor
// + its 44px height + an 8px gap).
const CACHE_VERSION = 'v19';
const SHELL_CACHE = `shell-${CACHE_VERSION}`;
const MODULES_CACHE = `modules-${CACHE_VERSION}`;
const API_CACHE = `api-${CACHE_VERSION}`;

8
index.html
View File

@ -1802,7 +1802,13 @@
justify-content: center;
row-gap: 3px;
top: auto;
bottom: 12px;
/* Clear of the right-edge control stack, which the strip spans the full
width of and would otherwise sit under:
My Location bottom: 90px + 44px tall -> top at 134px
Base map switcher bottom: 144px + 44px tall -> top at 188px
so 188 + 8px gap. Keep these in step with .ls-locate-toggle and the
LayerSwitcher button in src/styles/layerswitcher.css. */
bottom: 196px;
left: 8px;
/* width rather than `right`, which is the more conventional pairing
with `left` and avoids another layout edge case. */

6
public/sw.js
View File

@ -103,7 +103,11 @@
// become hairline dividers so the grouping survives the narrower layout.
// Building the rail is now also wrapped in a fallback: if it throws, the
// default ol-ext bar is shown instead of no bar at all.
const CACHE_VERSION = 'v18';
// v19: The phone strip sat at the very bottom edge, under the My Location and
// base-map buttons on the right and clipped by the dock. It now sits above
// that whole right-edge stack (bottom: 196px = the switcher's 144px anchor
// + its 44px height + an 8px gap).
const CACHE_VERSION = 'v19';
const SHELL_CACHE = `shell-${CACHE_VERSION}`;
const MODULES_CACHE = `modules-${CACHE_VERSION}`;
const API_CACHE = `api-${CACHE_VERSION}`;