refactor(trip): declutter filter bar — move Stats/Cycling to panel toggles

Filter bar now has one job: content type (All/Journal/Stories) + sort icon (↑/↓).
Stats and Cycling move to a lean text-button row below the bar with a
rotating ▾ caret — CSS handles expand/collapse state via .is-active,
no JS changes needed for the caret animation.

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 22:58:28 +02:00
parent f94880e758
commit 2b8ea1963b
2 changed files with 40 additions and 8 deletions
+32
View File
@@ -959,6 +959,38 @@ 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: none;
border: none;
padding: 0;
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-1);
transition: color 0.15s;
}
.trip-panel-toggle:hover { color: var(--color-ink); }
.trip-panel-toggle.is-active { color: var(--color-accent); }
.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; }