m038
f94880e758
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
67 lines
2.7 KiB
Twig
67 lines
2.7 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
||
|
||
{% block content %}
|
||
{% set stories = page.children.published().order('date', 'asc') %}
|
||
|
||
<div class="stories-listing">
|
||
<div class="stories-listing__header">
|
||
<h1 class="stories-listing__heading">Stories</h1>
|
||
<button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
|
||
</div>
|
||
|
||
{% if stories|length > 0 %}
|
||
<div class="stories-grid">
|
||
{% for story in stories %}
|
||
{% set hero = null %}
|
||
{% if story.header.hero_image and story.media[story.header.hero_image] is defined %}
|
||
{% set hero = story.media[story.header.hero_image] %}
|
||
{% endif %}
|
||
|
||
{% set date_str = story.date|date('d M Y') %}
|
||
{% if story.header.end_date %}
|
||
{% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
|
||
{% endif %}
|
||
|
||
<a class="story-card" href="{{ story.url }}">
|
||
{% if hero %}
|
||
<div class="story-card__photo">
|
||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
|
||
</div>
|
||
{% else %}
|
||
<div class="story-card__photo story-card__photo--empty"></div>
|
||
{% endif %}
|
||
<div class="story-card__body">
|
||
<time class="story-card__date" datetime="{{ story.date|date('Y-m-d') }}">{{ date_str }}</time>
|
||
{% if story.header.location_name %}
|
||
<span class="story-card__location">📍 {{ story.header.location_name }}{% if story.header.location_country %}, {{ story.header.location_country }}{% endif %}</span>
|
||
{% endif %}
|
||
<h2 class="story-card__title">{{ story.title }}</h2>
|
||
<span class="story-card__cta">Read story →</span>
|
||
</div>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<p class="stories-empty">No stories yet — check back soon.</p>
|
||
{% endif %}
|
||
</div>
|
||
<script>
|
||
(function() {
|
||
var sortBtn = document.getElementById('feed-sort-toggle');
|
||
if (!sortBtn) return;
|
||
var grid = document.querySelector('.stories-grid');
|
||
if (!grid) return;
|
||
var ascending = true;
|
||
|
||
sortBtn.addEventListener('click', function() {
|
||
ascending = !ascending;
|
||
var cards = Array.from(grid.querySelectorAll('.story-card'));
|
||
cards.reverse().forEach(function(el) { grid.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 %}
|