docs: add mobile-ux session learnings and shared partial architecture

2026-06-22 01:41:23 +02:00
parent be063ad5b4
commit b9f9f4ce9c
2 changed files with 139 additions and 0 deletions
@@ -0,0 +1,117 @@
+# Mobile UX Session Learnings — 2026-06-22
+
+Discoveries from the mobile polish session (stat scaling, map fullscreen, panel toggles, shared partials).
+
+## MapLibre GL JS v4 — Attribution starts expanded despite compact: true
+
+**Problem:** `new maplibregl.AttributionControl({ compact: true })` renders a `<details>` element. In MapLibre v4, this element has `open` set after `map.on('load')` fires, so the attribution panel starts expanded even though `compact: true` was passed.
+
+**Fix:** In the `load` handler, explicitly remove the `open` attribute:
+```js
+map.on('load', function () {
+    var attrib = map.getContainer().querySelector('.maplibregl-ctrl-attrib');
+    if (attrib) attrib.removeAttribute('open');
+});
+```
+
+**Also:** To avoid the default attribution control conflicting with a custom button in `bottom-right`, disable it in the constructor and add it manually to `bottom-left`:
+```js
+var map = new maplibregl.Map({ ..., attributionControl: false });
+map.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
+```
+
+## CSS Panel Animation — max-height beats grid-template-rows: 0fr
+
+**Problem:** `grid-template-rows: 0fr → 1fr` transition fails when the direct grid child has `overflow: hidden`. The child creates a Block Formatting Context (BFC) that prevents `0fr` from collapsing to zero height.
+
+**Fix:** Use `max-height` transition on the outer container:
+```css
+.panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s ease;
+}
+.panel.is-open {
+    max-height: 600px;
+}
+```
+
+## Fluid Font Sizing with clamp()
+
+```css
+.stat-value {
+    font-size: clamp(2rem, 6vw, var(--text-3xl));
+}
+```
+
+- `clamp(min, preferred, max)`: scales linearly between min and max
+- `6vw` at 333px viewport = 20px = 1.25rem, but floor is 2rem (32px)
+- Keep labels at `--text-xs` (0.75rem) intentionally — the contrast makes values pop
+
+## CSS Grid — Spanning the Lone Last Item in a 2-Column Grid
+
+```css
+@media (max-width: 600px) {
+    .my-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .my-grid .item:last-child:nth-child(odd) { grid-column: 1 / -1; }
+}
+```
+
+- `minmax(0, 1fr)` — strictly equal columns (bare `1fr` has a hidden `auto` minimum)
+- `:last-child:nth-child(odd)` — matches an item that is both last and in an odd position
+
+## PhotoSwipe v5 — Correct Element for CSS Animations
+
+**Problem:** `pswp.currSlide.el` is `undefined` in PhotoSwipe v5.
+
+**Fix:** Use `pswp.currSlide.container` — the DOM wrapper for the current slide:
+```js
+var el = pswp.currSlide && pswp.currSlide.container;
+if (!el) return;
+el.classList.add('pswp-key-from-right');
+```
+
+## Mobile Fullscreen Map Pattern
+
+```css
+.map-col.is-fullscreen {
+    position: fixed !important;
+    inset: 0;
+    z-index: 9999;
+    height: 100dvh !important;
+}
+```
+
+```js
+fsBtn.addEventListener('click', function() {
+    var isFs = mapCol.classList.toggle('is-fullscreen');
+    document.body.style.overflow = isFs ? 'hidden' : '';
+    setTimeout(function() { map.resize(); }, 50);
+});
+```
+
+**Marker click while fullscreen:** Exit fullscreen first, then scroll after the transition:
+```js
+if (isFullscreen) {
+    fsBtn.click();
+    setTimeout(scrollAndHighlight, 450);
+} else {
+    scrollAndHighlight();
+}
+```
+
+## Shared Twig Partial Pattern
+
+```twig
+{% include 'partials/feed-map.html.twig' with {
+    'map_entries': map_entries,
+    'map_id': 'feed-map',
+    'map_var': 'feedMap',
+    'link_href': page.parent().url ~ '/map',
+    'card_prefix': 'entry-',
+    'trip_page': trip_page,
+    'show_journey': true
+} only %}
+```
+
+Grav's global Twig functions (`url()`, `theme_var()`) remain available with `only`. Only parent template variables are excluded.