m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(trip): pill radius on panel toggles, slide animation, mobile close button

Browse Source 
- 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
This commit is contained in:
Mischa
2026-06-21 23:09:52 +02:00
parent c3cb224402
commit 02fc666661
2 changed files with 132 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+45 -10
View File
@@ -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;
themes/intotheeast/templates/trip.html.twig
+23 -21
View File
@@ -137,7 +137,8 @@
</div>
</div>
<div id="trip-stats-block" class="trip-stats-block" style="display:none">
<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>
@@ -172,10 +173,13 @@
<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>
</div>
{% if has_gpx %}
<div id="trip-cycling-block" class="trip-cycling-block" style="display:none">
<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>
@@ -210,6 +214,8 @@
<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 ─────────────────────────────────────────── */