fix(map): move fullscreen button outside feed-map div, top-right corner
MapLibre's attribution button occupies bottom-right of the container. Moving our button out of the map div avoids MapLibre's DOM entirely, and top-right is clear of all default MapLibre controls. Position anchor moves to feed-map-wrap (position:relative). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
@@ -645,6 +645,7 @@ body::after {
|
|||||||
/* ── Mini-map on tracker feed ────────────────────────────────────────────────── */
|
/* ── Mini-map on tracker feed ────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.feed-map-wrap {
|
.feed-map-wrap {
|
||||||
|
position: relative;
|
||||||
margin-bottom: var(--space-10);
|
margin-bottom: var(--space-10);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -653,7 +654,6 @@ body::after {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.feed-map {
|
.feed-map {
|
||||||
position: relative;
|
|
||||||
height: 240px;
|
height: 240px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -664,7 +664,7 @@ body::after {
|
|||||||
|
|
||||||
.feed-map-fullscreen-btn {
|
.feed-map-fullscreen-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: var(--space-2);
|
top: var(--space-2);
|
||||||
right: var(--space-2);
|
right: var(--space-2);
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
|
|||||||
@@ -37,14 +37,13 @@
|
|||||||
|
|
||||||
{% 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 class="feed-map" id="feed-map"></div>
|
||||||
<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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user