Phones: no approximate-location caption in the resting legend
On a phone there is no room for "The dot marks where this people is found, not a town or a boundary" beside the legend, so the caption chip under the sheet is gone: the sentence shows in no resting state (collapsed, or open with nothing selected). A tapped dot's detail view keeps its note inside the sheet, where it explains shared dots, and the tree's own copy stays off. The credit strip under the sheet is the bottom controls alone again. Desktop is unchanged.
This commit is contained in:
Doxa Maps
parent
575fb2a461
commit
037dfad3bc
1 changed files with 6 additions and 58 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, inject, toRef } from 'vue'
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, inject, toRef } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useShadowStyles } from '../../composables/useShadowStyles.js'
|
||||
import { useLegendData } from '../../composables/legends/useLegendData.js'
|
||||
|
|
@ -28,26 +28,7 @@ useShadowStyles(`
|
|||
|
||||
/* Containment root: clamps absolute children to the map area. */
|
||||
.legend-sheet-root{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
|
||||
/* Sits IN the credit strip: under the sheet, just above the map's bottom controls. Above the sheet it
|
||||
collided with the pin-hint pill, which lifts itself to clear the sheet's top edge (measured at 390 on
|
||||
Simple Research: the pill sat on the caption's text). Down here it is on screen in every sheet state
|
||||
and the pill never reaches it. The strip is measured WITH it (--legend-credit-strip = the controls
|
||||
+ this note), so the sheet sits above both. Text only, so it stays pointer-events:none with the
|
||||
root — nothing here is tappable and it must never eat a map drag. It sits on a chip, like the credit
|
||||
beside it: a text halo alone left the light theme's grey text unreadable on a dark basemap (Prayer
|
||||
Progress at 390). */
|
||||
.approx-pin-note--floating{position:absolute;inset-inline:0;bottom:var(--legend-credit-controls,0px);z-index:1001;box-sizing:border-box;width:fit-content;max-width:calc(100% - 20px);margin:0 auto 2px !important;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,0.88);text-align:center;pointer-events:none;}
|
||||
/* The note's own text colour flips with the dark prop, so the chip has to flip with it: light text on
|
||||
a white chip is a smear, not legibility. (No backticks in this comment: the whole block is a JS
|
||||
template literal and a backtick would end it — which is what it just did.) */
|
||||
.approx-pin-note--floating-dark{background:rgba(20,24,31,0.82);}
|
||||
.legend-sheet-root>*{pointer-events:auto;}
|
||||
/* ...except the floating note. The rule above re-enables pointer events for every direct child of
|
||||
the root, at the same specificity as the note's own rule and AFTER it, so it was winning and the
|
||||
note would have swallowed a map drag across the full width just above the sheet. It is text with
|
||||
nothing tappable in it; stated here, after the rule that would otherwise override it. */
|
||||
.legend-sheet-root>.approx-pin-note--floating{pointer-events:none;}
|
||||
|
||||
/* ★ THE CREDIT STRIP (mobile pass 2026-09-30) REPLACES THE CAPPED LIFT BELOW. The corners used to rise by
|
||||
the sheet height capped at 48px, so an OPEN sheet (30%) still covered the credit and the Mapbox
|
||||
wordmark (measured at 390 on Simple Research: the top element at both was the sheet's content),
|
||||
|
|
@ -755,19 +736,12 @@ function snapTo(state) {
|
|||
// control (each control's own box, so the corner container's margins count and an empty corner counts
|
||||
// nothing). The engines add and resize these after load (the attribution loads its sources, compacts,
|
||||
// expands on tap), so it is re-measured on settle timers and whenever an observed control resizes.
|
||||
// The pin caption sits in the strip too, just above the controls (see the template), so the strip
|
||||
// is the controls plus the caption: --legend-credit-controls places the caption, --legend-credit-strip
|
||||
// places the sheet.
|
||||
const STRIP_VAR = '--legend-credit-strip'
|
||||
const CONTROLS_VAR = '--legend-credit-controls'
|
||||
const CORNERS = '.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right, .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right'
|
||||
let creditStripPx = 0
|
||||
let creditControlsPx = 0
|
||||
let _stripRO = null
|
||||
let _stripTimers = []
|
||||
const _stripObserved = new Set()
|
||||
// The caption shows outside the sheet whenever the sheet's own copy is not on screen.
|
||||
const floatingNoteShown = computed(() => !(legendMode.value === 'detail' && selectedPeopleGroup.value && legendState.value !== 'collapsed'))
|
||||
function measureCreditStrip() {
|
||||
const sheet = sheetRef.value
|
||||
const area = sheet && sheet.parentElement
|
||||
|
|
@ -782,22 +756,12 @@ function measureCreditStrip() {
|
|||
if (_stripRO && !_stripObserved.has(ctl)) { _stripRO.observe(ctl); _stripObserved.add(ctl) }
|
||||
}
|
||||
}
|
||||
const controls = strip > 0 ? Math.ceil(strip) + 2 : 0
|
||||
const note = area.querySelector(':scope > .approx-pin-note--floating')
|
||||
const noteH = note ? Math.ceil(note.getBoundingClientRect().height) : 0
|
||||
if (note && _stripRO && !_stripObserved.has(note)) { _stripRO.observe(note); _stripObserved.add(note) }
|
||||
// The caption's box, its 2px bottom margin and a 2px gap under the sheet.
|
||||
const px = controls + (noteH > 0 ? noteH + 4 : 0)
|
||||
if (controls !== creditControlsPx) {
|
||||
creditControlsPx = controls
|
||||
_sheetVarTarget.style.setProperty(CONTROLS_VAR, controls + 'px')
|
||||
}
|
||||
const px = strip > 0 ? Math.ceil(strip) + 2 : 0
|
||||
if (px !== creditStripPx) {
|
||||
creditStripPx = px
|
||||
_sheetVarTarget.style.setProperty(STRIP_VAR, px + 'px')
|
||||
}
|
||||
}
|
||||
watch(floatingNoteShown, () => nextTick(measureCreditStrip))
|
||||
onMounted(() => {
|
||||
if (typeof ResizeObserver !== 'undefined') _stripRO = new ResizeObserver(() => measureCreditStrip())
|
||||
_stripTimers = [0, 500, 1500, 3000, 6000, 12000].map((ms) => setTimeout(measureCreditStrip, ms))
|
||||
|
|
@ -808,7 +772,6 @@ onBeforeUnmount(() => {
|
|||
_stripObserved.clear()
|
||||
if (_sheetVarTarget && _sheetVarTarget.__legendSheetVarOwner === _observedSheet) {
|
||||
_sheetVarTarget.style.removeProperty(STRIP_VAR)
|
||||
_sheetVarTarget.style.removeProperty(CONTROLS_VAR)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -854,25 +817,10 @@ onBeforeUnmount(() => {
|
|||
<!-- Containment wrapper: ensures position:absolute children are clipped to the map area
|
||||
and never escape the shadow DOM host / staging frame. -->
|
||||
<div class="legend-sheet-root">
|
||||
<!-- ★ THE NOTE FLOATS OUTSIDE THE SHEET, IT DOES NOT SIT INSIDE IT. It used to be the last child
|
||||
of .legend-content, a natural-height sibling of a flex:1 options panel — so every pixel it
|
||||
took was a pixel the options' inner scroller lost, and the reader scrolled further inside
|
||||
the tree to reach the same rows. Out here it costs them nothing and the options keep the
|
||||
full sheet.
|
||||
★ UNDER THE SHEET, IN THE CREDIT STRIP, IN EVERY SHEET STATE (mobile pass 2026-09-30). It
|
||||
used to float above the sheet and hide while the sheet was collapsed; with the tree's copy
|
||||
switched off, a collapsed sheet showed the approximate-location caveat 0 times (measured at
|
||||
390 on Simple Research and Prayer Progress), and an open one put it under the pin-hint pill.
|
||||
It now shows whenever the sheet's own copy is not on screen: always, except in an open detail
|
||||
view, which keeps its copy inside the sheet. A collapsed detail view carries the same
|
||||
shared-point wording here. measureCreditStrip() counts its height into the strip. -->
|
||||
<ApproxPinNote
|
||||
v-if="floatingNoteShown"
|
||||
class="approx-pin-note--floating"
|
||||
:class="{ 'approx-pin-note--floating-dark': isDark }"
|
||||
:shared="legendMode === 'detail' ? selectedShared : []"
|
||||
:dark="isDark"
|
||||
/>
|
||||
<!-- ★ NO APPROXIMATE-LOCATION CAPTION ON A PHONE (mobile pass 2026-09-30): there is no room for it
|
||||
beside the legend, so it shows in no resting state (collapsed, or open with nothing selected). A
|
||||
tapped dot's detail view keeps its note inside the sheet, where it explains shared dots; the tree's
|
||||
own copy stays off (:pin-note="false" below). Desktop is unchanged. -->
|
||||
<!-- Floating mini-image: 16px above the open sheet's top edge (it shows only in that state). -->
|
||||
<div
|
||||
v-if="legendMode === 'detail' && selectedPeopleGroup && legendState === 'open' && miniImageUrl"
|
||||
|
|
|
|||
Loading…
Reference in a new issue