diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index be87c9d..0f709ec 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -929,10 +929,22 @@ body::after { } .home-map { + position: relative; width: 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 { padding: var(--space-8) var(--space-8); } diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig index e1bcb8e..0a56b72 100644 --- a/themes/intotheeast/templates/trip.html.twig +++ b/themes/intotheeast/templates/trip.html.twig @@ -105,7 +105,14 @@
-
+
+ +
@@ -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]');