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

feat: merge UX polish v0.2.0 (14 tasks, 4 layers)

Browse Source
This commit is contained in:
Ulas
2026-03-30 22:02:03 +02:00
parent 0dbea82a22 656c1290dc
commit 36de5fa477
23 changed files with 673 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/budget.css
+6 -14
View File
@@ -4,6 +4,11 @@
* Abhängigkeiten: tokens.css, layout.css
*/
/* --------------------------------------------------------
* Modul-Akzent
* -------------------------------------------------------- */
.budget-page { --module-accent: var(--module-budget); }
/* --------------------------------------------------------
* Seiten-Layout
* -------------------------------------------------------- */
@@ -198,7 +203,7 @@
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
padding: var(--space-4);
border-bottom: 1px solid var(--color-border-subtle);
cursor: pointer;
transition: background-color var(--transition-fast);
@@ -276,19 +281,6 @@
color: var(--color-danger);
}
/* --------------------------------------------------------
* Leer-Zustand
* -------------------------------------------------------- */
.budget-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-secondary);
}
/* --------------------------------------------------------
* Budget-Modal Content-Styles (Overlay/Panel via shared modal.js)
public/styles/contacts.css
+6 -14
View File
@@ -4,6 +4,11 @@
* Abhängigkeiten: tokens.css, layout.css
*/
/* --------------------------------------------------------
* Modul-Akzent
* -------------------------------------------------------- */
.contacts-page { --module-accent: var(--module-contacts); }
/* --------------------------------------------------------
* Seiten-Layout
* -------------------------------------------------------- */
@@ -140,7 +145,7 @@
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
padding: var(--space-4);
border-bottom: 1px solid var(--color-border-subtle);
cursor: pointer;
transition: background-color var(--transition-fast);
@@ -216,17 +221,4 @@
.contact-action-btn--mail:hover { background-color: var(--color-accent-light); color: var(--color-accent); }
.contact-action-btn--maps:hover { background-color: var(--color-warning-light); color: var(--color-warning); }
/* --------------------------------------------------------
* Leer-Zustand
* -------------------------------------------------------- */
.contacts-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-secondary);
}
public/styles/dashboard.css
+9 -2
View File
@@ -4,6 +4,13 @@
* Abhängigkeiten: tokens.css, layout.css
*/
/* --------------------------------------------------------
* Modul-Akzent
* -------------------------------------------------------- */
.dashboard {
--module-accent: var(--module-dashboard);
}
/* --------------------------------------------------------
* Dashboard-Layout
* -------------------------------------------------------- */
@@ -761,7 +768,7 @@
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background-color: var(--module-accent, var(--color-btn-primary));
background-color: var(--module-accent, var(--color-accent));
color: #ffffff;
box-shadow: var(--shadow-lg);
display: flex;
@@ -783,7 +790,7 @@
}
.fab-main:hover {
background-color: color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 85%, black);
background-color: color-mix(in srgb, var(--module-accent, var(--color-accent)) 85%, black);
}
.fab-main:active {
public/styles/layout.css
+138 -13
View File
@@ -44,22 +44,51 @@
}
/* --------------------------------------------------------
* Seiten-Übergangs-Animation
* Seiten-Übergangs-Animation (direktional)
* -------------------------------------------------------- */
@keyframes page-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
@keyframes page-slide-in-right {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes page-slide-in-left {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes page-out-left {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-20px); }
}
@keyframes page-out-right {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
@keyframes page-out {
from { opacity: 1; }
to { opacity: 0; }
.page-transition--in-right {
animation: page-slide-in-right 0.2s var(--ease-out) forwards;
}
.page-transition--out {
animation: page-out 0.12s ease forwards;
.page-transition--in-left {
animation: page-slide-in-left 0.2s var(--ease-out) forwards;
}
.page-transition--out-left {
animation: page-out-left 0.12s ease forwards;
pointer-events: none;
}
.page-transition--out-right {
animation: page-out-right 0.12s ease forwards;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.page-transition--in-right,
.page-transition--in-left {
animation: none;
opacity: 1;
}
.page-transition--out-left,
.page-transition--out-right {
animation: none;
}
}
/* --------------------------------------------------------
* Layout: Mobile (Standard, < 1024px)
@@ -192,7 +221,7 @@
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background-color: var(--module-accent, var(--color-btn-primary));
background-color: var(--module-accent, var(--color-accent));
color: #ffffff;
box-shadow: var(--shadow-lg);
display: flex;
@@ -206,7 +235,7 @@
}
.page-fab:hover {
background-color: color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 85%, black);
background-color: color-mix(in srgb, var(--module-accent, var(--color-accent)) 85%, black);
}
.page-fab:active {
@@ -674,6 +703,45 @@
to { opacity: 1; transform: scale(1); }
}
/* ── Bottom Sheet: Handle + Closing Animation (Mobile < 768px) ── */
@media (max-width: 767px) {
.modal-panel {
/* Extra top padding for the drag handle */
padding-top: calc(var(--space-4) + 20px);
position: relative;
}
.modal-panel::before {
content: '';
position: absolute;
top: var(--space-3);
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
background: var(--color-border);
border-radius: var(--radius-full);
}
.modal-panel--closing {
animation: sheet-out 0.2s ease forwards;
}
}
@keyframes sheet-out {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
.modal-panel {
animation: none;
}
.modal-panel--closing {
animation: none;
}
}
/* --------------------------------------------------------
* Buttons
* -------------------------------------------------------- */
@@ -774,7 +842,7 @@
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background-color: var(--color-accent);
background-color: var(--module-accent, var(--color-btn-primary));
color: #ffffff;
box-shadow: var(--shadow-lg);
display: flex;
@@ -788,6 +856,7 @@
}
.fab:hover {
background-color: color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 85%, black);
transform: scale(1.05);
}
@@ -854,6 +923,35 @@
margin-bottom: var(--space-4);
}
/* ── Inline-Validierung ── */
.form-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.form-field--error .input,
.form-field--error .form-input {
border-color: var(--color-danger);
}
.form-field--valid .input,
.form-field--valid .form-input {
border-color: var(--color-success);
}
.form-field__error {
display: none;
font-size: var(--text-sm);
color: var(--color-danger);
gap: var(--space-1);
align-items: center;
}
.form-field--error .form-field__error {
display: flex;
}
/* --------------------------------------------------------
* Skeleton-Loading
* -------------------------------------------------------- */
@@ -906,6 +1004,14 @@
line-height: var(--line-height-base);
}
.empty-state--compact {
padding: var(--space-4) var(--space-3);
gap: var(--space-2);
}
.empty-state--compact .empty-state__description {
font-size: var(--text-sm);
}
/* --------------------------------------------------------
* Responsive Grid (Utility)
* -------------------------------------------------------- */
@@ -1209,6 +1315,25 @@
border-color: var(--color-accent-hover);
}
/* ── Submit-Feedback Animationen ── */
@keyframes btn-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.btn--shaking {
animation: btn-shake 0.3s ease;
}
.btn--success {
background-color: var(--color-success) !important;
color: #fff !important;
pointer-events: none;
}
/* --------------------------------------------------------
* Print-Styles
* -------------------------------------------------------- */
public/styles/meals.css
+9 -17
View File
@@ -4,6 +4,11 @@
* Abhängigkeiten: tokens.css, layout.css
*/
/* --------------------------------------------------------
* Modul-Akzent
* -------------------------------------------------------- */
.meals-page { --module-accent: var(--module-meals); }
/* --------------------------------------------------------
* Seiten-Layout
* -------------------------------------------------------- */
@@ -180,7 +185,7 @@
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: var(--space-1) var(--space-2) var(--space-2);
padding: var(--space-4);
cursor: pointer;
}
@@ -406,21 +411,8 @@
.meal-type-badge--snack { background: var(--meal-snack-light); color: var(--meal-snack); }
/* --------------------------------------------------------
* Leer-Zustand
* Leer-Zustand (leere Slots im Wochenplan)
* -------------------------------------------------------- */
.meals-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-secondary);
}
.meals-empty__icon {
width: 56px;
height: 56px;
color: var(--color-text-disabled);
margin-bottom: var(--space-4);
.meal-slot--empty {
opacity: 0.6;
}
public/styles/notes.css
+5 -20
View File
@@ -4,6 +4,11 @@
* Abhängigkeiten: tokens.css, layout.css
*/
/* --------------------------------------------------------
* Modul-Akzent
* -------------------------------------------------------- */
.notes-page { --module-accent: var(--module-notes); }
/* --------------------------------------------------------
* Seiten-Layout
* -------------------------------------------------------- */
@@ -206,26 +211,6 @@
color: var(--color-danger);
}
/* --------------------------------------------------------
* Leer-Zustand
* -------------------------------------------------------- */
.notes-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-secondary);
column-span: all; /* Multicolumn: volle Breite */
}
.notes-empty__icon {
width: 56px;
height: 56px;
color: var(--color-text-disabled);
margin-bottom: var(--space-4);
}
/* --------------------------------------------------------
* Notes-Modal Content-Styles (Overlay/Panel via shared modal.js)
public/styles/shopping.css
+5 -30
View File
@@ -4,6 +4,11 @@
* Abhängigkeiten: tokens.css, layout.css
*/
/* --------------------------------------------------------
* Modul-Akzent
* -------------------------------------------------------- */
.shopping-page { --module-accent: var(--module-shopping); }
/* --------------------------------------------------------
* Seiten-Layout
* -------------------------------------------------------- */
@@ -411,36 +416,6 @@
.item-delete:hover { color: var(--color-danger); }
/* --------------------------------------------------------
* Leer-Zustand
* -------------------------------------------------------- */
.shopping-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-6);
text-align: center;
flex: 1;
}
.shopping-empty__icon {
width: 56px;
height: 56px;
color: var(--color-text-disabled);
margin-bottom: var(--space-4);
}
.shopping-empty__title {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.shopping-empty__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
/* --------------------------------------------------------
* No-Lists-Zustand
public/styles/tasks.css
+6 -26
View File
@@ -4,6 +4,11 @@
* Abhängigkeiten: tokens.css, layout.css
*/
/* --------------------------------------------------------
* Modul-Akzent
* -------------------------------------------------------- */
.tasks-page { --module-accent: var(--module-tasks); }
/* --------------------------------------------------------
* Seiten-Layout
* -------------------------------------------------------- */
@@ -248,7 +253,7 @@
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
padding: var(--space-4);
}
/* Status-Checkbox */
@@ -624,29 +629,4 @@
opacity: 0.5;
}
/* --------------------------------------------------------
* Leer-Zustand
* -------------------------------------------------------- */
.tasks-empty {
padding: var(--space-12) var(--space-4);
text-align: center;
}
.tasks-empty__icon {
width: 56px;
height: 56px;
color: var(--color-text-disabled);
margin: 0 auto var(--space-4);
}
.tasks-empty__title {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.tasks-empty__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-6);
}