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:
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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]');
|
||||||
|
|||||||
Reference in New Issue
Block a user