Compare commits
30 Commits
fdaed1033a
...
77dd99ee2b
| Author | SHA1 | Date | |
|---|---|---|---|
 m038
|
77dd99ee2b | ||
|
m038
|
857f33be54 | ||
|
m038
|
320a98893a | ||
|
m038
|
e07fb3a72a | ||
|
m038
|
1bb588d1d2 | ||
|
m038
|
aa1cb7411c | ||
|
m038
|
5fe8c015f1 | ||
|
m038
|
6f9538053c | ||
|
m038
|
5e503cf3a5 | ||
|
m038
|
ce860cfef9 | ||
|
m038
|
989755d33c | ||
|
m038
|
9ddf52c635 | ||
|
m038
|
9b62f79301 | ||
|
m038
|
64aa9ec023 | ||
|
m038
|
9bfd96af2c | ||
|
m038
|
000af6934f | ||
|
m038
|
c94e36a861 | ||
|
m038
|
2c831628b2 | ||
|
m038
|
02fc666661 | ||
|
m038
|
c3cb224402 | ||
|
m038
|
2b8ea1963b | ||
|
m038
|
f94880e758 | ||
|
m038
|
b6142cee44 | ||
|
m038
|
53bfe5955d | ||
|
m038
|
9f503c011d | ||
|
m038
|
415d95ed47 | ||
|
m038
|
e787544a2b | ||
|
m038
|
9f94164c61 | ||
|
m038
|
608ccfdecd | ||
|
m038
|
933652fd57 |
@@ -217,6 +217,7 @@ body::after {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -338,7 +339,8 @@ body::after {
|
||||
.journal-post-body p:last-child { margin-bottom: 0; }
|
||||
|
||||
.journal-post.is-highlighted,
|
||||
.entry-card.is-highlighted {
|
||||
.entry-card.is-highlighted,
|
||||
.story-card.is-highlighted {
|
||||
animation: card-highlight 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
@@ -458,6 +460,19 @@ body::after {
|
||||
/* iOS Safari: 100vh freezes when address bar hides; dvh tracks the live viewport */
|
||||
.pswp { height: 100dvh; }
|
||||
|
||||
/* Keyboard arrow navigation slide-in animations */
|
||||
.pswp-key-from-right { animation: pswpKeyFromRight 0.35s cubic-bezier(0.4, 0, 0.22, 1) both; }
|
||||
.pswp-key-from-left { animation: pswpKeyFromLeft 0.35s cubic-bezier(0.4, 0, 0.22, 1) both; }
|
||||
|
||||
@keyframes pswpKeyFromRight {
|
||||
from { transform: translateX(48px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
@keyframes pswpKeyFromLeft {
|
||||
from { transform: translateX(-48px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── Map page ────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.map-page .site-main { max-width: none; padding: 0; }
|
||||
@@ -587,7 +602,7 @@ body::after {
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-3xl);
|
||||
font-size: clamp(2rem, 6vw, var(--text-3xl));
|
||||
font-weight: 400;
|
||||
color: var(--color-accent);
|
||||
line-height: 1.1;
|
||||
@@ -631,6 +646,7 @@ body::after {
|
||||
/* ── Mini-map on tracker feed ────────────────────────────────────────────────── */
|
||||
|
||||
.feed-map-wrap {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-10);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
@@ -639,6 +655,7 @@ body::after {
|
||||
}
|
||||
|
||||
.feed-map {
|
||||
position: relative;
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -647,6 +664,53 @@ body::after {
|
||||
.feed-map { height: 300px; }
|
||||
}
|
||||
|
||||
.feed-map-fullscreen-btn {
|
||||
position: absolute;
|
||||
bottom: var(--space-2);
|
||||
right: var(--space-2);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: var(--color-canvas);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-ink);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.feed-map-fullscreen-btn:hover { background: var(--color-paper); }
|
||||
|
||||
.feed-map-fs-close { display: none; font-size: 1rem; line-height: 1; }
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.feed-map-fullscreen-btn { display: none; }
|
||||
}
|
||||
|
||||
.feed-map-wrap.is-fullscreen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.feed-map-wrap.is-fullscreen .feed-map {
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
.feed-map-wrap.is-fullscreen .feed-map-link { display: none; }
|
||||
|
||||
.feed-map-wrap.is-fullscreen .feed-map-fs-open,
|
||||
.home-map-col.is-fullscreen .feed-map-fs-open { display: none; }
|
||||
.feed-map-wrap.is-fullscreen .feed-map-fs-close,
|
||||
.home-map-col.is-fullscreen .feed-map-fs-close { display: block; }
|
||||
|
||||
.feed-map-link {
|
||||
display: block;
|
||||
text-align: right;
|
||||
@@ -868,10 +932,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);
|
||||
}
|
||||
@@ -897,6 +973,12 @@ body::after {
|
||||
|
||||
/* ── Trip page filter bar ────────────────────────────────────────────────────── */
|
||||
|
||||
.feed-sort-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.trip-filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -939,6 +1021,46 @@ body::after {
|
||||
background: var(--color-accent-light);
|
||||
}
|
||||
|
||||
.trip-panel-toggles {
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.trip-panel-toggle {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-full);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--color-ink-muted);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.trip-panel-toggle:hover {
|
||||
color: var(--color-ink);
|
||||
border-color: var(--color-ink-muted);
|
||||
}
|
||||
.trip-panel-toggle.is-active {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-accent-light);
|
||||
}
|
||||
|
||||
.trip-panel-caret {
|
||||
display: inline-block;
|
||||
font-size: 0.75em;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.trip-panel-toggle.is-active .trip-panel-caret { transform: rotate(180deg); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home-layout { display: flex; flex-direction: column; }
|
||||
.home-map-col { position: static; height: 40vh; align-self: stretch; }
|
||||
@@ -1089,12 +1211,51 @@ body::after {
|
||||
|
||||
/* ── Trip page inline stats block ───────────────────────────────────────────── */
|
||||
|
||||
.trip-stats-block {
|
||||
.trip-stats-block,
|
||||
.trip-cycling-block {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
transition: max-height 0.4s ease, margin-bottom 0.35s ease;
|
||||
}
|
||||
|
||||
.trip-stats-block.is-open,
|
||||
.trip-cycling-block.is-open {
|
||||
max-height: 600px;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.trip-panel-inner {
|
||||
background: var(--color-canvas);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.trip-panel-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: var(--space-6);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-full);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-ink-muted);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.trip-panel-close:hover {
|
||||
color: var(--color-ink);
|
||||
border-color: var(--color-ink-muted);
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.trip-panel-close { display: none; }
|
||||
}
|
||||
|
||||
.trip-stats-grid {
|
||||
@@ -1105,7 +1266,7 @@ body::after {
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.trip-stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.trip-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
.trip-stats-countries {
|
||||
@@ -1121,13 +1282,6 @@ body::after {
|
||||
|
||||
/* ── Trip page cycling panel ─────────────────────────────────────────────────── */
|
||||
|
||||
.trip-cycling-block {
|
||||
background: var(--color-canvas);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.trip-cycling-header {
|
||||
display: flex;
|
||||
@@ -1153,7 +1307,8 @@ body::after {
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.trip-cycling-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.trip-cycling-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.trip-cycling-grid .stat-block:last-child:nth-child(odd) { grid-column: 1 / -1; }
|
||||
}
|
||||
|
||||
/* ── Story pages ─────────────────────────────────────────────────────────── */
|
||||
@@ -1724,12 +1879,18 @@ body::after {
|
||||
|
||||
/* ── Stories listing ──────────────────────────────────────── */
|
||||
.stories-listing { padding: var(--space-10) 0; }
|
||||
.stories-listing__header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-10);
|
||||
}
|
||||
.stories-listing__heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 400;
|
||||
color: var(--color-ink);
|
||||
margin-bottom: var(--space-10);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.stories-grid {
|
||||
display: grid;
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
{% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
|
||||
{% endfor %}
|
||||
|
||||
{# No sort needed: page.collection() returns journal entries date-descending per dailies.md config. Dailies has no stories, so no re-merge sort is needed. #}
|
||||
{# page.collection() returns date-descending; reverse to match ascending default on trip page. #}
|
||||
{% set all_items = all_items|reverse %}
|
||||
|
||||
{# Collect GPS entries for mini-map #}
|
||||
{% set map_entries = [] %}
|
||||
@@ -34,142 +35,27 @@
|
||||
|
||||
{% set trip_page = page.parent() %}
|
||||
|
||||
{% if map_entries|length > 0 %}
|
||||
<div class="feed-map-wrap">
|
||||
<div class="feed-map" id="feed-map"></div>
|
||||
<a class="feed-map-link" href="{{ page.parent().url }}/map">View full map →</a>
|
||||
{% include 'partials/feed-map.html.twig' with {
|
||||
'map_entries': map_entries,
|
||||
'map_id': 'feed-map',
|
||||
'map_var': 'feedMap',
|
||||
'link_href': page.parent().url ~ '/map',
|
||||
'card_prefix': 'entry-',
|
||||
'trip_page': trip_page,
|
||||
'show_journey': true
|
||||
} only %}
|
||||
|
||||
<div class="feed-sort-bar">
|
||||
<button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
|
||||
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
|
||||
<script>
|
||||
var FEED_ENTRIES = {{ map_entries|json_encode|raw }};
|
||||
{% set _ac = trip_page.header.autoconnect ?? 'on' %}
|
||||
var AUTOCONNECT = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
|
||||
|
||||
var feedMap = new maplibregl.Map({
|
||||
container: 'feed-map',
|
||||
style: MapUtils.MAP_STYLE,
|
||||
center: [20, 20],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
feedMap.on('load', function () {
|
||||
var bounds = new maplibregl.LngLatBounds();
|
||||
|
||||
FEED_ENTRIES.forEach(function (entry, i) {
|
||||
var isLatest = (i === FEED_ENTRIES.length - 1);
|
||||
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
||||
bounds.extend(lngLat);
|
||||
|
||||
var el = MapUtils.createDotMarker(isLatest);
|
||||
el.dataset.url = entry.url;
|
||||
var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
|
||||
.setLngLat(lngLat)
|
||||
.setHTML('<span class="map-tip">' + entry.title + '</span>');
|
||||
el.addEventListener('mouseenter', function () { popup.addTo(feedMap); });
|
||||
el.addEventListener('mouseleave', function () { popup.remove(); });
|
||||
el.addEventListener('click', function () { window.location.href = entry.url; });
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(feedMap);
|
||||
});
|
||||
|
||||
if (FEED_ENTRIES.length === 1) {
|
||||
feedMap.jumpTo({ center: [parseFloat(FEED_ENTRIES[0].lng), parseFloat(FEED_ENTRIES[0].lat)], zoom: 10 });
|
||||
} else {
|
||||
feedMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
|
||||
}
|
||||
|
||||
var segments = MapUtils.buildJourneySegments(FEED_ENTRIES, { connectMode: AUTOCONNECT });
|
||||
MapUtils.addJourneySegments(feedMap, segments, 'feed-journey');
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<div class="feed">
|
||||
{% if all_items|length > 0 %}
|
||||
{% for item in all_items %}
|
||||
{% set entry = item.page %}
|
||||
|
||||
{% if item.type == 'journal' %}
|
||||
{% set weather_icons = {
|
||||
'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
|
||||
'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
|
||||
'Snow': '❄️', 'Thunderstorm': '⛈️'
|
||||
} %}
|
||||
<article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
||||
<header class="journal-post-header">
|
||||
<h2 class="journal-post-title">{{ entry.title }}</h2>
|
||||
<p class="journal-post-meta">
|
||||
<a class="journal-post-permalink" href="{{ entry.url }}">
|
||||
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
||||
</a>
|
||||
{% if entry.header.location_city or entry.header.location_country %}
|
||||
<span class="journal-post-location">
|
||||
· 📍
|
||||
{%- set _loc = [] -%}
|
||||
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
||||
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
||||
{{ _loc|join(', ') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if entry.header.weather_desc %}
|
||||
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{% set images = entry.media.images %}
|
||||
{% if images|length > 0 %}
|
||||
{% set firstImg = images|first %}
|
||||
{% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
|
||||
<div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
|
||||
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
|
||||
{% for img in images %}
|
||||
<a class="journal-photo-slide"
|
||||
href="{{ img.url }}"
|
||||
data-pswp-width="{{ img.width }}"
|
||||
data-pswp-height="{{ img.height }}"
|
||||
style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
|
||||
target="_blank">
|
||||
<img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if images|length > 1 %}
|
||||
<div class="journal-photo-dots" aria-hidden="true">
|
||||
{% for img in images %}
|
||||
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<button class="journal-photo-expand" aria-label="View full size">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
||||
</article>
|
||||
{% include 'partials/entry-journal.html.twig' %}
|
||||
{% else %}
|
||||
{% set hero = null %}
|
||||
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
||||
{% set hero = entry.media[entry.header.hero_image] %}
|
||||
{% elseif entry.media.images|length > 0 %}
|
||||
{% set hero = entry.media.images|first %}
|
||||
{% endif %}
|
||||
<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
|
||||
{% if hero %}
|
||||
<div class="entry-card-photo entry-card-photo--story">
|
||||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="entry-card-body">
|
||||
<span class="story-badge">✦ Story</span>
|
||||
<h2 class="entry-title">{{ entry.title }}</h2>
|
||||
</div>
|
||||
</a>
|
||||
{% include 'partials/entry-story.html.twig' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
@@ -185,6 +71,33 @@ const lightbox = new PhotoSwipeLightbox({
|
||||
children: 'a.journal-photo-slide',
|
||||
pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
|
||||
});
|
||||
lightbox.on('afterOpen', function () {
|
||||
var pswp = lightbox.pswp;
|
||||
var keyDir = 0;
|
||||
var clearTimer = null;
|
||||
function onKey(e) {
|
||||
if (e.key === 'ArrowRight') keyDir = 1;
|
||||
else if (e.key === 'ArrowLeft') keyDir = -1;
|
||||
else keyDir = 0;
|
||||
}
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
pswp.on('change', function () {
|
||||
if (!keyDir) return;
|
||||
var dir = keyDir;
|
||||
keyDir = 0;
|
||||
var el = pswp.currSlide && pswp.currSlide.container;
|
||||
if (!el) return;
|
||||
el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
|
||||
el.offsetWidth;
|
||||
el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
|
||||
clearTimeout(clearTimer);
|
||||
clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
|
||||
});
|
||||
pswp.on('close', function () {
|
||||
document.removeEventListener('keydown', onKey, true);
|
||||
clearTimeout(clearTimer);
|
||||
});
|
||||
});
|
||||
lightbox.init();
|
||||
|
||||
/* Per-strip: dot sync + expand button → tap the visible slide to trigger pswp */
|
||||
@@ -213,4 +126,21 @@ document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
var sortBtn = document.getElementById('feed-sort-toggle');
|
||||
if (!sortBtn) return;
|
||||
var feed = document.querySelector('.feed');
|
||||
var ascending = true;
|
||||
|
||||
sortBtn.addEventListener('click', function() {
|
||||
ascending = !ascending;
|
||||
var entries = Array.from(feed.querySelectorAll('[data-type]'));
|
||||
entries.reverse().forEach(function(el) { feed.appendChild(el); });
|
||||
sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
|
||||
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
|
||||
sortBtn.classList.toggle('is-active', !ascending);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
|
||||
{% set trip_route = config.site.active_trip %}
|
||||
{% set trip = grav.pages.find(trip_route) %}
|
||||
|
||||
@@ -65,73 +66,10 @@
|
||||
{% if all_items|length > 0 %}
|
||||
{% for item in all_items %}
|
||||
{% set entry = item.page %}
|
||||
|
||||
{% if item.type == 'journal' %}
|
||||
{% set weather_icons = {
|
||||
'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
|
||||
'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
|
||||
'Snow': '❄️', 'Thunderstorm': '⛈️'
|
||||
} %}
|
||||
<article class="journal-post" id="entry-{{ entry.slug }}" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
||||
<header class="journal-post-header">
|
||||
<h2 class="journal-post-title">{{ entry.title }}</h2>
|
||||
<p class="journal-post-meta">
|
||||
<a class="journal-post-permalink" href="{{ entry.url }}">
|
||||
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
||||
</a>
|
||||
{% if entry.header.location_city or entry.header.location_country %}
|
||||
<span class="journal-post-location">
|
||||
· 📍
|
||||
{%- set _loc = [] -%}
|
||||
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
||||
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
||||
{{ _loc|join(', ') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if entry.header.weather_desc %}
|
||||
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{% set images = entry.media.images %}
|
||||
{% if images|length > 0 %}
|
||||
<div class="journal-photo-strip" data-slides="{{ images|length }}">
|
||||
{% for img in images %}
|
||||
<div class="journal-photo-slide">
|
||||
<img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if images|length > 1 %}
|
||||
<div class="journal-photo-dots" aria-hidden="true">
|
||||
{% for img in images %}
|
||||
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
||||
</article>
|
||||
{% include 'partials/entry-journal.html.twig' %}
|
||||
{% else %}
|
||||
{% set hero = null %}
|
||||
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
||||
{% set hero = entry.media[entry.header.hero_image] %}
|
||||
{% elseif entry.media.images|length > 0 %}
|
||||
{% set hero = entry.media.images|first %}
|
||||
{% endif %}
|
||||
<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" href="{{ entry.url }}">
|
||||
{% if hero %}
|
||||
<div class="entry-card-photo entry-card-photo--story">
|
||||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="entry-card-body">
|
||||
<span class="story-badge">✦ Story</span>
|
||||
<h2 class="entry-title">{{ entry.title }}</h2>
|
||||
</div>
|
||||
</a>
|
||||
{% include 'partials/entry-story.html.twig' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
@@ -180,7 +118,8 @@ homeMap.on('load', function () {
|
||||
el.addEventListener('mouseleave', function () { popup.remove(); });
|
||||
el.addEventListener('click', function () {
|
||||
var card = document.getElementById('entry-' + entry.slug);
|
||||
if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
if (!card) return;
|
||||
window.location.hash = 'entry-' + entry.slug;
|
||||
});
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(homeMap);
|
||||
@@ -199,6 +138,68 @@ homeMap.on('load', function () {
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<script type="module">
|
||||
import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
|
||||
const lightbox = new PhotoSwipeLightbox({
|
||||
gallery: '.pswp-gallery',
|
||||
children: 'a.journal-photo-slide',
|
||||
pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
|
||||
});
|
||||
lightbox.on('afterOpen', function () {
|
||||
var pswp = lightbox.pswp;
|
||||
var keyDir = 0;
|
||||
var clearTimer = null;
|
||||
function onKey(e) {
|
||||
if (e.key === 'ArrowRight') keyDir = 1;
|
||||
else if (e.key === 'ArrowLeft') keyDir = -1;
|
||||
else keyDir = 0;
|
||||
}
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
pswp.on('change', function () {
|
||||
if (!keyDir) return;
|
||||
var dir = keyDir;
|
||||
keyDir = 0;
|
||||
var el = pswp.currSlide && pswp.currSlide.container;
|
||||
if (!el) return;
|
||||
el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
|
||||
el.offsetWidth;
|
||||
el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
|
||||
clearTimeout(clearTimer);
|
||||
clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
|
||||
});
|
||||
pswp.on('close', function () {
|
||||
document.removeEventListener('keydown', onKey, true);
|
||||
clearTimeout(clearTimer);
|
||||
});
|
||||
});
|
||||
lightbox.init();
|
||||
|
||||
document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
|
||||
var strip = wrap.querySelector('.journal-photo-strip');
|
||||
var slides = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
|
||||
var expandBtn = wrap.querySelector('.journal-photo-expand');
|
||||
var article = wrap.closest('article');
|
||||
var dots = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
|
||||
var visibleIdx = 0;
|
||||
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) {
|
||||
if (!e.isIntersecting) return;
|
||||
visibleIdx = slides.indexOf(e.target);
|
||||
dots.forEach(function (d) { d.classList.remove('is-active'); });
|
||||
if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
|
||||
});
|
||||
}, { root: strip, threshold: 0.5 });
|
||||
slides.forEach(function (s) { io.observe(s); });
|
||||
|
||||
if (expandBtn && slides.length) {
|
||||
expandBtn.addEventListener('click', function () {
|
||||
slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% else %}
|
||||
{# ══════════════════════════════════════════════════════ BETWEEN-TRIPS MODE #}
|
||||
|
||||
|
||||
@@ -66,7 +66,8 @@
|
||||
controls.className = 'strip-controls';
|
||||
controls.appendChild(prev);
|
||||
controls.appendChild(next);
|
||||
dots.insertAdjacentElement('afterend', controls);
|
||||
var wrap = strip.closest('.journal-photo-wrap');
|
||||
(wrap || dots).insertAdjacentElement('afterend', controls);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
{% set weather_icons = {
|
||||
'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
|
||||
'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
|
||||
'Snow': '❄️', 'Thunderstorm': '⛈️'
|
||||
} %}
|
||||
<article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
||||
<header class="journal-post-header">
|
||||
<h2 class="journal-post-title">{{ entry.title }}</h2>
|
||||
<p class="journal-post-meta">
|
||||
<a class="journal-post-permalink" href="{{ entry.url }}">
|
||||
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
||||
</a>
|
||||
{% if entry.header.location_city or entry.header.location_country %}
|
||||
<span class="journal-post-location">
|
||||
· 📍
|
||||
{%- set _loc = [] -%}
|
||||
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
||||
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
||||
{{ _loc|join(', ') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if entry.header.weather_desc %}
|
||||
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{% set images = entry.media.images %}
|
||||
{% if images|length > 0 %}
|
||||
{% set firstImg = images|first %}
|
||||
{% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
|
||||
<div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
|
||||
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}" data-slides="{{ images|length }}">
|
||||
{% for img in images %}
|
||||
<a class="journal-photo-slide"
|
||||
href="{{ img.url }}"
|
||||
data-pswp-width="{{ img.width }}"
|
||||
data-pswp-height="{{ img.height }}"
|
||||
style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
|
||||
target="_blank">
|
||||
<img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if images|length > 1 %}
|
||||
<div class="journal-photo-dots" aria-hidden="true">
|
||||
{% for img in images %}
|
||||
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<button class="journal-photo-expand" aria-label="View full size">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
||||
</article>
|
||||
@@ -0,0 +1,17 @@
|
||||
{% set hero = null %}
|
||||
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
||||
{% set hero = entry.media[entry.header.hero_image] %}
|
||||
{% elseif entry.media.images|length > 0 %}
|
||||
{% set hero = entry.media.images|first %}
|
||||
{% endif %}
|
||||
<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
|
||||
{% if hero %}
|
||||
<div class="entry-card-photo entry-card-photo--story">
|
||||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="entry-card-body">
|
||||
<span class="story-badge">✦ Story</span>
|
||||
<h2 class="entry-title">{{ entry.title }}</h2>
|
||||
</div>
|
||||
</a>
|
||||
@@ -0,0 +1,117 @@
|
||||
{#
|
||||
Feed mini-map partial — shared by dailies.html.twig and stories.html.twig.
|
||||
|
||||
Required variables (via {% include ... with {...} only %}):
|
||||
map_entries — array: [{lat, lng, title, slug, url, type, force_connect, transport_mode}]
|
||||
map_id — string: HTML id for the map div (e.g. 'feed-map', 'stories-map')
|
||||
map_var — string: JS variable name for the MapLibre Map (e.g. 'feedMap', 'storiesMap')
|
||||
link_href — string|null: URL for "View full map" link; null/empty hides the link
|
||||
card_prefix — string: prefix for scroll-to card IDs ('entry-' or 'story-')
|
||||
trip_page — Grav page: trip page for autoconnect setting (used when show_journey is true)
|
||||
show_journey — bool: whether to draw the route connector line between markers
|
||||
#}
|
||||
{% if map_entries|length > 0 %}
|
||||
<div class="feed-map-wrap">
|
||||
<div class="feed-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>
|
||||
{% if link_href %}
|
||||
<a class="feed-map-link" href="{{ link_href }}">View full map →</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
|
||||
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
|
||||
<script>
|
||||
{% set js_suffix = map_id|replace({'-': '_'})|upper %}
|
||||
var MAP_ENTRIES_{{ js_suffix }} = {{ map_entries|json_encode|raw }};
|
||||
{% if show_journey %}
|
||||
{% set _ac = trip_page ? (trip_page.header.autoconnect ?? 'on') : 'on' %}
|
||||
var AUTOCONNECT_{{ js_suffix }} = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
|
||||
{% endif %}
|
||||
|
||||
var {{ map_var }} = new maplibregl.Map({
|
||||
container: '{{ map_id }}',
|
||||
style: MapUtils.MAP_STYLE,
|
||||
center: [20, 20],
|
||||
zoom: 2,
|
||||
attributionControl: false
|
||||
});
|
||||
{{ map_var }}.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
|
||||
|
||||
{{ map_var }}.on('load', function () {
|
||||
var attrib = {{ map_var }}.getContainer().querySelector('.maplibregl-ctrl-attrib');
|
||||
if (attrib) attrib.removeAttribute('open');
|
||||
|
||||
var bounds = new maplibregl.LngLatBounds();
|
||||
var entries = MAP_ENTRIES_{{ js_suffix }};
|
||||
|
||||
entries.forEach(function (entry, i) {
|
||||
var isLatest = (entry.type !== 'story') && (i === entries.length - 1);
|
||||
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
||||
bounds.extend(lngLat);
|
||||
|
||||
var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
|
||||
el.dataset.url = entry.url;
|
||||
var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
|
||||
.setLngLat(lngLat)
|
||||
.setHTML('<span class="map-tip">' + entry.title + '</span>');
|
||||
el.addEventListener('mouseenter', function () { popup.addTo({{ map_var }}); });
|
||||
el.addEventListener('mouseleave', function () { popup.remove(); });
|
||||
|
||||
el.addEventListener('click', function () {
|
||||
var card = document.getElementById('{{ card_prefix }}' + entry.slug);
|
||||
var mapWrap = document.querySelector('.feed-map-wrap');
|
||||
var isFs = mapWrap && mapWrap.classList.contains('is-fullscreen');
|
||||
function scrollAndHighlight() {
|
||||
if (!card) { window.location.href = entry.url; return; }
|
||||
window.location.hash = '{{ card_prefix }}' + entry.slug;
|
||||
setTimeout(function () {
|
||||
card.classList.add('is-highlighted');
|
||||
setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
|
||||
}, 350);
|
||||
}
|
||||
if (isFs) {
|
||||
var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
|
||||
if (fsBtn) fsBtn.click();
|
||||
setTimeout(scrollAndHighlight, 450);
|
||||
} else {
|
||||
scrollAndHighlight();
|
||||
}
|
||||
});
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo({{ map_var }});
|
||||
});
|
||||
|
||||
if (entries.length === 1) {
|
||||
{{ map_var }}.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: 10 });
|
||||
} else {
|
||||
{{ map_var }}.fitBounds(bounds, { padding: 60, maxZoom: 11 });
|
||||
}
|
||||
|
||||
{% if show_journey %}
|
||||
var segments = MapUtils.buildJourneySegments(entries, { connectMode: AUTOCONNECT_{{ js_suffix }} });
|
||||
MapUtils.addJourneySegments({{ map_var }}, segments, '{{ map_id }}-journey');
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
|
||||
var mapWrap = document.querySelector('.feed-map-wrap');
|
||||
if (!fsBtn || !mapWrap) return;
|
||||
fsBtn.addEventListener('click', function() {
|
||||
var isFs = mapWrap.classList.toggle('is-fullscreen');
|
||||
fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
|
||||
document.body.style.overflow = isFs ? 'hidden' : '';
|
||||
setTimeout(function() { typeof {{ map_var }} !== 'undefined' && {{ map_var }}.resize(); }, 50);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
@@ -3,8 +3,40 @@
|
||||
{% block content %}
|
||||
{% set stories = page.children.published().order('date', 'asc') %}
|
||||
|
||||
{# Collect stories that have coordinates for the mini-map #}
|
||||
{% set map_entries = [] %}
|
||||
{% for story in stories %}
|
||||
{% if story.header.lat is not empty and story.header.lng is not empty %}
|
||||
{% set map_entries = map_entries|merge([{
|
||||
'lat': story.header.lat,
|
||||
'lng': story.header.lng,
|
||||
'title': story.title,
|
||||
'slug': story.slug,
|
||||
'url': story.url,
|
||||
'type': 'story',
|
||||
'force_connect': false,
|
||||
'transport_mode': null
|
||||
}]) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% set trip_page = page.parent() %}
|
||||
|
||||
{% include 'partials/feed-map.html.twig' with {
|
||||
'map_entries': map_entries,
|
||||
'map_id': 'stories-map',
|
||||
'map_var': 'storiesMap',
|
||||
'link_href': null,
|
||||
'card_prefix': 'story-',
|
||||
'trip_page': trip_page,
|
||||
'show_journey': false
|
||||
} only %}
|
||||
|
||||
<div class="stories-listing">
|
||||
<h1 class="stories-listing__heading">Stories</h1>
|
||||
<div class="stories-listing__header">
|
||||
<h1 class="stories-listing__heading">Stories</h1>
|
||||
<button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
|
||||
</div>
|
||||
|
||||
{% if stories|length > 0 %}
|
||||
<div class="stories-grid">
|
||||
@@ -19,7 +51,7 @@
|
||||
{% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
|
||||
{% endif %}
|
||||
|
||||
<a class="story-card" href="{{ story.url }}">
|
||||
<a class="story-card" id="story-{{ story.slug }}" href="{{ story.url }}">
|
||||
{% if hero %}
|
||||
<div class="story-card__photo">
|
||||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
|
||||
@@ -42,4 +74,22 @@
|
||||
<p class="stories-empty">No stories yet — check back soon.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
var sortBtn = document.getElementById('feed-sort-toggle');
|
||||
if (!sortBtn) return;
|
||||
var grid = document.querySelector('.stories-grid');
|
||||
if (!grid) return;
|
||||
var ascending = true;
|
||||
|
||||
sortBtn.addEventListener('click', function() {
|
||||
ascending = !ascending;
|
||||
var cards = Array.from(grid.querySelectorAll('.story-card'));
|
||||
cards.reverse().forEach(function(el) { grid.appendChild(el); });
|
||||
sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
|
||||
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
|
||||
sortBtn.classList.toggle('is-active', !ascending);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -105,7 +105,14 @@
|
||||
|
||||
<div class="home-layout">
|
||||
<div class="home-map-col">
|
||||
<div class="home-map" id="trip-map"></div>
|
||||
<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>
|
||||
|
||||
<div class="home-feed-col">
|
||||
@@ -127,87 +134,94 @@
|
||||
<button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
|
||||
<button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
|
||||
</div>
|
||||
<div class="trip-filter-group">
|
||||
<button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
|
||||
{% if has_gpx %}
|
||||
<button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
|
||||
</div>
|
||||
<div class="trip-panel-toggles">
|
||||
<button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
|
||||
{% if has_gpx %}
|
||||
<button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="trip-stats-block" class="trip-stats-block" style="display:none">
|
||||
<div class="trip-stats-grid">
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ days_on_road }}</span>
|
||||
<span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ journal_count }}</span>
|
||||
<span class="stat-label">{{ journal_count == 1 ? 'entry' : 'entries' }} posted</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ country_display|length }}</span>
|
||||
<span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ city_display|length }}</span>
|
||||
<span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="stat-distance">—</span>
|
||||
<span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
{% if temp_min is not null %}
|
||||
<span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
|
||||
{% else %}
|
||||
<span class="stat-value">—</span>
|
||||
{% endif %}
|
||||
<span class="stat-label">°C range</span>
|
||||
<div id="trip-stats-block" class="trip-stats-block">
|
||||
<div class="trip-panel-inner">
|
||||
<div class="trip-stats-grid">
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ days_on_road }}</span>
|
||||
<span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ journal_count }}</span>
|
||||
<span class="stat-label">{{ journal_count == 1 ? 'entry' : 'entries' }} posted</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ country_display|length }}</span>
|
||||
<span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value">{{ city_display|length }}</span>
|
||||
<span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="stat-distance">—</span>
|
||||
<span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
{% if temp_min is not null %}
|
||||
<span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
|
||||
{% else %}
|
||||
<span class="stat-value">—</span>
|
||||
{% endif %}
|
||||
<span class="stat-label">°C range</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if country_display|length > 0 %}
|
||||
<p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
|
||||
{% endif %}
|
||||
<p class="trip-stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
|
||||
<button class="trip-panel-close" data-toggle="trip-stats-toggle">↑ Close stats</button>
|
||||
</div>
|
||||
{% if country_display|length > 0 %}
|
||||
<p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
|
||||
{% endif %}
|
||||
<p class="trip-stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
|
||||
</div>
|
||||
|
||||
{% if has_gpx %}
|
||||
<div id="trip-cycling-block" class="trip-cycling-block" style="display:none">
|
||||
<div class="trip-cycling-header">
|
||||
<span class="trip-cycling-icon">🚴</span>
|
||||
<span class="trip-cycling-title">Cycling Stats</span>
|
||||
</div>
|
||||
<div class="trip-cycling-grid">
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-distance">—</span>
|
||||
<span class="stat-label">km distance</span>
|
||||
<div id="trip-cycling-block" class="trip-cycling-block">
|
||||
<div class="trip-panel-inner">
|
||||
<div class="trip-cycling-header">
|
||||
<span class="trip-cycling-icon">🚴</span>
|
||||
<span class="trip-cycling-title">Cycling Stats</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-ele-gain">—</span>
|
||||
<span class="stat-label">m ↑ gain</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-ele-loss">—</span>
|
||||
<span class="stat-label">m ↓ loss</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-highest">—</span>
|
||||
<span class="stat-label">m highest</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-lowest">—</span>
|
||||
<span class="stat-label">m lowest</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-moving-time">—</span>
|
||||
<span class="stat-label">moving time</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-avg-speed">—</span>
|
||||
<span class="stat-label">km/h avg speed</span>
|
||||
<div class="trip-cycling-grid">
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-distance">—</span>
|
||||
<span class="stat-label">km distance</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-ele-gain">—</span>
|
||||
<span class="stat-label">m ↑ gain</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-ele-loss">—</span>
|
||||
<span class="stat-label">m ↓ loss</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-highest">—</span>
|
||||
<span class="stat-label">m highest</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-lowest">—</span>
|
||||
<span class="stat-label">m lowest</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-moving-time">—</span>
|
||||
<span class="stat-label">moving time</span>
|
||||
</div>
|
||||
<div class="stat-block">
|
||||
<span class="stat-value" id="cyc-avg-speed">—</span>
|
||||
<span class="stat-label">km/h avg speed</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="trip-panel-close" data-toggle="trip-cycling-toggle">↑ Close cycling</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -216,85 +230,10 @@
|
||||
{% if all_items|length > 0 %}
|
||||
{% for item in all_items %}
|
||||
{% set entry = item.page %}
|
||||
|
||||
{% if item.type == 'journal' %}
|
||||
{% set weather_icons = {
|
||||
'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
|
||||
'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
|
||||
'Snow': '❄️', 'Thunderstorm': '⛈️'
|
||||
} %}
|
||||
<article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
||||
<header class="journal-post-header">
|
||||
<h2 class="journal-post-title">{{ entry.title }}</h2>
|
||||
<p class="journal-post-meta">
|
||||
<a class="journal-post-permalink" href="{{ entry.url }}">
|
||||
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
||||
</a>
|
||||
{% if entry.header.location_city or entry.header.location_country %}
|
||||
<span class="journal-post-location">
|
||||
· 📍
|
||||
{%- set _loc = [] -%}
|
||||
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
||||
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
||||
{{ _loc|join(', ') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if entry.header.weather_desc %}
|
||||
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{% set images = entry.media.images %}
|
||||
{% if images|length > 0 %}
|
||||
{% set firstImg = images|first %}
|
||||
{% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
|
||||
<div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
|
||||
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
|
||||
{% for img in images %}
|
||||
<a class="journal-photo-slide"
|
||||
href="{{ img.url }}"
|
||||
data-pswp-width="{{ img.width }}"
|
||||
data-pswp-height="{{ img.height }}"
|
||||
style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
|
||||
target="_blank">
|
||||
<img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if images|length > 1 %}
|
||||
<div class="journal-photo-dots" aria-hidden="true">
|
||||
{% for img in images %}
|
||||
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<button class="journal-photo-expand" aria-label="View full size">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
||||
</article>
|
||||
{% include 'partials/entry-journal.html.twig' %}
|
||||
{% else %}
|
||||
{% set hero = null %}
|
||||
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
||||
{% set hero = entry.media[entry.header.hero_image] %}
|
||||
{% elseif entry.media.images|length > 0 %}
|
||||
{% set hero = entry.media.images|first %}
|
||||
{% endif %}
|
||||
<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
|
||||
{% if hero %}
|
||||
<div class="entry-card-photo entry-card-photo--story">
|
||||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="entry-card-body">
|
||||
<span class="story-badge">✦ Story</span>
|
||||
<h2 class="entry-title">{{ entry.title }}</h2>
|
||||
</div>
|
||||
</a>
|
||||
{% include 'partials/entry-story.html.twig' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
@@ -319,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) {
|
||||
@@ -346,11 +287,22 @@ tripMap.on('load', function () {
|
||||
el.addEventListener('click', function () {
|
||||
var card = document.getElementById('entry-' + entry.slug);
|
||||
if (!card) return;
|
||||
window.location.hash = 'entry-' + entry.slug;
|
||||
setTimeout(function () {
|
||||
card.classList.add('is-highlighted');
|
||||
setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
|
||||
}, 350);
|
||||
var mapCol = document.querySelector('.home-map-col');
|
||||
var isFs = mapCol && mapCol.classList.contains('is-fullscreen');
|
||||
function scrollAndHighlight() {
|
||||
window.location.hash = 'entry-' + entry.slug;
|
||||
setTimeout(function () {
|
||||
card.classList.add('is-highlighted');
|
||||
setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
|
||||
}, 350);
|
||||
}
|
||||
if (isFs) {
|
||||
var fsBtn = document.getElementById('trip-map-fullscreen');
|
||||
if (fsBtn) fsBtn.click();
|
||||
setTimeout(scrollAndHighlight, 450);
|
||||
} else {
|
||||
scrollAndHighlight();
|
||||
}
|
||||
});
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
|
||||
@@ -365,9 +317,25 @@ tripMap.on('load', function () {
|
||||
|
||||
/* ── GPX tracks + journey segments ─────────────────────────── */
|
||||
MapUtils.renderGpxJourney(tripMap, USE_GPX ? GPX_URLS : [], TRIP_ENTRIES, 'gpx', 'trip-journey', { connectMode: AUTOCONNECT });
|
||||
|
||||
// Collapse attribution <details> which MapLibre may open on load
|
||||
var attrib = tripMap.getContainer().querySelector('.maplibregl-ctrl-attrib');
|
||||
if (attrib) attrib.removeAttribute('open');
|
||||
});
|
||||
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]');
|
||||
@@ -402,6 +370,23 @@ setTimeout(function () { tripMap.resize(); }, 100);
|
||||
});
|
||||
})();
|
||||
|
||||
(function() {
|
||||
var sortBtn = document.getElementById('trip-sort-toggle');
|
||||
if (!sortBtn) return;
|
||||
var feed = document.querySelector('.feed');
|
||||
var emptyMsg = document.getElementById('feed-filter-empty');
|
||||
var ascending = true;
|
||||
|
||||
sortBtn.addEventListener('click', function() {
|
||||
ascending = !ascending;
|
||||
var entries = Array.from(feed.querySelectorAll('[data-type]'));
|
||||
entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
|
||||
sortBtn.textContent = ascending ? '↑' : '↓';
|
||||
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
|
||||
sortBtn.classList.toggle('is-active', !ascending);
|
||||
});
|
||||
})();
|
||||
|
||||
var STATS_GPS = {{ gps_points|json_encode|raw }};
|
||||
var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};
|
||||
|
||||
@@ -535,29 +520,25 @@ function parseGpxFiles(urls, callback) {
|
||||
}
|
||||
}
|
||||
|
||||
// Stats toggle
|
||||
var statsToggle = document.getElementById('trip-stats-toggle');
|
||||
var statsBlock = document.getElementById('trip-stats-block');
|
||||
if (statsToggle && statsBlock) {
|
||||
statsToggle.addEventListener('click', function() {
|
||||
var isOpen = statsBlock.style.display !== 'none';
|
||||
statsBlock.style.display = isOpen ? 'none' : '';
|
||||
statsToggle.classList.toggle('is-active', !isOpen);
|
||||
statsToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
||||
function makePanelToggle(toggleId, blockId) {
|
||||
var toggle = document.getElementById(toggleId);
|
||||
var block = document.getElementById(blockId);
|
||||
if (!toggle || !block) return;
|
||||
toggle.addEventListener('click', function() {
|
||||
var isOpen = block.classList.contains('is-open');
|
||||
block.classList.toggle('is-open', !isOpen);
|
||||
toggle.classList.toggle('is-active', !isOpen);
|
||||
toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
||||
});
|
||||
}
|
||||
makePanelToggle('trip-stats-toggle', 'trip-stats-block');
|
||||
makePanelToggle('trip-cycling-toggle', 'trip-cycling-block');
|
||||
|
||||
// Cycling toggle (only present when has_gpx)
|
||||
var cycToggle = document.getElementById('trip-cycling-toggle');
|
||||
var cycBlock = document.getElementById('trip-cycling-block');
|
||||
if (cycToggle && cycBlock) {
|
||||
cycToggle.addEventListener('click', function() {
|
||||
var isOpen = cycBlock.style.display !== 'none';
|
||||
cycBlock.style.display = isOpen ? 'none' : '';
|
||||
cycToggle.classList.toggle('is-active', !isOpen);
|
||||
cycToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
||||
});
|
||||
}
|
||||
// Close buttons inside panels (mobile only via CSS)
|
||||
document.querySelectorAll('.trip-panel-close').forEach(function(btn) {
|
||||
var toggleBtn = document.getElementById(btn.getAttribute('data-toggle'));
|
||||
if (toggleBtn) btn.addEventListener('click', function() { toggleBtn.click(); });
|
||||
});
|
||||
})();
|
||||
|
||||
/* ── Back to top ─────────────────────────────────────────── */
|
||||
@@ -589,6 +570,33 @@ const lightbox = new PhotoSwipeLightbox({
|
||||
children: 'a.journal-photo-slide',
|
||||
pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
|
||||
});
|
||||
lightbox.on('afterOpen', function () {
|
||||
var pswp = lightbox.pswp;
|
||||
var keyDir = 0;
|
||||
var clearTimer = null;
|
||||
function onKey(e) {
|
||||
if (e.key === 'ArrowRight') keyDir = 1;
|
||||
else if (e.key === 'ArrowLeft') keyDir = -1;
|
||||
else keyDir = 0;
|
||||
}
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
pswp.on('change', function () {
|
||||
if (!keyDir) return;
|
||||
var dir = keyDir;
|
||||
keyDir = 0;
|
||||
var el = pswp.currSlide && pswp.currSlide.container;
|
||||
if (!el) return;
|
||||
el.classList.remove('pswp-key-from-left', 'pswp-key-from-right');
|
||||
el.offsetWidth;
|
||||
el.classList.add(dir > 0 ? 'pswp-key-from-right' : 'pswp-key-from-left');
|
||||
clearTimeout(clearTimer);
|
||||
clearTimer = setTimeout(function () { el.classList.remove('pswp-key-from-left', 'pswp-key-from-right'); }, 400);
|
||||
});
|
||||
pswp.on('close', function () {
|
||||
document.removeEventListener('keydown', onKey, true);
|
||||
clearTimeout(clearTimer);
|
||||
});
|
||||
});
|
||||
lightbox.init();
|
||||
|
||||
document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
|
||||
|
||||
Reference in New Issue
Block a user