contribution sort control in sidebar

This commit is contained in:
2026-06-16 16:27:56 +02:00
parent 36ef947be0
commit 5aa1fbf13c
3 changed files with 41 additions and 2 deletions

View File

@@ -167,6 +167,15 @@ $news_items = $stmt->fetchAll();
<div class="list-search">
<input type="text" id="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input">
</div>
<div class="list-controls">
<select id="list-sort" class="form-input list-sort-select" onchange="updateContributionsList()">
<option value="date-desc">Neueste zuerst</option>
<option value="date-asc">Älteste zuerst</option>
<option value="likes">Meiste Bewertungen</option>
<option value="comments">Meiste Kommentare</option>
</select>
<span id="list-count" class="list-count"></span>
</div>
<div id="contributions-list">
<!-- Contribution Cards — populated by app.js -->
</div>

View File

@@ -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 = '<p class="empty-state">Keine Beiträge gefunden.</p>';

View File

@@ -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);