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:
@@ -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; }
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user