feat: add filter bar markup and pill button styles to trip page

Replace the old trip-nav links with a new filter bar component featuring:
- Three pill buttons for filtering (All content, Journal, Stories)
- "All content" button active by default with teal accent styling
- Separate Stats button with matching pill styling
- CSS for buttons with hover and active states
- Responsive flexbox layout that wraps on narrow screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RB86BaJBG3eGiMdfhmHRrQ
This commit is contained in:
2026-06-19 21:29:33 +02:00
parent 2508936928
commit 0478a18fa8
2 changed files with 52 additions and 5 deletions
+44
View File
@@ -693,6 +693,50 @@ body::after {
color: var(--color-ink-muted); color: var(--color-ink-muted);
} }
/* ── Trip page filter bar ────────────────────────────────────────────────────── */
.trip-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-4);
flex-wrap: wrap;
}
.trip-filter-group {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.trip-filter-btn,
.trip-stats-btn {
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-ink-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: var(--space-1) var(--space-4);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.trip-filter-btn:hover,
.trip-stats-btn:hover {
color: var(--color-ink);
border-color: var(--color-ink-muted);
}
.trip-filter-btn.is-active,
.trip-stats-btn.is-active {
color: var(--color-accent);
border-color: var(--color-accent);
background: var(--color-accent-light);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.home-layout { display: flex; flex-direction: column; } .home-layout { display: flex; flex-direction: column; }
.home-map-col { position: static; height: 40vh; align-self: stretch; } .home-map-col { position: static; height: 40vh; align-self: stretch; }
+8 -5
View File
@@ -55,11 +55,14 @@
{{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }} {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
{% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %} {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
</span> </span>
<nav class="trip-nav"> <div class="trip-filter-bar">
<a href="{{ page.route }}/dailies">Journal</a> <div class="trip-filter-group">
<a href="{{ page.route }}/stats">Stats</a> <button class="trip-filter-btn is-active" data-filter="all">All content</button>
<a href="{{ page.route }}/stories">Stories</a> <button class="trip-filter-btn" data-filter="journal">Journal</button>
</nav> <button class="trip-filter-btn" data-filter="story">Stories</button>
</div>
<button class="trip-stats-btn" id="trip-stats-toggle">Stats</button>
</div>
</div> </div>
<div class="feed"> <div class="feed">