From d83a6f60ef363462a4e382a15c7618fd2556d752 Mon Sep 17 00:00:00 2001 From: Meleki Date: Sat, 28 Feb 2026 21:15:44 +0100 Subject: [PATCH] Settings: Seitenbreite mit localStorage-Persistierung und Reset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Settings-Page mit Range-Slider für Seitenbreite (600-1800px) - JSON-basierter localStorage-Key 'settings' (zukunftssicher) - applySettings() beim App-Start für sofortige Wiederherstellung - Reset-Button mit Confirm-Dialog setzt alle Settings auf Defaults - Sanfte Breitenübergänge via --transition-duration --- wwwroot/css/dashboard.css | 2 +- wwwroot/css/main.css | 1 + wwwroot/css/nav.css | 1 + wwwroot/css/placeholder.css | 75 +++++++++++++++++++++++++++++-- wwwroot/css/theme.css | 1 + wwwroot/index.html | 23 ++++++++-- wwwroot/js/pages/settings-page.js | 64 ++++++++++++++++++++++++++ 7 files changed, 160 insertions(+), 7 deletions(-) create mode 100644 wwwroot/js/pages/settings-page.js diff --git a/wwwroot/css/dashboard.css b/wwwroot/css/dashboard.css index 256f220..48adf01 100644 --- a/wwwroot/css/dashboard.css +++ b/wwwroot/css/dashboard.css @@ -16,7 +16,7 @@ .card-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--page-spacing); } diff --git a/wwwroot/css/main.css b/wwwroot/css/main.css index d6ec577..d448e41 100644 --- a/wwwroot/css/main.css +++ b/wwwroot/css/main.css @@ -21,6 +21,7 @@ header { overflow: hidden; width: var(--page-width); max-width: 100%; + transition: var(--transition-duration); } .page-content { diff --git a/wwwroot/css/nav.css b/wwwroot/css/nav.css index c7c3ac6..911c2cb 100644 --- a/wwwroot/css/nav.css +++ b/wwwroot/css/nav.css @@ -12,6 +12,7 @@ width: var(--page-width); max-width: 100%; padding: var(--box-padding); + transition: var(--transition-duration); } .nav-brand, diff --git a/wwwroot/css/placeholder.css b/wwwroot/css/placeholder.css index eb96cff..c508de1 100644 --- a/wwwroot/css/placeholder.css +++ b/wwwroot/css/placeholder.css @@ -1,7 +1,76 @@ -.settings-page .placeholder { - flex: 1; +/* ── Settings ── */ + +.settings { + padding: var(--page-padding); + width: 100%; display: flex; flex-direction: column; + gap: var(--page-spacing); +} + +.settings-section h2 { + margin-bottom: var(--box-spacing); + padding-bottom: var(--badge-spacing); + border-bottom: var(--border-width) solid var(--f2-border); +} + +.setting-row { + display: flex; + align-items: center; + justify-content: space-between; gap: var(--box-spacing); - padding: var(--page-padding); + padding: var(--box-padding); + background: var(--f1-bg); + border: var(--border-width) solid var(--f1-border); + border-radius: var(--border-radius); +} + +.setting-info { + display: flex; + flex-direction: column; + gap: .15em; +} + +.setting-info label { + color: var(--text-accent); + font-weight: 500; +} + +.setting-hint { + opacity: var(--semi-transparent); + font-size: var(--font-size); +} + +.setting-control { + display: flex; + align-items: center; + gap: var(--box-spacing); + flex-shrink: 0; +} + +.setting-control input[type="range"] { + width: 200px; + cursor: pointer; + accent-color: var(--primary); + padding: 0; + border: none; + background: transparent; +} + +.setting-control input[type="range"]:hover { + border: none; + filter: none; +} + +.setting-value { + min-width: 4.5em; + text-align: right; + font-family: var(--mono); + font-size: var(--mono-size); + color: var(--text-accent); +} + +.settings-reset { + border-top: var(--border-width) solid var(--f2-border); + padding-top: var(--box-spacing); } diff --git a/wwwroot/css/theme.css b/wwwroot/css/theme.css index ddd8cc6..2e69b49 100644 --- a/wwwroot/css/theme.css +++ b/wwwroot/css/theme.css @@ -30,4 +30,5 @@ --menu-item-padding: .5em .75em; --page-width: 900px; --hover-filter: contrast(.9); + --transition-duration: 220ms; } diff --git a/wwwroot/index.html b/wwwroot/index.html index 35f7db4..7e01251 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -177,9 +177,25 @@

Einstellungen

-
-

Einstellungen

-

Hier können diverse Einstellungen getroffen werden.

+
+
+
+

Darstellung

+
+
+ + Maximale Breite des Inhaltsbereichs +
+
+ + 900px +
+
+
+
+ +
+
@@ -207,6 +223,7 @@ + diff --git a/wwwroot/js/pages/settings-page.js b/wwwroot/js/pages/settings-page.js new file mode 100644 index 0000000..039d479 --- /dev/null +++ b/wwwroot/js/pages/settings-page.js @@ -0,0 +1,64 @@ +// ── Settings Page ── + +const SETTINGS_KEY = 'settings'; + +const SETTINGS_DEFAULTS = { + pageWidth: 900 +}; + +function loadSettings() { + try { + const raw = localStorage.getItem(SETTINGS_KEY); + if (raw) return Object.assign({}, SETTINGS_DEFAULTS, JSON.parse(raw)); + } catch (_) {} + return Object.assign({}, SETTINGS_DEFAULTS); +} + +function saveSettings(settings) { + localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings)); +} + +function resetSettings() { + localStorage.removeItem(SETTINGS_KEY); +} + +function applySettings() { + const s = loadSettings(); + document.documentElement.style.setProperty('--page-width', s.pageWidth + 'px'); +} + +// Apply on load +applySettings(); + +registerPage('settings', { + init() { + const slider = document.getElementById('settingPageWidth'); + const display = document.getElementById('settingPageWidthValue'); + const resetBtn = document.getElementById('settingsResetBtn'); + + const s = loadSettings(); + slider.value = s.pageWidth; + display.textContent = s.pageWidth + 'px'; + + slider.addEventListener('input', () => { + display.textContent = slider.value + 'px'; + }); + + slider.addEventListener('change', () => { + const s = loadSettings(); + s.pageWidth = parseInt(slider.value, 10); + saveSettings(s); + applySettings(); + }); + + resetBtn.addEventListener('click', () => { + if (!confirm('Alle Einstellungen auf Standard zurücksetzen?')) return; + resetSettings(); + applySettings(); + // Update UI + slider.value = SETTINGS_DEFAULTS.pageWidth; + display.textContent = SETTINGS_DEFAULTS.pageWidth + 'px'; + }); + }, + destroy() {} +});