feat: add sort toggle to dailies and stories pages
dailies: reverse Twig output to ascending (matching trip default), add feed-sort-bar above feed, add sort JS using [data-type] + appendChild. stories: wrap heading in flex header row with sort button inline, add sort JS targeting .story-card children of .stories-grid. CSS: feed-sort-bar (right-aligned button above feed), stories-listing__header (flex row, baseline-aligned), heading margin moved to header. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
@@ -14,7 +14,8 @@
|
||||
{% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
|
||||
{% endfor %}
|
||||
|
||||
{# No sort needed: page.collection() returns journal entries date-descending per dailies.md config. Dailies has no stories, so no re-merge sort is needed. #}
|
||||
{# page.collection() returns date-descending; reverse to match ascending default on trip page. #}
|
||||
{% set all_items = all_items|reverse %}
|
||||
|
||||
{# Collect GPS entries for mini-map #}
|
||||
{% set map_entries = [] %}
|
||||
@@ -87,6 +88,9 @@ feedMap.on('load', function () {
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<div class="feed-sort-bar">
|
||||
<button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
|
||||
</div>
|
||||
<div class="feed">
|
||||
{% if all_items|length > 0 %}
|
||||
{% for item in all_items %}
|
||||
@@ -165,4 +169,21 @@ document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
var sortBtn = document.getElementById('feed-sort-toggle');
|
||||
if (!sortBtn) return;
|
||||
var feed = document.querySelector('.feed');
|
||||
var ascending = true;
|
||||
|
||||
sortBtn.addEventListener('click', function() {
|
||||
ascending = !ascending;
|
||||
var entries = Array.from(feed.querySelectorAll('[data-type]'));
|
||||
entries.reverse().forEach(function(el) { feed.appendChild(el); });
|
||||
sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
|
||||
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
|
||||
sortBtn.classList.toggle('is-active', !ascending);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user