diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cbd1cd..4d7d674 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.23.6] - 2026-04-22 + +### Changed +- Dashboard: greeting widget now adapts its gradient to the time of day — warm amber-orange in the morning (before 11:00), indigo during the day, and violet in the evening (after 18:00) +- Dashboard: FAB speed-dial open/close rotation now uses a spring cubic-bezier for a more natural feel +- Navigation: sidebar logo is now a proper SVG house icon on a gradient background instead of the CSS letter placeholder + ## [0.23.5] - 2026-04-22 ### Changed diff --git a/package-lock.json b/package-lock.json index 38c1c1b..b7e518e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oikos", - "version": "0.23.5", + "version": "0.23.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oikos", - "version": "0.23.5", + "version": "0.23.6", "license": "MIT", "dependencies": { "bcrypt": "^6.0.0", diff --git a/package.json b/package.json index 2a794f1..bcd629b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oikos", - "version": "0.23.5", + "version": "0.23.6", "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.", "main": "server/index.js", "type": "module", diff --git a/public/pages/dashboard.js b/public/pages/dashboard.js index b318ede..00fa84e 100644 --- a/public/pages/dashboard.js +++ b/public/pages/dashboard.js @@ -196,9 +196,11 @@ function renderGreeting(user, stats = {}) { `); const time = formatTime(new Date()); + const hour = new Date().getHours(); + const timeVariant = hour < 11 ? 'morning' : hour < 18 ? 'day' : 'evening'; return ` -
+
${formatDate(new Date())} - ${time}
diff --git a/public/router.js b/public/router.js index 6c5985a..769e626 100644 --- a/public/router.js +++ b/public/router.js @@ -302,6 +302,27 @@ function renderAppShell(container) { sidebar.setAttribute('aria-label', t('nav.main')); const sidebarLogo = document.createElement('div'); sidebarLogo.className = 'nav-sidebar__logo'; + + // SVG-Logomark: Haus-Symbol (Lucide "home" path, 24×24 viewBox) + const logomark = document.createElement('div'); + logomark.className = 'nav-sidebar__logomark'; + logomark.setAttribute('aria-hidden', 'true'); + const logoSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + logoSvg.setAttribute('viewBox', '0 0 24 24'); + logoSvg.setAttribute('fill', 'none'); + logoSvg.setAttribute('stroke', 'currentColor'); + logoSvg.setAttribute('stroke-width', '2.5'); + logoSvg.setAttribute('stroke-linecap', 'round'); + logoSvg.setAttribute('stroke-linejoin', 'round'); + const housePath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + housePath.setAttribute('d', 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'); + const doorPath = document.createElementNS('http://www.w3.org/2000/svg', 'polyline'); + doorPath.setAttribute('points', '9 22 9 12 15 12 15 22'); + logoSvg.appendChild(housePath); + logoSvg.appendChild(doorPath); + logomark.appendChild(logoSvg); + sidebarLogo.appendChild(logomark); + const sidebarLogoSpan = document.createElement('span'); sidebarLogoSpan.textContent = 'Oikos'; sidebarLogo.appendChild(sidebarLogoSpan); diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css index dd812e0..fb3ad88 100644 --- a/public/styles/dashboard.css +++ b/public/styles/dashboard.css @@ -92,12 +92,23 @@ --greeting-from: var(--color-accent-active); --greeting-to: var(--color-accent); background: linear-gradient(135deg, var(--greeting-from), var(--greeting-to)); + transition: background var(--transition-slow); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--color-text-on-accent); grid-column: 1 / -1; } +/* Tageszeit-Varianten */ +.widget-greeting[data-time-variant="morning"] { + --greeting-from: var(--greeting-morning-from); + --greeting-to: var(--greeting-morning-to); +} +.widget-greeting[data-time-variant="evening"] { + --greeting-from: var(--greeting-evening-from); + --greeting-to: var(--greeting-evening-to); +} + .widget-greeting__inner { display: flex; align-items: flex-start; @@ -974,7 +985,7 @@ justify-content: center; cursor: pointer; transition: - transform var(--transition-base), + transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--transition-fast); border: none; flex-shrink: 0; diff --git a/public/styles/layout.css b/public/styles/layout.css index 4c86bf6..595789c 100755 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -546,22 +546,24 @@ flex-shrink: 0; } - /* App-Icon als kompaktes Logo */ - .nav-sidebar__logo::before { - content: 'O'; + /* SVG-Logomark (via DOM API in router.js injiziert) */ + .nav-sidebar__logomark { width: var(--target-sm); height: var(--target-sm); border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%); color: var(--color-text-on-accent); - font-size: var(--text-sm); - font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } + .nav-sidebar__logomark svg { + width: 16px; + height: 16px; + } + /* Logo-Text verstecken im collapsed-Modus */ .nav-sidebar__logo > span { display: none; @@ -662,10 +664,9 @@ gap: var(--space-3); } - .nav-sidebar__logo::before { + .nav-sidebar__logomark { width: 28px; height: 28px; - font-size: var(--text-xs); } .nav-sidebar__logo > span { diff --git a/public/styles/tokens.css b/public/styles/tokens.css index ae0fcf4..d834e16 100644 --- a/public/styles/tokens.css +++ b/public/styles/tokens.css @@ -96,6 +96,12 @@ --_color-accent-active: #3730A3; --color-accent-active: var(--_color-accent-active); /* Indigo-800 */ --color-accent-deep: #2E2D82; /* Tiefer Akzent für Gradienten, Wetter-Widget */ + + /* Greeting-Gradienten: Tageszeit-Varianten */ + --greeting-morning-from: #C2410C; /* Orange-700 — Morgensonne */ + --greeting-morning-to: #D97706; /* Amber-600 */ + --greeting-evening-from: #6D28D9; /* Violet-700 */ + --greeting-evening-to: #8250DF; /* = --module-calendar */ --_color-accent-secondary: #7C5CFC; --color-accent-secondary: var(--_color-accent-secondary); /* Sekundärer Akzent für Logo-Gradient */ --_color-accent-light: #EEF2FF;