From 2c3fb779ce8b90d0c23c9fa0edc681fd77e24197 Mon Sep 17 00:00:00 2001 From: AIIrondev Date: Mon, 18 May 2026 17:35:02 +0200 Subject: [PATCH] feat: update styles for dark mode and enhance filter handling in admin template --- Web/static/css/planned_appointments.css | 16 ++-- Web/static/css/styles.css | 103 +++++++++++++++++++++--- Web/templates/impressum.html | 2 +- Web/templates/main_admin.html | 37 ++++++--- 4 files changed, 127 insertions(+), 31 deletions(-) diff --git a/Web/static/css/planned_appointments.css b/Web/static/css/planned_appointments.css index 5354c31..759c46c 100755 --- a/Web/static/css/planned_appointments.css +++ b/Web/static/css/planned_appointments.css @@ -10,13 +10,13 @@ .planned-appointments-panel { margin: 15px 0; padding: 15px; - background-color: #e1f5fe; + background-color: var(--ui-surface-soft, #e1f5fe); border-left: 4px solid #03a9f4; border-radius: 4px; } .planned-appointments-panel h4 { - color: #0277bd; + color: var(--ui-title, #0277bd); margin-top: 0; margin-bottom: 10px; font-size: 1.1em; @@ -30,9 +30,9 @@ .appointment-item { padding: 10px; - background-color: #f9fdff; + background-color: var(--ui-surface, #f9fdff); border-radius: 4px; - border: 1px solid #b3e5fc; + border: 1px solid var(--ui-border, #b3e5fc); } .appointment-header { @@ -44,7 +44,7 @@ .appointment-date { font-weight: bold; - color: #0288d1; + color: var(--ui-title, #0288d1); } .appointment-period { @@ -86,14 +86,14 @@ .appointment-user { margin-left: auto; font-style: italic; - color: #546e7a; + color: var(--ui-text-muted, #546e7a); } .appointment-notes { font-size: 0.9em; - color: #455a64; + color: var(--ui-text, #455a64); margin-top: 5px; padding-top: 5px; - border-top: 1px solid #e1f5fe; + border-top: 1px solid var(--ui-border, #e1f5fe); font-style: italic; } diff --git a/Web/static/css/styles.css b/Web/static/css/styles.css index 210bba5..1895bdd 100755 --- a/Web/static/css/styles.css +++ b/Web/static/css/styles.css @@ -22,16 +22,16 @@ } :root[data-theme="dark"] { - --ui-bg: #0f172a; - --ui-bg-accent: #1e293b; - --ui-surface: #1e293b; - --ui-surface-soft: #25314a; - --ui-border: #334155; - --ui-text: #f1f5f9; - --ui-text-muted: #94a3b8; + --ui-bg: #09090b; + --ui-bg-accent: #121214; + --ui-surface: #121214; + --ui-surface-soft: #1e1e22; + --ui-border: #27272a; + --ui-text: #fafafa; + --ui-text-muted: #a1a1aa; --ui-title: #ffffff; - --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); - --ui-shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5); + --ui-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05); + --ui-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } /* Safe Area Support for iPad notches, Dynamic Island, and rounded corners */ @@ -57,9 +57,16 @@ body { :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { - background-color: var(--ui-surface-soft) !important; + background-color: var(--ui-bg) !important; color: var(--ui-text) !important; - border-color: var(--ui-border) !important; + border: 1px solid var(--ui-border) !important; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important; +} +:root[data-theme="dark"] input:focus, +:root[data-theme="dark"] select:focus, +:root[data-theme="dark"] textarea:focus { + border-color: #52a8ff !important; + box-shadow: 0 0 0 2px rgba(82, 168, 255, 0.2), inset 0 1px 2px rgba(0,0,0,0.3) !important; } body { @@ -295,7 +302,7 @@ select:focus { /* Modal dialog styling */ .modal-dialog-white { - background: white; + background: var(--ui-surface); padding: 20px; border-radius: 5px; text-align: center; @@ -896,3 +903,75 @@ html, body { padding-bottom: env(safe-area-inset-bottom); } } + +/* ========================================================= */ +/* UNIVERSAL DARK MODE OVERRIDES FOR HARDCODED HTML STYLES */ +/* ========================================================= */ +:root[data-theme="dark"] .bg-white, +:root[data-theme="dark"] .bg-light, +:root[data-theme="dark"] [style*="background-color: #fff"], +:root[data-theme="dark"] [style*="background-color: #ffffff"], +:root[data-theme="dark"] [style*="background-color: #f8f9fa"], +:root[data-theme="dark"] [style*="background-color: #f5f5f5"], +:root[data-theme="dark"] [style*="background: #fff"], +:root[data-theme="dark"] [style*="background: #ffffff"], +:root[data-theme="dark"] [style*="background: #f8f9fa"], +:root[data-theme="dark"] [style*="background: #f5f5f5"], +:root[data-theme="dark"] [style*="background: white"], +:root[data-theme="dark"] [style*="background-color: white"], +:root[data-theme="dark"] .modal-content, +:root[data-theme="dark"] .card, +:root[data-theme="dark"] .dropdown-menu { + background-color: var(--ui-surface) !important; + background: var(--ui-surface) !important; + color: var(--ui-text) !important; +} + +:root[data-theme="dark"] .text-dark, +:root[data-theme="dark"] .text-black, +:root[data-theme="dark"] [style*="color: #000"], +:root[data-theme="dark"] [style*="color: rgb(0, 0, 0)"], +:root[data-theme="dark"] [style*="color: black"], +:root[data-theme="dark"] [style*="color: #333"] { + color: var(--ui-text) !important; +} + +:root[data-theme="dark"] .text-muted { + color: var(--ui-text-muted) !important; +} + +/* Fix table backgrounds that might have hardcoded light colors */ +:root[data-theme="dark"] .table-light, +:root[data-theme="dark"] table.table, +:root[data-theme="dark"] table [style*="background: #fff"] { + background-color: var(--ui-bg) !important; + color: var(--ui-text) !important; +} + +/* Fix list items */ +:root[data-theme="dark"] .list-group-item { + background-color: var(--ui-surface) !important; + color: var(--ui-text) !important; + border-color: var(--ui-border) !important; +} + +/* Additional inline style coverage */ +:root[data-theme="dark"] [style*="background: #eef4ff"], +:root[data-theme="dark"] [style*="background-color: #eef4ff"], +:root[data-theme="dark"] [style*="background: #e9ecef"], +:root[data-theme="dark"] [style*="background-color: #e9ecef"], +:root[data-theme="dark"] [style*="background: #e2e8f0"], +:root[data-theme="dark"] [style*="background-color: #e2e8f0"], +:root[data-theme="dark"] [style*="background-color: #fefefe"], +:root[data-theme="dark"] [style*="background: #fffdfd"] { + background-color: var(--ui-surface) !important; + background: var(--ui-surface) !important; + color: var(--ui-text) !important; +} + +:root[data-theme="dark"] .badge-light, +:root[data-theme="dark"] .bg-light { + background-color: var(--ui-surface-soft) !important; + color: var(--ui-text) !important; + border: 1px solid var(--ui-border); +} diff --git a/Web/templates/impressum.html b/Web/templates/impressum.html index e8d4b47..2a75d96 100755 --- a/Web/templates/impressum.html +++ b/Web/templates/impressum.html @@ -12,7 +12,7 @@ {% block content %}
-
+

Impressum

(Angaben gemäß § 5 DDG)

diff --git a/Web/templates/main_admin.html b/Web/templates/main_admin.html index 4172815..ae89203 100755 --- a/Web/templates/main_admin.html +++ b/Web/templates/main_admin.html @@ -2740,6 +2740,9 @@ document.addEventListener('DOMContentLoaded', ()=>{ let descSearchIds = null; // Set of matching IDs or null when disabled let currentUsername = ''; let allItems = []; // Cache for all items + let allFilter1Values = new Set(); + let allFilter2Values = new Set(); + let allFilter3Values = new Set(); let bulkDeleteSelection = new Set(); let bulkDeleteDrawerOpen = false; const studentCardsModuleEnabled = {{ 'true' if student_cards_module_enabled else 'false' }}; @@ -3259,6 +3262,7 @@ document.addEventListener('DOMContentLoaded', ()=>{ // Load predefined filter values for dropdowns loadPredefinedFilterValues(1); loadPredefinedFilterValues(2); + loadPredefinedFilterValues(3); // Set up edit form submission setupEditFormSubmission(); @@ -3283,11 +3287,24 @@ document.addEventListener('DOMContentLoaded', ()=>{ }); }); - // Fetch user status to get current username - fetch('/user_status') - .then(response => response.json()) - .then(data => { - currentUsername = data.username; + // Fetch user status and global filters + Promise.all([ + fetch('/user_status').then(response => response.json()), + fetch('/get_filter').then(response => response.json()) + ]) + .then(([userData, filterData]) => { + currentUsername = userData.username; + + if (filterData.filter1) { + allFilter1Values = new Set(filterData.filter1.filter(value => value && typeof value === 'string' && value.trim() !== '')); + } + if (filterData.filter2) { + allFilter2Values = new Set(filterData.filter2.filter(value => value && typeof value === 'string' && value.trim() !== '')); + } + if (filterData.filter3) { + allFilter3Values = new Set(filterData.filter3.filter(value => value && typeof value === 'string' && value.trim() !== '')); + } + // Now load items with username information loadItems(); // Setup card images display after a short delay to ensure items are loaded @@ -3296,7 +3313,7 @@ document.addEventListener('DOMContentLoaded', ()=>{ }, 300); }) .catch(error => { - console.error('Error fetching user status:', error); + console.error('Error fetching user status or filters:', error); loadItems(); // Load items anyway in case of error }); @@ -3697,10 +3714,10 @@ document.addEventListener('DOMContentLoaded', ()=>{ } }); - // Populate filter options - populateFilterOptions('filter1-options', [...filter1Values].sort(), 1); - populateFilterOptions('filter2-options', [...filter2Values].sort(), 2); - populateFilterOptions('filter3-options', [...filter3Values].sort(), 3); + // Populate filter options using server-provided full filter lists when available. + populateFilterOptions('filter1-options', allFilter1Values.size ? [...allFilter1Values].sort() : [...filter1Values].sort(), 1); + populateFilterOptions('filter2-options', allFilter2Values.size ? [...allFilter2Values].sort() : [...filter2Values].sort(), 2); + populateFilterOptions('filter3-options', allFilter3Values.size ? [...allFilter3Values].sort() : [...filter3Values].sort(), 3); if (!append) { itemsContainer.scrollLeft = 0;