From 02fc666661203af6a2d4bbefb7a69200b3b56130 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 23:09:52 +0200
Subject: [PATCH] feat(trip): pill radius on panel toggles, slide animation,
 mobile close button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Radius: trip-panel-toggle now uses --radius-full, consistent with filter pills
- Animation: stats/cycling blocks use CSS grid-template-rows 0fr→1fr transition
  (inner trip-panel-inner div carries decoration so border/padding don't peek
  out when collapsed; display:none removed)
- Close button: ↑ Close stats / ↑ Close cycling at bottom of each panel,
  hidden ≥769px, triggers the header toggle via data-toggle attribute

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/css/style.css            |  55 +++++--
 themes/intotheeast/templates/trip.html.twig | 172 ++++++++++----------
 2 files changed, 132 insertions(+), 95 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 9f1d895..70b6d10 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -968,7 +968,7 @@ body::after {
 .trip-panel-toggle {
     background: transparent;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-full);
     padding: var(--space-1) var(--space-3);
     font-family: var(--font-ui);
     font-size: var(--text-sm);
@@ -1149,12 +1149,54 @@ body::after {
 
 /* ── Trip page inline stats block ───────────────────────────────────────────── */
 
-.trip-stats-block {
+.trip-stats-block,
+.trip-cycling-block {
+    display: grid;
+    grid-template-rows: 0fr;
+    overflow: hidden;
+    margin-bottom: 0;
+    transition: grid-template-rows 0.35s ease, margin-bottom 0.35s ease;
+}
+
+.trip-stats-block.is-open,
+.trip-cycling-block.is-open {
+    grid-template-rows: 1fr;
+    margin-bottom: var(--space-6);
+}
+
+.trip-panel-inner {
+    min-height: 0;
+    overflow: hidden;
     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 {
@@ -1181,13 +1223,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;
diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 486f482..e1bcb8e 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -137,78 +137,84 @@
             </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 %}
@@ -478,29 +484,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 ─────────────────────────────────────────── */