diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index 322bb44..5c22e8c 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -959,6 +959,38 @@ body::after { background: var(--color-accent-light); } +.trip-panel-toggles { + display: flex; + gap: var(--space-5); + margin-top: var(--space-3); +} + +.trip-panel-toggle { + background: none; + border: none; + padding: 0; + font-family: var(--font-ui); + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-ink-muted); + cursor: pointer; + display: flex; + align-items: center; + gap: var(--space-1); + transition: color 0.15s; +} + +.trip-panel-toggle:hover { color: var(--color-ink); } +.trip-panel-toggle.is-active { color: var(--color-accent); } + +.trip-panel-caret { + display: inline-block; + font-size: 0.75em; + transition: transform 0.2s ease; +} + +.trip-panel-toggle.is-active .trip-panel-caret { transform: rotate(180deg); } + @media (max-width: 768px) { .home-layout { display: flex; flex-direction: column; } .home-map-col { position: static; height: 40vh; align-self: stretch; } diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig index 06b2bd1..486f482 100644 --- a/themes/intotheeast/templates/trip.html.twig +++ b/themes/intotheeast/templates/trip.html.twig @@ -127,13 +127,13 @@ -
- - {% if has_gpx %} - - {% endif %} - -
+ + +
+ + {% if has_gpx %} + + {% endif %}
@@ -339,7 +339,7 @@ setTimeout(function () { tripMap.resize(); }, 100); ascending = !ascending; var entries = Array.from(feed.querySelectorAll('[data-type]')); entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); }); - sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first'; + sortBtn.textContent = ascending ? '↑' : '↓'; sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first'); sortBtn.classList.toggle('is-active', !ascending); });