e5140f0b41
A back-to-top on mobile, next to the hamburger circle, for the people-group grid and the regions list. Both scroll their own container, so the container is a prop and this component owns only the affordance. It does not know where the circle is, and must not guess. .vtl-fab is 44px at a 12px inset today, and it lives in the layout outside every plugin's shadow root. Hardcoding 64px here would put the two on top of each other the day that changes, silently, on a phone. So the layout publishes --map-fab-beside alongside the clearance it already published, and this reads it — falling back to the plain inset when there is no circle, which is also the standalone case where nothing sets it. The circle's geometry is stated once, by the component that owns it. It also refuses to appear when it cannot work: visible tests that the container actually scrolls, not only that scrollTop is large. An arrow that does nothing when pressed is worse than no arrow, because the reader spends a tap finding out. And it honours prefers-reduced-motion, since a long list jumping is exactly the motion that rule exists for. The failure mode here is a var NAME drifting between publisher and consumer: nothing throws, the fallback applies, and the button quietly sits under the circle again. Checked rather than assumed — every published name is consumed and every consumed name is published. NEEDS EYES: I cannot see 44px or a hover state. The logic is small; whether it lands beside the circle rather than over it is a render question. |
||
|---|---|---|
| .. | ||
| charts | ||
| dashboards | ||
| hints | ||
| legends | ||
| map-controls | ||
| poster | ||
| qa | ||
| regions | ||
| search | ||
| tables | ||
| BackToTopButton.vue | ||
| PeopleGroupDetail.vue | ||
| README.md | ||
| ResearchMapFilterPanel.vue | ||
| ResearchMapSideMenu.vue | ||
| SideMenuDrawer.vue | ||
| ViewSelect.vue | ||
| WARNING.md | ||
library/components/ — shared Vue components
The map UI, built from parameterized pieces every app-profile reuses. Fix one here and every map benefits — never edit a shared component to customize one map.
library/components/
┌───────────────────────────────────────────┐
│ legends/ map-controls/ poster/ │
│ charts/ tables/ │
│ PeopleGroupDetail.vue SideMenuDrawer.vue │
│ ResearchMapFilterPanel.vue …SideMenu.vue │
└───────────────────────────────────────────┘
reused by every app-profile via @map/components/…
legends/,map-controls/,poster/each have their own README.- Every component uses
<script setup>, callsuseShadowStyles(), and reaches stores viainject('mapStore' | 'uiStore' | 'dataStore')— never a direct store import.
Full catalog + conventions:
../../documentation/architecture/components.md ·
per-file roles: ../../documentation/reference.md.