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

- 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:
2026-06-21 23:09:52 +02:00
parent c3cb224402
commit 02fc666661
2 changed files with 132 additions and 95 deletions
+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;