= nl2br(htmlspecialchars($news['content'])) ?>
diff --git a/public/js/app.js b/public/js/app.js index 4182709..c8c80ac 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -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); }); \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index 5425152..6a49e26 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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;