BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-03 14:09:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: unify Ralph panel info section

Browse Source 
Merge Waiting for, Elapsed, and Tasks into one unified card:
- All labels aligned on left (60px width)
- Values aligned after labels
- Task cards flow to the right
- Cleaner, more compact layout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-20 20:26:04 +01:00
co-authored by Claude Opus 4.5
parent 3ef9b29899
commit f014aecd41
3 changed files with 42 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/index.html
+15 -16
View File
@@ -129,22 +129,21 @@
<div class="ralph-ring-label">Complete</div>
</div>
</div>
<!-- Meta Info -->
<div class="ralph-meta-compact">
<div class="ralph-meta-item">
<span class="ralph-meta-label">Waiting for</span>
<code id="ralphPhrase">--</code>
</div>
<div class="ralph-meta-item">
<span class="ralph-meta-label">Elapsed</span>
<span id="ralphElapsed">0m</span>
</div>
</div>
<!-- Task Cards - inline -->
<div class="ralph-tasks-compact">
<div class="ralph-tasks-header">
<span>Tasks</span>
<span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
<!-- Meta Info + Tasks unified -->
<div class="ralph-info-unified">
<div class="ralph-info-labels">
<div class="ralph-info-row">
<span class="ralph-info-label">Waiting for</span>
<code id="ralphPhrase">--</code>
</div>
<div class="ralph-info-row">
<span class="ralph-info-label">Elapsed</span>
<span id="ralphElapsed">0m</span>
</div>
<div class="ralph-info-row">
<span class="ralph-info-label">Tasks</span>
<span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
</div>
</div>
<div class="ralph-tasks-grid" id="ralphTasksGrid"></div>
</div>
src/web/public/styles.css
+27 -43
View File
@@ -642,35 +642,43 @@ body {
font-size: 0.55rem;
}
/* Compact Meta Info */
.ralph-meta-compact {
/* Unified Info + Tasks Section */
.ralph-info-unified {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 110px;
align-items: flex-start;
gap: 0.75rem;
overflow: hidden;
min-width: 0;
background: var(--bg-input);
padding: 0.4rem 0.5rem;
padding: 0.4rem 0.6rem;
border-radius: 4px;
}
.ralph-meta-compact .ralph-meta-item {
.ralph-info-labels {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex-shrink: 0;
}
.ralph-info-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.ralph-meta-compact .ralph-meta-label {
.ralph-info-label {
font-size: 0.5rem;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--text-muted);
width: 55px;
width: 60px;
flex-shrink: 0;
}
.ralph-meta-compact code {
.ralph-info-unified code {
font-size: 0.6rem;
padding: 0.15rem 0.35rem;
max-width: 160px;
@@ -681,45 +689,19 @@ body {
border-radius: 3px;
}
.ralph-meta-compact span:not(.ralph-meta-label) {
.ralph-info-unified span:not(.ralph-info-label) {
font-size: 0.7rem;
font-weight: 500;
color: var(--text);
}
/* Compact Tasks Section */
.ralph-tasks-compact {
flex: 1;
display: flex;
align-items: flex-start;
gap: 0.5rem;
overflow: hidden;
min-width: 0;
}
.ralph-tasks-compact .ralph-tasks-header {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
padding: 0.2rem 0;
font-size: 0.55rem;
color: var(--text-muted);
white-space: nowrap;
}
.ralph-tasks-compact .ralph-tasks-header span:first-child {
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ralph-tasks-compact .ralph-tasks-count {
.ralph-info-unified .ralph-tasks-count {
font-size: 0.7rem;
font-weight: 500;
color: var(--text);
}
.ralph-tasks-compact .ralph-tasks-grid {
.ralph-info-unified .ralph-tasks-grid {
flex: 1;
display: flex;
flex-wrap: wrap;
@@ -727,6 +709,7 @@ body {
padding: 0;
max-height: 60px;
overflow-y: auto;
align-content: flex-start;
}
.ralph-tasks-compact .ralph-task-card {
@@ -1036,12 +1019,13 @@ body {
overflow: auto;
}
.ralph-panel.detached .ralph-tasks-compact {
max-height: none;
.ralph-panel.detached .ralph-info-unified {
flex-direction: column;
flex: 1;
overflow: auto;
}
.ralph-panel.detached .ralph-tasks-compact .ralph-tasks-grid {
.ralph-panel.detached .ralph-info-unified .ralph-tasks-grid {
max-height: none;
flex: 1;
}