m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(map): fullscreen btn inside map div, attribution moved to bottom-left

Browse Source 
Button is back inside #feed-map with z-index:1000 to clear all MapLibre
layers. Attribution control disabled in constructor and re-added to
bottom-left so bottom-right is free for the fullscreen button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
Mischa
2026-06-22 00:20:23 +02:00
parent ce860cfef9
commit 5e503cf3a5
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+3 -2
View File
@@ -654,6 +654,7 @@ body::after {
} }
.feed-map { .feed-map {
position: relative;
height: 240px; height: 240px;
width: 100%; width: 100%;
} }
@@ -664,7 +665,7 @@ body::after {
.feed-map-fullscreen-btn { .feed-map-fullscreen-btn {
position: absolute; position: absolute;
top: var(--space-2); bottom: var(--space-2);
right: var(--space-2); right: var(--space-2);
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@@ -676,7 +677,7 @@ body::after {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 20; z-index: 1000;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: background 0.15s; transition: background 0.15s;
} }
themes/intotheeast/templates/dailies.html.twig
+11 -8
View File
@@ -37,13 +37,14 @@
{% if map_entries|length > 0 %} {% if map_entries|length > 0 %}
<div class="feed-map-wrap"> <div class="feed-map-wrap">
<div class="feed-map" id="feed-map"></div> <div class="feed-map" id="feed-map">
<button class="feed-map-fullscreen-btn" id="feed-map-fullscreen" aria-label="Expand map"> <button class="feed-map-fullscreen-btn" id="feed-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"> <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"/> <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
</svg> </svg>
<span class="feed-map-fs-close" aria-hidden="true">✕</span> <span class="feed-map-fs-close" aria-hidden="true">✕</span>
</button> </button>
</div>
<a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a> <a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
</div> </div>
@@ -59,8 +60,10 @@ var feedMap = new maplibregl.Map({
container: 'feed-map', container: 'feed-map',
style: MapUtils.MAP_STYLE, style: MapUtils.MAP_STYLE,
center: [20, 20], center: [20, 20],
zoom: 2 zoom: 2,
attributionControl: false
}); });
feedMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
feedMap.on('load', function () { feedMap.on('load', function () {
var bounds = new maplibregl.LngLatBounds(); var bounds = new maplibregl.LngLatBounds();