Fix progress UI pixel-perfect: remove View Details, section dot on right, proper item layout
- Remove View Details links completely - Add tree-section-dot on right side of section rows - Child rows use tree-item-dot on left - Duration aligned to right with margin-left: auto - Proper padding and spacing to match design - Update both taskmd.css and theme-sentient.css
This commit is contained in:
parent
6bbedd6645
commit
f5ece0d410
3 changed files with 96 additions and 48 deletions
|
|
@ -1718,6 +1718,7 @@
|
|||
|
||||
/* Section/Child name */
|
||||
[data-theme="sentient"] .tree-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
|
|
@ -1728,18 +1729,31 @@
|
|||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* View Details link */
|
||||
[data-theme="sentient"] .tree-view-details {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
margin-left: 12px;
|
||||
margin-right: auto;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
/* Section dot indicator on right side */
|
||||
[data-theme="sentient"] .tree-section-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
[data-theme="sentient"] .tree-view-details:hover {
|
||||
color: var(--accent);
|
||||
[data-theme="sentient"] .tree-section-dot.completed {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
[data-theme="sentient"] .tree-section-dot.running {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
animation: sentient-dot-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
[data-theme="sentient"] .tree-section-dot.pending {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
[data-theme="sentient"] .tree-section-dot.failed {
|
||||
background: var(--error);
|
||||
}
|
||||
|
||||
/* Step badge - green pill */
|
||||
|
|
@ -1750,6 +1764,7 @@
|
|||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: auto;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1764,8 +1779,9 @@
|
|||
[data-theme="sentient"] .tree-status {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
min-width: 80px;
|
||||
min-width: 70px;
|
||||
text-align: right;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
[data-theme="sentient"] .tree-status.completed {
|
||||
|
|
@ -1799,18 +1815,21 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Indent line */
|
||||
[data-theme="sentient"] .tree-indent {
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
/* Child row with dot */
|
||||
[data-theme="sentient"] .tree-level-1 .tree-item-dot {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
[data-theme="sentient"] .tree-level-1 .tree-name {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Tree items container */
|
||||
[data-theme="sentient"] .tree-items {
|
||||
display: none;
|
||||
padding: 8px 0 16px 0;
|
||||
padding: 12px 0 16px 0;
|
||||
padding-left: 24px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
|
|
@ -1827,8 +1846,8 @@
|
|||
[data-theme="sentient"] .tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 60px;
|
||||
min-height: 36px;
|
||||
padding: 8px 20px 8px 24px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
[data-theme="sentient"] .tree-item.running {
|
||||
|
|
@ -1898,6 +1917,7 @@
|
|||
[data-theme="sentient"] .tree-item-duration {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-left: auto;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -264,21 +264,8 @@
|
|||
color: var(--text-tertiary, #666);
|
||||
}
|
||||
|
||||
/* View Details link */
|
||||
.tree-view-details {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary, #666);
|
||||
margin-left: 12px;
|
||||
margin-right: auto;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.tree-view-details:hover {
|
||||
color: var(--accent, #c5f82a);
|
||||
}
|
||||
|
||||
.tree-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text, #e0e0e0);
|
||||
|
|
@ -291,6 +278,7 @@
|
|||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: auto;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -304,8 +292,36 @@
|
|||
.tree-status {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary, #666);
|
||||
min-width: 80px;
|
||||
min-width: 70px;
|
||||
text-align: right;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
/* Section dot indicator on right side */
|
||||
.tree-section-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--text-muted, #333);
|
||||
}
|
||||
|
||||
.tree-section-dot.completed {
|
||||
background: var(--accent, #c5f82a);
|
||||
}
|
||||
|
||||
.tree-section-dot.running {
|
||||
background: var(--accent, #c5f82a);
|
||||
box-shadow: 0 0 8px var(--accent-glow, rgba(197, 248, 42, 0.6));
|
||||
animation: dot-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.tree-section-dot.pending {
|
||||
background: var(--text-muted, #333);
|
||||
}
|
||||
|
||||
.tree-section-dot.failed {
|
||||
background: var(--error, #ef4444);
|
||||
}
|
||||
|
||||
.tree-status.completed {
|
||||
|
|
@ -339,17 +355,11 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tree-indent {
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background: var(--border, #2a2a2a);
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
/* Tree Items (Level 2) - Individual items like files */
|
||||
.tree-items {
|
||||
display: none;
|
||||
padding: 8px 0 16px 0;
|
||||
padding: 12px 0 16px 0;
|
||||
padding-left: 24px;
|
||||
background: var(--bg, #080808);
|
||||
}
|
||||
|
||||
|
|
@ -359,7 +369,25 @@
|
|||
|
||||
/* Section-level items */
|
||||
.tree-children > .tree-item {
|
||||
padding-left: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
/* Child row in tree-level-1 */
|
||||
.tree-level-1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px 12px 24px;
|
||||
background: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.tree-level-1 .tree-item-dot {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.tree-level-1 .tree-name {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary, #ccc);
|
||||
}
|
||||
|
||||
/* Item Dot Indicator - the colored dots */
|
||||
|
|
@ -415,6 +443,7 @@
|
|||
.tree-item-duration {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted, #555);
|
||||
margin-left: auto;
|
||||
margin-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -442,8 +471,8 @@
|
|||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 60px;
|
||||
min-height: 36px;
|
||||
padding: 8px 20px 8px 24px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.tree-item.completed .tree-item-name {
|
||||
|
|
|
|||
|
|
@ -560,9 +560,9 @@ function buildProgressTreeHTML(manifest, totalSteps) {
|
|||
<div class="tree-section ${statusClass}${isRunning ? " expanded" : ""}" data-section-id="${section.id}">
|
||||
<div class="tree-row tree-level-0" onclick="this.parentElement.classList.toggle('expanded')">
|
||||
<span class="tree-name">${escapeHtml(section.name)}</span>
|
||||
<span class="tree-view-details">View Details ›</span>
|
||||
<span class="tree-step-badge">Step ${globalCurrent}/${totalSteps}</span>
|
||||
<span class="tree-status ${statusClass}">${statusText}</span>
|
||||
<span class="tree-section-dot ${statusClass}"></span>
|
||||
</div>
|
||||
<div class="tree-children">`;
|
||||
|
||||
|
|
@ -574,9 +574,8 @@ function buildProgressTreeHTML(manifest, totalSteps) {
|
|||
html += `
|
||||
<div class="tree-child ${childStatus}${childIsRunning ? " expanded" : ""}" data-child-id="${child.id}">
|
||||
<div class="tree-row tree-level-1" onclick="this.parentElement.classList.toggle('expanded')">
|
||||
<span class="tree-indent"></span>
|
||||
<span class="tree-item-dot ${childStatus}"></span>
|
||||
<span class="tree-name">${escapeHtml(child.name)}</span>
|
||||
<span class="tree-view-details">View Details ›</span>
|
||||
<span class="tree-step-badge">Step ${child.progress?.current || 0}/${child.progress?.total || 1}</span>
|
||||
<span class="tree-status ${childStatus}">${child.status || "Pending"}</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue