randogoth/kanban-todo.txt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved sub-task progress design.

Browse source
This commit is contained in:
Chris McCormick 2026-01-04 16:56:52 +08:00
parent ceaedb6435
commit f61007cfb6
1 changed files with 39 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

45
index.html
View file

@ -305,17 +305,38 @@
.card-footer { .card-footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: end;
font-size: 0.85em; font-size: 0.85em;
color: var(--shade); color: var(--shade);
} }
.card-footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25em;
}
.card-expand-indicator { .card-expand-indicator {
color: var(--shade); color: var(--shade);
font-size: 1.2em; font-size: 1.2em;
line-height: 1; line-height: 1;
} }
.card-progress-bar {
height: 6px;
width: 6ch;
background: #445;
border-radius: 2px;
overflow: hidden;
}
.card-progress-fill {
height: 100%;
background: #4a4;
transition: width 0.2s ease;
}
.card-menu-btn { .card-menu-btn {
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
@ -1924,21 +1945,33 @@ chmod 755 kbtd
if (hasNestedContent) { if (hasNestedContent) {
const cardFooter = h('div', { className: 'card-footer' }); const cardFooter = h('div', { className: 'card-footer' });
let expandIndicator; const cardFooterContent = h('div', { className: 'card-footer-content' });
if (subtasks.total > 0) { if (subtasks.total > 0) {
expandIndicator = h('span', { const percentage = subtasks.total > 0 ? (subtasks.completed / subtasks.total) * 100 : 0;
const expandIndicator = h('span', {
className: 'card-expand-indicator', className: 'card-expand-indicator',
textContent: `${subtasks.completed}/${subtasks.total}` textContent: `${subtasks.completed} / ${subtasks.total}`
}); });
const progressBar = h('div', { className: 'card-progress-bar' },
h('div', {
className: 'card-progress-fill',
style: { width: `${percentage}%` }
})
);
cardFooterContent.append(expandIndicator, progressBar);
} else { } else {
expandIndicator = h('span', { const expandIndicator = h('span', {
className: 'card-expand-indicator', className: 'card-expand-indicator',
textContent: '+' textContent: '+'
}); });
cardFooterContent.append(expandIndicator);
} }
cardFooter.append(expandIndicator); cardFooter.append(cardFooterContent);
cardDiv.append(cardFooter); cardDiv.append(cardFooter);
} }