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

fix: move nav-badge styles to layout.css so badge stays visible on all pages

Browse Source 
The .nav-badge base styles (background, size, color) were defined in tasks.css,
which is dynamically unloaded when navigating away from /tasks. This caused the
overdue badge in the nav to become invisible on every other page, even though
the badge element remained in the DOM.

Also refactors subtask checkbox icon to use a CSS class instead of inline styles.

Resolves #56

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas Kalayci
2026-04-19 22:10:06 +02:00
parent 8489208681
commit 888cd05437
3 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/tasks.js
+1 -1
View File
@@ -157,7 +157,7 @@ function renderTaskCard(task, opts = {}) {
<button class="subtask-item__checkbox ${s.status === 'done' ? 'subtask-item__checkbox--done' : ''}"
data-action="toggle-subtask" data-id="${s.id}"
data-status="${s.status}" aria-label="${t('tasks.subtaskMarkDone', { title: esc(s.title) })}">
${s.status === 'done' ? '<i data-lucide="check" style="width:10px;height:10px;color:#fff" aria-hidden="true"></i>' : ''}
${s.status === 'done' ? '<i data-lucide="check" class="subtask-item__checkbox-icon" aria-hidden="true"></i>' : ''}
</button>
<span class="subtask-item__title">${esc(s.title)}</span>
</div>`).join('')
public/styles/layout.css
Regular → Executable
+14 -1
View File
@@ -202,11 +202,24 @@
flex-shrink: 0;
}
.nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--space-1);
border-radius: var(--radius-full);
background-color: var(--color-danger);
color: var(--color-text-on-accent);
font-size: var(--text-xs);
font-weight: var(--font-weight-bold);
}
.nav-item__icon-wrap .nav-badge {
position: absolute;
top: calc(-1 * var(--space-1));
right: calc(-1 * var(--space-1));
margin-left: 0;
}
.nav-item:active {
public/styles/tasks.css
+6 -18
View File
@@ -436,6 +436,12 @@
animation: check-pop 0.15s var(--ease-out);
}
.subtask-item__checkbox-icon {
width: 10px;
height: 10px;
color: var(--color-text-on-accent);
}
.subtask-item__title {
font-size: var(--text-sm);
color: var(--color-text-primary);
@@ -467,24 +473,6 @@
color: var(--color-accent);
}
/* --------------------------------------------------------
* Overdue-Badge (Navigation)
* -------------------------------------------------------- */
.nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--space-1);
border-radius: var(--radius-full);
background-color: var(--color-danger);
color: var(--color-text-on-accent);
font-size: var(--text-xs);
font-weight: var(--font-weight-bold);
margin-left: auto;
}
/* --------------------------------------------------------
* Kanban-Board
* -------------------------------------------------------- */