feat(map): mobile fullscreen button on trip page map

Button in bottom-right of #trip-map (z-index:1000), hidden ≥769px.
Attribution moved to bottom-left to free the corner. Clicking toggles
.is-fullscreen on .home-map-col (position:fixed, 100dvh), locks body
scroll, and calls tripMap.resize() for MapLibre to re-render.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
2026-06-22 00:56:57 +02:00
parent 5e503cf3a5
commit 6f9538053c
2 changed files with 35 additions and 2 deletions
+12
View File
@@ -929,10 +929,22 @@ body::after {
} }
.home-map { .home-map {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.home-map-col.is-fullscreen {
position: fixed !important;
inset: 0;
z-index: 9999;
height: 100dvh !important;
}
.home-map-col.is-fullscreen .home-map {
height: 100dvh;
}
.home-feed-col { .home-feed-col {
padding: var(--space-8) var(--space-8); padding: var(--space-8) var(--space-8);
} }
+23 -2
View File
@@ -105,7 +105,14 @@
<div class="home-layout"> <div class="home-layout">
<div class="home-map-col"> <div class="home-map-col">
<div class="home-map" id="trip-map"></div> <div class="home-map" id="trip-map">
<button class="feed-map-fullscreen-btn" id="trip-map-fullscreen" aria-label="Expand map">
<svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
<path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
</svg>
<span class="feed-map-fs-close" aria-hidden="true">✕</span>
</button>
</div>
</div> </div>
<div class="home-feed-col"> <div class="home-feed-col">
@@ -251,8 +258,10 @@ var tripMap = new maplibregl.Map({
container: 'trip-map', container: 'trip-map',
style: MapUtils.MAP_STYLE, style: MapUtils.MAP_STYLE,
center: [20, 20], center: [20, 20],
zoom: 2 zoom: 2,
attributionControl: false
}); });
tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
tripMap.on('load', function () { tripMap.on('load', function () {
if (TRIP_ENTRIES.length === 0) { if (TRIP_ENTRIES.length === 0) {
@@ -300,6 +309,18 @@ tripMap.on('load', function () {
}); });
setTimeout(function () { tripMap.resize(); }, 100); setTimeout(function () { tripMap.resize(); }, 100);
(function() {
var fsBtn = document.getElementById('trip-map-fullscreen');
var mapCol = document.querySelector('.home-map-col');
if (!fsBtn || !mapCol) return;
fsBtn.addEventListener('click', function() {
var isFs = mapCol.classList.toggle('is-fullscreen');
fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
document.body.style.overflow = isFs ? 'hidden' : '';
setTimeout(function() { tripMap.resize(); }, 50);
});
})();
(function() { (function() {
var filterBtns = document.querySelectorAll('.trip-filter-btn'); var filterBtns = document.querySelectorAll('.trip-filter-btn');
var cards = document.querySelectorAll('[data-type]'); var cards = document.querySelectorAll('[data-type]');