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:
@@ -105,7 +105,14 @@
|
||||
|
||||
<div class="home-layout">
|
||||
<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 class="home-feed-col">
|
||||
@@ -251,8 +258,10 @@ var tripMap = new maplibregl.Map({
|
||||
container: 'trip-map',
|
||||
style: MapUtils.MAP_STYLE,
|
||||
center: [20, 20],
|
||||
zoom: 2
|
||||
zoom: 2,
|
||||
attributionControl: false
|
||||
});
|
||||
tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
|
||||
|
||||
tripMap.on('load', function () {
|
||||
if (TRIP_ENTRIES.length === 0) {
|
||||
@@ -300,6 +309,18 @@ tripMap.on('load', function () {
|
||||
});
|
||||
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() {
|
||||
var filterBtns = document.querySelectorAll('.trip-filter-btn');
|
||||
var cards = document.querySelectorAll('[data-type]');
|
||||
|
||||
Reference in New Issue
Block a user