openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

design: Frontend-Redesign v2 — Design-System, kompaktere UI, Mikrointeraktionen

Browse Source 
Umfassendes Redesign des gesamten Frontends in 9 Schritten:

1. Design-Tokens: Neutral-Farbskala (50–950), Modul-Akzentfarben,
   --text-2xs Token, Easing-Kurven, Z-Index-System, Dark-Mode-Overrides
2. Reset: Reduced-motion Query (prefers-reduced-motion)
3. Sidebar/Navigation: Flaches Design, Glassmorphismus Bottom-Nav,
   Akzentstreifen-Indikator, collapsed/expanded States
4. Layout-Grid: Master-Detail, Content-Aside, Sticky-Header-Primitives
5. Cards/Container: Einheitliches Card-Pattern, Modal-System (Bottom-Sheet
   mobil, zentriert Desktop), Skeleton-Loading, Empty-States
6. Dashboard: Kompaktere Widgets, Token-basierte Farben/Schatten,
   4-Spalten-Grid ab 1440px
7. Module: Mobile-first Kanban/Day-Slots/Budget-Summary, border-subtle
   für sekundäre Trennlinien, responsive Quick-Add, Token-Migration
   aller hardcoded px/rgba-Werte
8. Mikrointeraktionen: Page-out Fade, Checkbox-Pop-Animation,
   Hover-States für Filter/Tabs/Toggles, Toast-Ausblendung,
   done-State Opacity-Transition
9. Feinschliff: Print-Styles, --text-2xs Token für Micro-Labels,
   Konsistenz-Audit (alle 9/10/11px → Token)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-25 20:46:45 +01:00
parent 1bea4f1428
commit 76165da592
14 changed files with 1197 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/meals.css
+17 -17
View File
@@ -65,7 +65,7 @@
}
.day-column {
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border-subtle);
}
.day-column:last-child {
@@ -103,14 +103,14 @@
.day-slots {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2);
padding: 0 var(--space-4) var(--space-4);
padding: 0 var(--space-4) var(--space-3);
}
@media (max-width: 600px) {
@media (min-width: 600px) {
.day-slots {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
}
}
@@ -118,7 +118,7 @@
* Mahlzeit-Slot
* -------------------------------------------------------- */
.meal-slot {
min-height: 80px;
min-height: 72px;
border-radius: var(--radius-sm);
border: 1.5px dashed var(--color-border);
background-color: var(--color-surface);
@@ -142,11 +142,11 @@
padding: var(--space-1) var(--space-2) 0;
}
/* Slot-Typ-Farben */
.meal-slot[data-type="breakfast"] .meal-slot__type-label { color: #FF9500; }
.meal-slot[data-type="lunch"] .meal-slot__type-label { color: #34C759; }
.meal-slot[data-type="dinner"] .meal-slot__type-label { color: #007AFF; }
.meal-slot[data-type="snack"] .meal-slot__type-label { color: #FF6B35; }
/* Slot-Typ-Farben — zentrale Tokens aus tokens.css */
.meal-slot[data-type="breakfast"] .meal-slot__type-label { color: var(--meal-breakfast); }
.meal-slot[data-type="lunch"] .meal-slot__type-label { color: var(--meal-lunch); }
.meal-slot[data-type="dinner"] .meal-slot__type-label { color: var(--meal-dinner); }
.meal-slot[data-type="snack"] .meal-slot__type-label { color: var(--meal-snack); }
.meal-slot__add-btn {
flex: 1;
@@ -236,7 +236,7 @@
.meal-card__action-btn:hover {
color: var(--color-danger);
background-color: var(--color-surface-2, rgba(0,0,0,0.04));
background-color: var(--color-surface-2);
}
.meal-card__action-btn--shopping:hover {
@@ -249,7 +249,7 @@
.meal-modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
background-color: var(--color-overlay);
z-index: var(--z-modal);
display: flex;
align-items: flex-end;
@@ -483,10 +483,10 @@
border-radius: var(--radius-full);
}
.meal-type-badge--breakfast { background: #FFF3E0; color: #FF9500; }
.meal-type-badge--lunch { background: #E8F5E9; color: #2E7D32; }
.meal-type-badge--dinner { background: #E3F2FF; color: #007AFF; }
.meal-type-badge--snack { background: #FBE9E7; color: #FF6B35; }
.meal-type-badge--breakfast { background: var(--meal-breakfast-light); color: var(--meal-breakfast); }
.meal-type-badge--lunch { background: var(--meal-lunch-light); color: var(--meal-lunch); }
.meal-type-badge--dinner { background: var(--meal-dinner-light); color: var(--meal-dinner); }
.meal-type-badge--snack { background: var(--meal-snack-light); color: var(--meal-snack); }
/* --------------------------------------------------------
* Leer-Zustand