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 {
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: end;
font-size: 0.85em;
color: var(--shade);
}
.card-footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25em;
}
.card-expand-indicator {
color: var(--shade);
font-size: 1.2em;
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 {
width: 1.5em;
height: 1.5em;
@ -1924,21 +1945,33 @@ chmod 755 kbtd
if (hasNestedContent) {
const cardFooter = h('div', { className: 'card-footer' });
let expandIndicator;
const cardFooterContent = h('div', { className: 'card-footer-content' });
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',
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 {
expandIndicator = h('span', {
const expandIndicator = h('span', {
className: 'card-expand-indicator',
textContent: '+'
});
cardFooterContent.append(expandIndicator);
}
cardFooter.append(expandIndicator);
cardFooter.append(cardFooterContent);
cardDiv.append(cardFooter);
}