Compare commits

...
2 Commits
Author SHA1 Message Date
m038andClaude Opus 4.8 924cfc18e2 fix: point entry/story back button at the trip page
The back pills use history.back() when history exists, but fall back to
href=page.parent().url for direct-landing visitors (shared link, new tab).
After Phase 1 that fallback pointed at the retired /dailies (404) and
/stories (redirect) containers. Point it at the trip page (grandparent)
instead, which is where the feed now lives.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 13:58:16 +02:00
m038andClaude Opus 4.8 e2ba8f413a refactor: extract shared entry-map partial (Phase 2)
trip.html.twig and home.html.twig hand-wrote near-identical map-column
markup + a MapUtils.initEntryMap() invocation. Extract both into
partials/entry-map.html.twig, parameterised (map id, global, entries,
gpx config, story markers). Callers now pass resolved header values.

The map engine (js/map.js initEntryMap) is unchanged; emitted config is
byte-equivalent to the previous inline scripts. Verified: trip-map,
home-map and window.tripMap/homeMap Playwright tests pass; both pages 200.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-04 13:42:56 +02:00
5 changed files with 77 additions and 63 deletions
+2 -2
View File
@@ -1,12 +1,12 @@
{% extends 'partials/base.html.twig' %}
{% block content %}
<a class="back-pill entry-back-fixed" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
<a class="back-pill entry-back-fixed" href="{{ page.parent().parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
{% set entry = page %}
{% include 'partials/entry-journal.html.twig' %}
<footer class="entry-footer">
<a class="back-pill" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
<a class="back-pill" href="{{ page.parent().parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
</footer>
{% endblock %}
+12 -30
View File
@@ -60,16 +60,18 @@
{% endif %}
<div class="home-layout">
<div class="home-map-col">
<div class="home-map" id="home-map">
<button class="feed-map-fullscreen-btn" id="home-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>
{% include 'partials/entry-map.html.twig' with {
map_id: 'home-map',
map_global: 'homeMap',
entries: map_entries,
card_prefix: 'entry-',
story_markers: false,
gpx_urls: home_gpx_urls,
use_gpx: trip and trip.header.use_gpx is not null ? trip.header.use_gpx : true,
autoconnect: trip ? (trip.header.autoconnect ?? 'on') : 'on',
gpx_source_prefix: 'home-gpx',
journey_id: 'home-journey'
} only %}
{% if all_items|length == 0 %}
{% include 'partials/home-predeparture.html.twig' with {
@@ -90,26 +92,6 @@
{% endif %}
</div>
{% if map_entries|length > 0 %}
<script>
var HOME_ENTRIES = {{ map_entries|json_encode|raw }};
var HOME_GPX_URLS = {{ home_gpx_urls|json_encode|raw }};
var USE_GPX = {{ trip and trip.header.use_gpx is not null ? (trip.header.use_gpx ? 'true' : 'false') : 'true' }};
var AUTOCONNECT = "{{ trip ? (trip.header.autoconnect ?? 'on') : 'on' }}";
document.addEventListener('DOMContentLoaded', function() {
window.homeMap = MapUtils.initEntryMap({
container: 'home-map',
entries: HOME_ENTRIES,
cardPrefix: 'entry-',
fullscreen: { btnId: 'home-map-fullscreen', colSelector: '.home-map-col' },
gpx: { urls: HOME_GPX_URLS, use: USE_GPX, autoconnect: AUTOCONNECT, sourcePrefix: 'home-gpx', journeyId: 'home-journey' },
fit: { padding: 60, maxZoom: 11, singleZoom: 10 }
});
}); // DOMContentLoaded
</script>
{% endif %}
{% else %}
{# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}
@@ -0,0 +1,49 @@
{#
Entry-map partial — shared by trip.html.twig and home.html.twig (active-trip branch).
Renders the `.home-map-col` map column plus the thin MapUtils.initEntryMap()
invocation. The map engine itself lives in js/map.js (MapUtils.initEntryMap);
this partial only supplies markup + a parameterised call. Callers register the
map assets (map.css / map.js) themselves via their own {% block map_assets %}.
The map column always renders (home shows an empty map in pre-departure); the
init script only runs when there are entries to plot.
Required variables (via {% include ... with {...} only %}):
map_id — string: map div id + fullscreen-btn id prefix ('trip-map' | 'home-map')
map_global — string: window global the Map is assigned to ('tripMap' | 'homeMap')
entries — array: map entries [{lat, lng, slug, title, url, type?, force_connect, ...}]
card_prefix — string: scroll-to card id prefix ('entry-')
story_markers — bool: render story entries as diamond markers (trip: true, home: false)
gpx_urls — array: GPX file URLs
use_gpx — bool: whether to draw GPX tracks
autoconnect — string: journey connect mode ('on' | 'off' | 'manual' | ...)
gpx_source_prefix — string: MapLibre GPX source id prefix ('gpx' | 'home-gpx')
journey_id — string: journey layer id ('trip-journey' | 'home-journey')
#}
<div class="home-map-col">
<div class="home-map" id="{{ map_id }}">
<button class="feed-map-fullscreen-btn" id="{{ map_id }}-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>
{% if entries|length > 0 %}
<script>
document.addEventListener('DOMContentLoaded', function() {
window.{{ map_global }} = MapUtils.initEntryMap({
container: '{{ map_id }}',
entries: {{ entries|json_encode|raw }},
cardPrefix: '{{ card_prefix }}',
{% if story_markers %}storyMarkers: true,
{% endif %}fullscreen: { btnId: '{{ map_id }}-fullscreen', colSelector: '.home-map-col' },
gpx: { urls: {{ gpx_urls|json_encode|raw }}, use: {{ use_gpx ? 'true' : 'false' }}, autoconnect: "{{ autoconnect }}", sourcePrefix: '{{ gpx_source_prefix }}', journeyId: '{{ journey_id }}' },
fit: { padding: 60, maxZoom: 11, singleZoom: 10 }
});
}); // DOMContentLoaded
</script>
{% endif %}
+2 -2
View File
@@ -1,7 +1,7 @@
{% extends 'partials/base.html.twig' %}
{% block nav %}
<a class="story-escape" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
<a class="story-escape" href="{{ page.parent().parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
<span class="story-nav-title" id="story-nav-title" aria-hidden="true">{{ page.title }}</span>
{% endblock %}
@@ -59,7 +59,7 @@
{{ page.content|raw }}
<footer class="story-footer">
<a class="back-pill" href="{{ page.parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
<a class="back-pill" href="{{ page.parent().parent().url }}" onclick="if(history.length > 1){ history.back(); return false; }">← Back</a>
</footer>
</div>
+12 -29
View File
@@ -56,16 +56,18 @@
{% endfor %}
<div class="home-layout">
<div class="home-map-col">
<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>
{% include 'partials/entry-map.html.twig' with {
map_id: 'trip-map',
map_global: 'tripMap',
entries: map_entries,
card_prefix: 'entry-',
story_markers: true,
gpx_urls: gpx_urls,
use_gpx: page.header.use_gpx ?? true,
autoconnect: page.header.autoconnect ?? 'on',
gpx_source_prefix: 'gpx',
journey_id: 'trip-journey'
} only %}
{% include 'partials/trip-feed-col.html.twig' with {
trip_page: page,
@@ -80,25 +82,6 @@
} only %}
</div>
<script>
var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
var GPX_URLS = {{ gpx_urls|json_encode|raw }};
var USE_GPX = {{ page.header.use_gpx ?? true ? 'true' : 'false' }};
var AUTOCONNECT = "{{ page.header.autoconnect ?? 'on' }}";
document.addEventListener('DOMContentLoaded', function() {
window.tripMap = MapUtils.initEntryMap({
container: 'trip-map',
entries: TRIP_ENTRIES,
cardPrefix: 'entry-',
storyMarkers: true,
fullscreen: { btnId: 'trip-map-fullscreen', colSelector: '.home-map-col' },
gpx: { urls: GPX_URLS, use: USE_GPX, autoconnect: AUTOCONNECT, sourcePrefix: 'gpx', journeyId: 'trip-journey' },
fit: { padding: 60, maxZoom: 11, singleZoom: 10 }
});
}); // DOMContentLoaded
</script>
<button class="story-totop" id="trip-totop" aria-label="Back to top">↑ Top</button>
{% endblock %}