Skip to content

Layout: configurable per-side offsets for floating panels - #577

Open
sandesh-sp wants to merge 4 commits into
developmentfrom
feature/570-float-bottom-offset
Open

sandesh-sp wants to merge 4 commits into
developmentfrom
feature/570-float-bottom-offset

Conversation

@sandesh-sp

@sandesh-sp sandesh-sp commented Oct 15, 2026 •

Copy link
Copy Markdown
Collaborator

Part of #570. Replaces #575.

Summary

Floating panels can sit on top of map chrome such as the basemap's logo (bottom-left) and attribution (bottom-right). Instead of measuring that chrome at runtime, this PR lets the admin set how far the floating panels sit in from each edge of the map.

  • Configure page: UI tab → Floating Panels (Center Area) → Top / Right / Bottom / Left Offset (px), stored as panelSettings.floatingOffset: [top, right, bottom, left]. Each is a number from 0 to 200; an empty field counts as 0.
  • Layout: modern.js passes the array to UserInterfaceModern_.init, which sets --ui-float-offset-{top,right,bottom,left} on the float regions wrapper. The CSS insets the wrapper by those values, so every float zone moves with it and the center zones stay centered between the left and right offsets. Each side is capped at 25% of the map so large offsets on a small viewport still leave the zones room.
  • Validator: warns (never errors) when floatingOffset isn't an array, has more than 4 entries, or has an entry that is negative, non-numeric or above 200. The runtime treats such entries as 0 or clamps them to 200.
  • Docs and types: MISSION_CONFIG_REFERENCE.md and PanelSettings describe the field.

With no offsets set, existing missions are unchanged.

Test plan

  • npx vitest run: 3,578 tests pass (adds a float-offset spec and a validator case)
  • Configure page: set Bottom Offset to e.g. 32, save, and check that the bottom float panels sit above the MapLibre logo and attribution
  • Set Left / Right / Top offsets and check the matching zones move in, with the center zones staying centered
  • Leave all four empty: the float panels sit on the map's edges as before
  • Compact layout: the offsets apply there too

@sandesh-sp
sandesh-sp changed the base branch from feature/570-scale-bar to development October 16, 2026 13:24
panelSettings.floatingBottomOffset raises the bottom-left, bottom-center and
bottom-right float zones that many pixels above the map's bottom edge, so an
admin can keep them clear of the basemap's logo and attribution. It is set
in the configure page's Floating Panels section and defaults to 0.
The validator and the UI now read panelSettings.floatingBottomOffset the
same way, so numeric strings are accepted and Infinity or other unusable
values fall back to 0 instead of reaching the CSS. The bottom zones never
sit higher than half the map's height, and the Configure field is capped
at 200px.
…time

The validator warns above the Configure field's 200px maximum and init clamps
to it, so hand-edited configs behave as Configure shows. The PanelSettings
type accepts the numeric and 'px' strings the runtime parses.
panelSettings.floatingOffset takes [top, right, bottom, left] pixels and
insets the float regions wrapper by them, so every float zone moves with
it and the center zones stay centered between the side offsets. Missing
entries are 0, each is capped at 200px, and each side is limited to a
quarter of the map. The Configure page has one field per side and the
validator warns per entry.
@sandesh-sp
sandesh-sp force-pushed the feature/570-float-bottom-offset branch from 338b43a to a24c795 Compare October 16, 2026 13:26
@sandesh-sp sandesh-sp changed the title Layout: configurable bottom offset for floating panels Layout: configurable per-side offsets for floating panels Oct 16, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant