From c849f7765152196e5d61e1690d2ce9581c6ec12e Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Fri, 27 Mar 2026 10:43:39 +0100 Subject: [PATCH] =?UTF-8?q?Einstellungen:=20Vollbild-Seite,=20Kontrast,=20?= =?UTF-8?q?Stundenh=C3=B6he,=20KW-Anzeige=20-=20Einstellungen=20von=20Moda?= =?UTF-8?q?l-Popup=20auf=20Vollbild-Seite=20mit=20Seitennavigation=20umges?= =?UTF-8?q?tellt=20-=20Schriftkontrast=20(4=20Stufen)=20und=20Linienkontra?= =?UTF-8?q?st=20(4=20Stufen)=20pro=20Benutzer=20gespeichert=20-=20Stundenh?= =?UTF-8?q?=C3=B6he=20(40/60/80/100px)=20in=20Wochen-/Tagesansicht=20per?= =?UTF-8?q?=20Einstellung=20steuerbar=20-=20Kalenderwoche=20in=20Monats-?= =?UTF-8?q?=20und=20Wochenansicht=20gr=C3=B6sser=20dargestellt=20-=20CSS-V?= =?UTF-8?q?ariable=20--hour-h=20f=C3=BCr=20dynamische=20Zeitraster-H=C3=B6?= =?UTF-8?q?he=20in=20week.js=20und=20app.css=20-=20Backend:=20neue=20Felde?= =?UTF-8?q?r=20text=5Fcontrast,=20line=5Fcontrast,=20hour=5Fheight=20in=20?= =?UTF-8?q?UserSettings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/main.py | 15 +++ backend/models.py | 3 + backend/routers/settings_router.py | 6 + frontend/css/app.css | 91 +++++++++++-- frontend/index.html | 207 ++++++++++++++++++----------- frontend/js/calendar.js | 68 ++++++++-- frontend/js/utils.js | 33 ++++- frontend/js/views/week.js | 35 ++--- 8 files changed, 328 insertions(+), 130 deletions(-) diff --git a/backend/main.py b/backend/main.py index 9cc9988..613c1f6 100644 --- a/backend/main.py +++ b/backend/main.py @@ -43,6 +43,21 @@ def _migrate(): logging.info("Migration: added sidebar_hidden to google_calendars") except Exception: pass + try: + conn.execute(text("ALTER TABLE user_settings ADD COLUMN text_contrast INTEGER DEFAULT 3")) + conn.commit() + except Exception: + pass + try: + conn.execute(text("ALTER TABLE user_settings ADD COLUMN line_contrast INTEGER DEFAULT 3")) + conn.commit() + except Exception: + pass + try: + conn.execute(text("ALTER TABLE user_settings ADD COLUMN hour_height INTEGER DEFAULT 60")) + conn.commit() + except Exception: + pass _migrate() diff --git a/backend/models.py b/backend/models.py index eef1bc3..83b277a 100644 --- a/backend/models.py +++ b/backend/models.py @@ -75,6 +75,9 @@ class UserSettings(Base): accent_color = Column(String(7), default="#ea4335") today_color = Column(String(7), default="#4285f4") dim_past_events = Column(Boolean, default=False) + text_contrast = Column(Integer, default=3) + line_contrast = Column(Integer, default=3) + hour_height = Column(Integer, default=60) user = relationship("User", back_populates="settings") diff --git a/backend/routers/settings_router.py b/backend/routers/settings_router.py index 35f506a..98fcfa9 100644 --- a/backend/routers/settings_router.py +++ b/backend/routers/settings_router.py @@ -18,6 +18,9 @@ class SettingsUpdate(BaseModel): accent_color: Optional[str] = None today_color: Optional[str] = None dim_past_events: Optional[bool] = None + text_contrast: Optional[int] = None + line_contrast: Optional[int] = None + hour_height: Optional[int] = None def _settings_dict(s: models.UserSettings) -> dict: @@ -28,6 +31,9 @@ def _settings_dict(s: models.UserSettings) -> dict: "accent_color": s.accent_color, "today_color": s.today_color, "dim_past_events": s.dim_past_events, + "text_contrast": s.text_contrast or 3, + "line_contrast": s.line_contrast or 3, + "hour_height": s.hour_height or 60, } diff --git a/frontend/css/app.css b/frontend/css/app.css index dfa9ba6..7277927 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -440,12 +440,12 @@ a { color: var(--primary); text-decoration: none; } /* ── Month View ─────────────────────────────────────────── */ .month-view { display: flex; flex-direction: column; height: 100%; } .month-header { - display: grid; grid-template-columns: 32px repeat(7, 1fr); + display: grid; grid-template-columns: 38px repeat(7, 1fr); border-bottom: 1px solid var(--border); flex-shrink: 0; } .month-kw-header { padding: 8px 0; text-align: center; - font-size: 10px; font-weight: 600; text-transform: uppercase; + font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); border-right: 1px solid var(--border-light); } @@ -455,7 +455,7 @@ a { color: var(--primary); text-decoration: none; } letter-spacing: .5px; color: var(--text-2); } .month-grid { - display: grid; grid-template-columns: 32px repeat(7, 1fr); + display: grid; grid-template-columns: 38px repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); flex: 1; overflow: hidden; } @@ -464,7 +464,7 @@ a { color: var(--primary); text-decoration: none; } border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; - font-size: 10px; color: var(--text-3); font-weight: 500; + font-size: 13px; color: var(--text-3); font-weight: 700; cursor: default; user-select: none; min-height: 0; } @@ -516,7 +516,7 @@ a { color: var(--primary); text-decoration: none; } } /* KW badge in week view header gutter */ .week-kw-badge { - font-size: 10px; font-weight: 600; color: var(--text-3); + font-size: 14px; font-weight: 700; color: var(--text-3); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; @@ -563,7 +563,7 @@ a { color: var(--primary); text-decoration: none; } .week-body { display: flex; flex: 1; overflow-y: auto; position: relative; } .week-time-col { width: 56px; flex-shrink: 0; position: relative; } .time-label { - height: 60px; display: flex; align-items: flex-start; justify-content: flex-end; + height: var(--hour-h, 60px); display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 8px; padding-top: 6px; font-size: 10px; color: var(--text-3); } @@ -571,18 +571,18 @@ a { color: var(--primary); text-decoration: none; } .week-day-col { flex: 1; border-left: 1px solid var(--border); position: relative; - min-height: calc(60px * 24); + min-height: calc(var(--hour-h, 60px) * 24); } .hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border-light); - height: 60px; + height: var(--hour-h, 60px); } .hour-line:first-child { border-top: none; } .half-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-light); - top: 30px; + top: calc(var(--hour-h, 60px) / 2); } /* Current time indicator */ @@ -699,7 +699,78 @@ a { color: var(--primary); text-decoration: none; } .popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; } -/* ── Settings ───────────────────────────────────────────── */ +/* ── Settings Page ──────────────────────────────────────── */ +#modal-settings.modal-overlay { + align-items: stretch; justify-content: stretch; padding: 0; background: var(--bg-app); +} +.settings-page-card { + width: 100%; height: 100%; + display: flex; flex-direction: column; + background: var(--bg-app); overflow: hidden; +} +.settings-page-header { + display: flex; align-items: center; gap: 8px; + padding: 14px 20px; border-bottom: 1px solid var(--border); + flex-shrink: 0; +} +.settings-page-header h3 { font-size: 16px; font-weight: 600; color: var(--text-1); margin: 0; } +.settings-page-body { + display: flex; flex: 1; overflow: hidden; +} +.settings-nav { + width: 200px; flex-shrink: 0; + border-right: 1px solid var(--border); + padding: 12px 8px; + display: flex; flex-direction: column; gap: 2px; +} +.settings-nav-btn { + display: block; width: 100%; text-align: left; + padding: 9px 14px; border-radius: var(--radius-sm); + font-size: 14px; color: var(--text-2); + background: none; border: none; cursor: pointer; + transition: background .15s, color .15s; +} +.settings-nav-btn:hover { background: var(--bg-hover); color: var(--text-1); } +.settings-nav-btn.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; } +.settings-panels { + flex: 1; overflow-y: auto; padding: 24px 28px; +} +.settings-panel { display: none; } +.settings-panel.active { display: block; } + +/* Panel typography */ +.panel-title { + font-size: 14px; font-weight: 600; color: var(--text-1); margin: 0 0 4px; +} +.panel-desc { + font-size: 12px; color: var(--text-3); margin: 0 0 12px; +} + +/* Contrast / option selectors */ +.contrast-selector { + display: flex; gap: 8px; flex-wrap: wrap; +} +.contrast-btn { + display: flex; flex-direction: column; align-items: center; gap: 6px; + padding: 10px 16px; border-radius: var(--radius); + border: 1px solid var(--border); background: var(--bg-surface); + cursor: pointer; transition: border-color .15s, background .15s; + min-width: 70px; +} +.contrast-btn:hover { border-color: var(--primary); } +.contrast-btn.active { border-color: var(--primary); background: var(--primary-dim); } +.contrast-btn span { font-size: 18px; font-weight: 700; line-height: 1; } +.contrast-lbl { font-size: 11px; color: var(--text-2); white-space: nowrap; } +.line-preview { + display: block; width: 36px; height: 0; + border-top: 2px solid; border-radius: 1px; + margin: 6px 0; +} +.hour-preview { + font-size: 14px; line-height: 1; color: var(--text-2); +} + +/* ── Settings (legacy) ──────────────────────────────────── */ .settings-section { margin-bottom: 28px; } .settings-section h4 { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .badge-admin { diff --git a/frontend/index.html b/frontend/index.html index 609a308..bf053c1 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -378,96 +378,143 @@ - +