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

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

Browse Source 
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:
Mischa
2026-06-21 22:58:28 +02:00
parent f94880e758
commit 2b8ea1963b
2 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+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; }
themes/intotheeast/templates/trip.html.twig
+7 -7
View File
@@ -127,13 +127,13 @@
<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 %}
<button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
<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>
@@ -339,7 +339,7 @@ setTimeout(function () { tripMap.resize(); }, 100);
ascending = !ascending;
var entries = Array.from(feed.querySelectorAll('[data-type]'));
entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
sortBtn.textContent = ascending ? '↑' : '↓';
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
sortBtn.classList.toggle('is-active', !ascending);
});