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

style: unify all empty states to shared .empty-state class across all modules

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
2026-03-30 17:25:13 +02:00
parent eb0ac95e1d
commit 0eab480a0e
12 changed files with 52 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/budget.js
+7 -4
View File
@@ -241,10 +241,13 @@ function renderCategoryBars(byCategory) {
function renderEntries() {
if (!state.entries.length) {
return `<div class="budget-empty">
<i data-lucide="receipt" style="width:48px;height:48px;color:var(--color-text-disabled);margin-bottom:var(--space-3);" aria-hidden="true"></i>
<div style="font-size:var(--text-base);font-weight:600;">Keine Einträge</div>
<div style="font-size:var(--text-sm);margin-top:var(--space-1);">Noch keine Transaktionen für diesen Monat.</div>
return `<div class="empty-state">
<svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<line x1="12" y1="1" x2="12" y2="23"/>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
<div class="empty-state__title">Keine Einträge diesen Monat</div>
<div class="empty-state__description">Budget-Einträge über den + Button hinzufügen.</div>
</div>`;
}
public/pages/contacts.js
+9 -3
View File
@@ -134,9 +134,15 @@ function renderList() {
if (!contacts.length) {
container.innerHTML = `
<div class="contacts-empty">
<i data-lucide="users" style="width:48px;height:48px;color:var(--color-text-disabled);margin-bottom:var(--space-3);" aria-hidden="true"></i>
<div style="font-size:var(--text-base);font-weight:600;">Keine Kontakte gefunden</div>
<div class="empty-state">
<svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
<div class="empty-state__title">Noch keine Kontakte</div>
<div class="empty-state__description">Neue Kontakte über den + Button hinzufügen.</div>
</div>
`;
if (window.lucide) lucide.createIcons();
public/pages/meals.js
+4 -1
View File
@@ -172,8 +172,11 @@ function renderSlot(date, type, mealsForDay) {
if (!meal) {
return `
<div class="meal-slot" data-date="${date}" data-type="${type.key}">
<div class="meal-slot meal-slot--empty" data-date="${date}" data-type="${type.key}">
<div class="meal-slot__type-label">${type.label}</div>
<div class="empty-state empty-state--compact">
<div class="empty-state__description">Kein Essen geplant</div>
</div>
<button
class="meal-slot__add-btn"
data-action="add-meal"
public/pages/notes.js
+10 -4
View File
@@ -88,10 +88,16 @@ function renderGrid() {
if (!state.notes.length) {
grid.innerHTML = `
<div class="notes-empty">
<i data-lucide="sticky-note" class="notes-empty__icon" aria-hidden="true"></i>
<div style="font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);">Noch keine Notizen</div>
<div style="font-size:var(--text-sm);">Klicke auf „Neue Notiz" um loszulegen.</div>
<div class="empty-state" style="column-span:all;">
<svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10 9 9 9 8 9"/>
</svg>
<div class="empty-state__title">Noch keine Notizen</div>
<div class="empty-state__description">Neue Notiz über den + Button erstellen.</div>
</div>
`;
if (window.lucide) lucide.createIcons();
public/pages/shopping.js
+7 -4
View File
@@ -160,10 +160,13 @@ function renderListContent(container) {
function renderItems() {
if (!state.items.length) {
return `
<div class="shopping-empty">
<i data-lucide="check-circle" class="shopping-empty__icon" aria-hidden="true"></i>
<div class="shopping-empty__title">Liste ist leer</div>
<div class="shopping-empty__desc">Füge Artikel mit dem Eingabefeld oben hinzu.</div>
<div class="empty-state">
<svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
</svg>
<div class="empty-state__title">Die Liste ist leer</div>
<div class="empty-state__description">Artikel über das Eingabefeld oben hinzufügen.</div>
</div>`;
}
public/pages/tasks.js
+7 -4
View File
@@ -195,10 +195,13 @@ function renderTaskCard(task, opts = {}) {
function renderTaskGroups(tasks, groupMode) {
if (!tasks.length) {
return `<div class="tasks-empty">
<i data-lucide="check-circle-2" class="tasks-empty__icon" aria-hidden="true"></i>
<div class="tasks-empty__title">Keine Aufgaben</div>
<div class="tasks-empty__desc">Erstelle eine neue Aufgabe mit dem + Button.</div>
return `<div class="empty-state">
<svg class="empty-state__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
<div class="empty-state__title">Keine Aufgaben — alles erledigt?</div>
<div class="empty-state__description">Neue Aufgaben über den + Button erstellen.</div>
</div>`;
}
public/styles/budget.css
-13
View File
@@ -281,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
-13
View File
@@ -221,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/layout.css
+8
View File
@@ -935,6 +935,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)
* -------------------------------------------------------- */
public/styles/notes.css
-20
View File
@@ -211,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
-30
View File
@@ -416,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
-25
View File
@@ -629,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);
}