BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-08 16:39: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
docs/images/ralph-tracker-16tasks.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 95 KiB

src/web/public/index.html
+15 -16
View File
@@ -129,22 +129,21 @@
<div class="ralph-ring-label">Complete</div> <div class="ralph-ring-label">Complete</div>
</div> </div>
</div> </div>
<!-- Meta Info --> <!-- Meta Info + Tasks unified -->
<div class="ralph-meta-compact"> <div class="ralph-info-unified">
<div class="ralph-meta-item"> <div class="ralph-info-labels">
<span class="ralph-meta-label">Waiting for</span> <div class="ralph-info-row">
<code id="ralphPhrase">--</code> <span class="ralph-info-label">Waiting for</span>
</div> <code id="ralphPhrase">--</code>
<div class="ralph-meta-item"> </div>
<span class="ralph-meta-label">Elapsed</span> <div class="ralph-info-row">
<span id="ralphElapsed">0m</span> <span class="ralph-info-label">Elapsed</span>
</div> <span id="ralphElapsed">0m</span>
</div> </div>
<!-- Task Cards - inline --> <div class="ralph-info-row">
<div class="ralph-tasks-compact"> <span class="ralph-info-label">Tasks</span>
<div class="ralph-tasks-header"> <span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
<span>Tasks</span> </div>
<span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
</div> </div>
<div class="ralph-tasks-grid" id="ralphTasksGrid"></div> <div class="ralph-tasks-grid" id="ralphTasksGrid"></div>
</div> </div>
src/web/public/styles.css
+27 -43
View File
@@ -642,35 +642,43 @@ body {
font-size: 0.55rem; font-size: 0.55rem;
} }
/* Compact Meta Info */ /* Unified Info + Tasks Section */
.ralph-meta-compact { .ralph-info-unified {
flex: 1;
display: flex; display: flex;
flex-direction: column; align-items: flex-start;
gap: 0.35rem; gap: 0.75rem;
min-width: 110px; overflow: hidden;
min-width: 0;
background: var(--bg-input); background: var(--bg-input);
padding: 0.4rem 0.5rem; padding: 0.4rem 0.6rem;
border-radius: 4px; 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; display: flex;
flex-direction: row;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
} }
.ralph-meta-compact .ralph-meta-label { .ralph-info-label {
font-size: 0.5rem; font-size: 0.5rem;
white-space: nowrap; white-space: nowrap;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.3px; letter-spacing: 0.3px;
color: var(--text-muted); color: var(--text-muted);
width: 55px; width: 60px;
flex-shrink: 0; flex-shrink: 0;
} }
.ralph-meta-compact code { .ralph-info-unified code {
font-size: 0.6rem; font-size: 0.6rem;
padding: 0.15rem 0.35rem; padding: 0.15rem 0.35rem;
max-width: 160px; max-width: 160px;
@@ -681,45 +689,19 @@ body {
border-radius: 3px; border-radius: 3px;
} }
.ralph-meta-compact span:not(.ralph-meta-label) { .ralph-info-unified span:not(.ralph-info-label) {
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 500; font-weight: 500;
color: var(--text); color: var(--text);
} }
/* Compact Tasks Section */ .ralph-info-unified .ralph-tasks-count {
.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 {
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 500; font-weight: 500;
color: var(--text); color: var(--text);
} }
.ralph-tasks-compact .ralph-tasks-grid { .ralph-info-unified .ralph-tasks-grid {
flex: 1; flex: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -727,6 +709,7 @@ body {
padding: 0; padding: 0;
max-height: 60px; max-height: 60px;
overflow-y: auto; overflow-y: auto;
align-content: flex-start;
} }
.ralph-tasks-compact .ralph-task-card { .ralph-tasks-compact .ralph-task-card {
@@ -1036,12 +1019,13 @@ body {
overflow: auto; overflow: auto;
} }
.ralph-panel.detached .ralph-tasks-compact { .ralph-panel.detached .ralph-info-unified {
max-height: none; flex-direction: column;
flex: 1; 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; max-height: none;
flex: 1; flex: 1;
} }