diff --git a/public/index.php b/public/index.php index 6596bd1..278a638 100644 --- a/public/index.php +++ b/public/index.php @@ -167,6 +167,15 @@ $news_items = $stmt->fetchAll(); +
+ + +
diff --git a/public/js/app.js b/public/js/app.js index 209c7e5..6c150b1 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -829,11 +829,20 @@ function updateContributionsList() { return matchesCategory && matchesSearch; }); - // Sorts by Date (newest first) + // Sorts by selected Option + var sortBy = document.getElementById('list-sort') ? document.getElementById('list-sort').value : 'date-desc'; filtered.sort(function (a, b) { - return new Date(b.properties.created_at) - new Date(a.properties.created_at); + if (sortBy === 'date-desc') return new Date(b.properties.created_at) - new Date(a.properties.created_at); + if (sortBy === 'date-asc') return new Date(a.properties.created_at) - new Date(b.properties.created_at); + if (sortBy === 'likes') return b.properties.likes_count - a.properties.likes_count; + if (sortBy === 'comments') return (b.properties.comment_count || 0) - (a.properties.comment_count || 0); + return 0; }); + // Updates Count Display + var countEl = document.getElementById('list-count'); + if (countEl) countEl.textContent = filtered.length + ' Beiträge'; + // Builds HTML if (filtered.length === 0) { container.innerHTML = '

Keine Beiträge gefunden.

'; diff --git a/public/styles.css b/public/styles.css index 8cd5b88..5511c94 100644 --- a/public/styles.css +++ b/public/styles.css @@ -663,6 +663,27 @@ select.form-input { cursor: pointer; } ----------------------------------------------------------------- */ .list-search { margin-bottom: var(--space-md); } +.list-controls { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-md); + gap: var(--space-sm); +} + +.list-sort-select { + width: auto; + padding: 6px var(--space-sm); + font-size: var(--font-sm); + flex-shrink: 0; +} + +.list-count { + font-size: var(--font-sm); + color: var(--color-text-secondary); + white-space: nowrap; +} + .contribution-card { padding: var(--space-md); margin-bottom: var(--space-sm);