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:
@@ -55,11 +55,14 @@
|
||||
{{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
|
||||
{% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
|
||||
</span>
|
||||
<nav class="trip-nav">
|
||||
<a href="{{ page.route }}/dailies">Journal</a>
|
||||
<a href="{{ page.route }}/stats">Stats</a>
|
||||
<a href="{{ page.route }}/stories">Stories</a>
|
||||
</nav>
|
||||
<div class="trip-filter-bar">
|
||||
<div class="trip-filter-group">
|
||||
<button class="trip-filter-btn is-active" data-filter="all">All content</button>
|
||||
<button class="trip-filter-btn" data-filter="journal">Journal</button>
|
||||
<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 class="feed">
|
||||
|
||||
Reference in New Issue
Block a user