lukas.uptmoor/webgis-lohne
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

news sort control in sidebar

Browse Source
This commit is contained in:
patrickzerhusen
2026-06-16 16:58:15 +02:00
parent 2aae2cd518
commit 7e9c8cd60d
4 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/admin.php
View File

@@ -334,9 +334,9 @@ $counts['total'] = count($all_contributions);
<i class="fa-solid fa-trash"></i> Löschen
</button>
<a class="btn btn-map" href="index.php" target="_blank">
<!-- <a class="btn btn-map" href="index.php" target="_blank">
<i class="fa-solid fa-map-location-dot"></i> Karte
</a>
</a> -->
</div>
</div>
</div>

17
public/index.php
View File

@@ -168,7 +168,7 @@ $news_items = $stmt->fetchAll();
<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()">
<select id="list-sort" class="form-input list-sort-select" onchange="updateContributionsList();autoResizeSelect(this)">
<option value="date-desc">Neueste zuerst</option>
<option value="date-asc">Älteste zuerst</option>
<option value="category">Nach Kategorie</option>
@@ -195,6 +195,14 @@ $news_items = $stmt->fetchAll();
<input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
</div>
<div class="list-controls">
<select id="news-sort" class="form-input list-sort-select" onchange="sortNews();autoResizeSelect(this)">
<option value="date-desc">Neueste zuerst</option>
<option value="date-asc">Älteste zuerst</option>
</select>
<span class="list-count"><?= count($news_items) ?> Neuigkeiten</span>
</div>
<!-- News Items Container -->
<div id="news-list">
<?php if (empty($news_items)): ?>
@@ -202,9 +210,10 @@ $news_items = $stmt->fetchAll();
<?php else: ?>
<?php foreach ($news_items as $news): ?>
<div class="news-item"
data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>"
data-date="<?= $news['published_at'] ?>">
<h3><?= htmlspecialchars($news['title']) ?></h3>
<p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
<span class="news-date">

30
public/js/app.js
View File

@@ -1140,6 +1140,17 @@ function reverseGeocode(contributionId, lat, lng) {
.catch(function () {});
}
// Resizes Select to fit currently selected Option Text
function autoResizeSelect(select) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var style = window.getComputedStyle(select);
ctx.font = style.fontSize + ' ' + style.fontFamily;
var text = select.options[select.selectedIndex].text;
var textWidth = Math.ceil(ctx.measureText(text).width);
select.style.width = (textWidth + 42) + 'px';
}
// Filters News Items in Sidebar by Search Term
function filterNews() {
const searchTerm = document.getElementById('news-search-input').value.toLowerCase();
@@ -1159,6 +1170,21 @@ function filterNews() {
});
}
// Sorts News Items in Sidebar by Date
function sortNews() {
var sortBy = document.getElementById('news-sort').value;
var container = document.getElementById('news-list');
var items = Array.from(container.querySelectorAll('.news-item'));
items.sort(function (a, b) {
if (sortBy === 'date-desc') return new Date(b.dataset.date) - new Date(a.dataset.date);
if (sortBy === 'date-asc') return new Date(a.dataset.date) - new Date(b.dataset.date);
return 0;
});
items.forEach(function (item) { container.appendChild(item); });
}
// Loads and Displays Comments forContributions in Popups
function loadComments(contributionId) {
apiCall({
@@ -1340,4 +1366,8 @@ document.getElementById('create-photo').addEventListener('change', function () {
} else {
preview.style.display = 'none';
}
// Initial Resize of Sort Selects
document.querySelectorAll('.list-sort-select').forEach(autoResizeSelect);
});

1
public/styles.css
View File

@@ -678,6 +678,7 @@ select.form-input { cursor: pointer; }
.list-sort-select {
width: auto;
min-width:185px;
padding: 6px var(--space-sm);
font-size: var(--font-sm);
flex-shrink: 0;