Add collapsible pipeline metrics and error indicator to target cards
FPS chart stays always visible; timing, frames, keepalive, errors, and uptime are collapsed behind an animated toggle. Error warning icon appears next to target name when errors_count > 0. Uses CSS grid 0fr→1fr transition for smooth expand/collapse animation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -742,6 +742,54 @@ ul.section-tip li {
|
||||
color: #ff5252;
|
||||
}
|
||||
|
||||
/* Error indicator next to target name */
|
||||
.target-error-indicator {
|
||||
display: none;
|
||||
color: var(--danger-color);
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.target-error-indicator .icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.target-error-indicator.visible {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Collapsible target pipeline metrics */
|
||||
.target-metrics-collapse {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.target-metrics-toggle {
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
padding: 4px 0;
|
||||
user-select: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
.target-metrics-toggle::before {
|
||||
content: '▸ ';
|
||||
}
|
||||
.target-metrics-collapse.open .target-metrics-toggle::before {
|
||||
content: '▾ ';
|
||||
}
|
||||
.target-metrics-animate {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.25s ease;
|
||||
}
|
||||
.target-metrics-collapse.open .target-metrics-animate {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.target-metrics-animate > .target-metrics-expanded {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Timing breakdown bar */
|
||||
.timing-breakdown {
|
||||
margin-top: 8px;
|
||||
|
||||
Reference in New Issue
Block a user