From 72515c5a69fc84a0c0777ccd6b56b7b86ceb78de Mon Sep 17 00:00:00 2001 From: Ulas Date: Sun, 5 Apr 2026 01:23:38 +0200 Subject: [PATCH] fix(styles): resolve design system audit violations and touch scrolling - Replace hardcoded px values with design tokens (--space-0h, --space-px, --space-1, --target-sm/md/lg) across layout, calendar, dashboard CSS - Fix rgba(255,255,255,0.35) spinner border to use var(--color-glass-hover) - Fix modal close icon from off-grid 18px to 16px - Fix touch scrolling on mobile: add min-height: 0 and -webkit-overflow-scrolling: touch to .app-content --- public/components/modal.js | 18 +++++++++++++++++- public/styles/calendar.css | 6 +++--- public/styles/dashboard.css | 6 +++--- public/styles/layout.css | 33 ++++++++++++++++++--------------- 4 files changed, 41 insertions(+), 22 deletions(-) diff --git a/public/components/modal.js b/public/components/modal.js index 1045064..52cc234 100644 --- a/public/components/modal.js +++ b/public/components/modal.js @@ -195,7 +195,7 @@ export function openModal({ title, content, onSave, onDelete, size = 'md' } = {}

${title}

@@ -465,6 +465,22 @@ export function btnSuccess(btn, originalLabel) { }, 700); } +/** + * Versetzt einen Button in den Lade-Zustand (Spinner, nicht klickbar). + * Gibt eine Cleanup-Funktion zurück, die den Originalzustand wiederherstellt. + * + * @param {HTMLButtonElement} btn + * @returns {() => void} cleanup + */ +export function btnLoading(btn) { + btn.classList.add('btn--loading'); + btn.disabled = true; + return () => { + btn.classList.remove('btn--loading'); + btn.disabled = false; + }; +} + /** * Zeigt Fehler-Feedback auf einem Button (Shake-Animation). * @param {HTMLButtonElement} btn diff --git a/public/styles/calendar.css b/public/styles/calendar.css index 88d79df..facf9af 100644 --- a/public/styles/calendar.css +++ b/public/styles/calendar.css @@ -69,10 +69,10 @@ .cal-toolbar__views { display: flex; - gap: 2px; + gap: var(--space-0h); background-color: var(--color-surface-2); border-radius: var(--radius-sm); - padding: 2px; + padding: var(--space-0h); } .cal-toolbar__view-btn { @@ -197,7 +197,7 @@ .month-day__more { font-size: var(--text-xs); color: var(--color-text-secondary); - padding: 1px 4px; + padding: var(--space-px) var(--space-1); cursor: pointer; } diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css index 12a88f4..7f55381 100644 --- a/public/styles/dashboard.css +++ b/public/styles/dashboard.css @@ -135,7 +135,7 @@ color: var(--color-text-on-accent); font-size: var(--text-xs); font-weight: var(--font-weight-medium); - padding: 2px var(--space-2); + padding: var(--space-0h) var(--space-2); border-radius: var(--radius-full); } @@ -186,7 +186,7 @@ font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; - gap: 2px; + gap: var(--space-0h); transition: opacity var(--transition-fast); } @@ -395,7 +395,7 @@ .meal-slots { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 1px; + gap: var(--space-px); background-color: var(--color-border); } diff --git a/public/styles/layout.css b/public/styles/layout.css index 0b5de8b..b9d2d48 100644 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -95,9 +95,11 @@ * -------------------------------------------------------- */ .app-content { flex: 1; + min-height: 0; padding-bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior-y: contain; + -webkit-overflow-scrolling: touch; } /* Sidebar auf Mobile verstecken */ @@ -177,7 +179,7 @@ flex-direction: column; align-items: center; justify-content: center; - gap: 2px; + gap: var(--space-0h); padding: var(--space-1) var(--space-1); color: var(--color-text-tertiary); transition: color var(--transition-fast), transform 0.12s ease; @@ -260,8 +262,8 @@ .page-fab { bottom: var(--space-8); right: var(--space-8); - width: 48px; - height: 48px; + width: var(--target-lg); + height: var(--target-lg); } } @@ -288,6 +290,7 @@ .app-content { flex: 1; + min-height: 0; padding-bottom: 0; margin-left: var(--sidebar-width); transition: margin-left var(--transition-slow); @@ -327,8 +330,8 @@ /* App-Icon als kompaktes Logo */ .nav-sidebar__logo::before { content: 'O'; - width: 32px; - height: 32px; + width: var(--target-sm); + height: var(--target-sm); border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-accent) 0%, #7C5CFC 100%); color: var(--color-text-on-accent); @@ -363,7 +366,7 @@ justify-content: center; align-items: center; border-radius: var(--radius-sm); - padding: 8px var(--space-2); + padding: var(--space-2) var(--space-2); gap: 0; min-height: var(--target-lg); font-size: var(--text-sm); @@ -462,7 +465,7 @@ /* Nav-Items: horizontal mit Label */ .nav-sidebar .nav-item { justify-content: flex-start; - padding: 8px var(--space-3); + padding: var(--space-2) var(--space-3); gap: var(--space-3); } @@ -669,8 +672,8 @@ } .modal-panel__close { - width: 32px; - height: 32px; + width: var(--target-sm); + height: var(--target-sm); display: flex; align-items: center; justify-content: center; @@ -748,7 +751,7 @@ left: 50%; transform: translateX(-50%); width: 36px; - height: 4px; + height: var(--space-1); background: var(--color-border); border-radius: var(--radius-full); } @@ -908,8 +911,8 @@ @media (min-width: 1024px) { .fab { bottom: var(--space-8); - width: 48px; - height: 48px; + width: var(--target-lg); + height: var(--target-lg); } } @@ -1427,8 +1430,8 @@ } .rrule-day { - width: 40px; - height: 40px; + width: var(--target-md); + height: var(--target-md); border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: transparent; @@ -1514,7 +1517,7 @@ height: 14px; margin-top: -7px; margin-left: -7px; - border: 2px solid rgba(255, 255, 255, 0.35); + border: 2px solid var(--color-glass-hover); border-top-color: var(--color-text-on-accent); border-radius: var(--radius-full); animation: btn-spin 0.55s linear infinite;