fix(map): fullscreen btn inside map div, attribution moved to bottom-left
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:
@@ -654,6 +654,7 @@ body::after {
|
||||
}
|
||||
|
||||
.feed-map {
|
||||
position: relative;
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -664,7 +665,7 @@ body::after {
|
||||
|
||||
.feed-map-fullscreen-btn {
|
||||
position: absolute;
|
||||
top: var(--space-2);
|
||||
bottom: var(--space-2);
|
||||
right: var(--space-2);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
@@ -676,7 +677,7 @@ body::after {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 20;
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
@@ -37,13 +37,14 @@
|
||||
|
||||
{% if map_entries|length > 0 %}
|
||||
<div class="feed-map-wrap">
|
||||
<div class="feed-map" id="feed-map"></div>
|
||||
<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">
|
||||
<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 class="feed-map" id="feed-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">
|
||||
<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>
|
||||
<a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
|
||||
</div>
|
||||
|
||||
@@ -59,8 +60,10 @@ var feedMap = new maplibregl.Map({
|
||||
container: 'feed-map',
|
||||
style: MapUtils.MAP_STYLE,
|
||||
center: [20, 20],
|
||||
zoom: 2
|
||||
zoom: 2,
|
||||
attributionControl: false
|
||||
});
|
||||
feedMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
|
||||
|
||||
feedMap.on('load', function () {
|
||||
var bounds = new maplibregl.LngLatBounds();
|
||||
|
||||
Reference in New Issue
Block a user