fixed html structure for news sidebar

This commit is contained in:
2026-04-25 13:10:47 +02:00
parent 360eb3744a
commit 62ba9b5345
2 changed files with 44 additions and 14 deletions

View File

@@ -204,20 +204,31 @@ $news_items = $stmt->fetchAll();
<span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
</h2>
<div class="sidebar-body">
<?php if (empty($news_items)): ?>
<p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
<?php else: ?>
<?php foreach ($news_items as $news): ?>
<div class="news-item">
<h3><?= htmlspecialchars($news['title']) ?></h3>
<p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
<span class="news-date">
<?= htmlspecialchars($news['author_name']) ?>
· <?= date('d.m.Y', strtotime($news['published_at'])) ?>
</span>
</div>
<?php endforeach; ?>
<?php endif; ?>
<!-- News Search -->
<div class="list-search">
<input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
</div>
<!-- News Items Container -->
<div id="news-list">
<?php if (empty($news_items)): ?>
<p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
<?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'])) ?>">
<h3><?= htmlspecialchars($news['title']) ?></h3>
<p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
<span class="news-date">
<?= htmlspecialchars($news['author_name']) ?>
· <?= date('d.m.Y', strtotime($news['published_at'])) ?>
</span>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>

View File

@@ -983,6 +983,25 @@ function reverseGeocode(contributionId, lat, lng) {
.catch(function () {});
}
// Filters News Items in Sidebar by Search Term
function filterNews() {
const searchTerm = document.getElementById('news-search-input').value.toLowerCase();
const newsItems = document.querySelectorAll('#news-list .news-item');
newsItems.forEach(function (item) {
const title = item.dataset.title || '';
const content = item.dataset.content || '';
const author = item.dataset.author || '';
// Shows Item if Search Term matches Title, Content or Author
if (!searchTerm || title.indexOf(searchTerm) !== -1 || content.indexOf(searchTerm) !== -1 || author.indexOf(searchTerm) !== -1) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
}
// =====================================================================
// Block 16: Application Startup