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

style: improve Ralph panel mini ring gradient and meta layout

Browse Source 
- Add gradient definition to mini ring SVG so it shows colors when
  collapsed (was only defined in large ring)
- Change meta items to row layout so "Waiting for" and completion
  phrase are inline
- Reduce font sizes for completion phrase and elapsed time
- Add text overflow handling for long completion phrases

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-20 20:00:57 +01:00
co-authored by Claude Opus 4.5
parent 6fddd7d895
commit 141bb40eb4
2 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/index.html
+7 -1
View File
@@ -79,8 +79,14 @@
<div class="ralph-summary-content" onclick="app.toggleInnerStatePanel()"> <div class="ralph-summary-content" onclick="app.toggleInnerStatePanel()">
<div class="ralph-ring-mini" id="ralphRingMini"> <div class="ralph-ring-mini" id="ralphRingMini">
<svg viewBox="0 0 36 36" class="ralph-ring-svg"> <svg viewBox="0 0 36 36" class="ralph-ring-svg">
<defs>
<linearGradient id="ralphGradientMini" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3b82f6" />
<stop offset="100%" stop-color="#22c55e" />
</linearGradient>
</defs>
<circle class="ralph-ring-bg" cx="18" cy="18" r="15.9" /> <circle class="ralph-ring-bg" cx="18" cy="18" r="15.9" />
<circle class="ralph-ring-progress" cx="18" cy="18" r="15.9" id="ralphRingMiniProgress" /> <circle class="ralph-ring-progress-mini" cx="18" cy="18" r="15.9" id="ralphRingMiniProgress" />
</svg> </svg>
<span class="ralph-ring-text" id="ralphRingMiniText">0%</span> <span class="ralph-ring-text" id="ralphRingMiniText">0%</span>
</div> </div>
src/web/public/styles.css
+21 -5
View File
@@ -503,6 +503,16 @@ body {
transition: stroke-dashoffset 0.5s ease-out; transition: stroke-dashoffset 0.5s ease-out;
} }
.ralph-ring-progress-mini {
fill: none;
stroke: url(#ralphGradientMini);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.5s ease-out;
}
.ralph-ring-text { .ralph-ring-text {
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -640,21 +650,27 @@ body {
.ralph-meta-compact .ralph-meta-item { .ralph-meta-compact .ralph-meta-item {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
gap: 0; align-items: center;
gap: 0.4rem;
} }
.ralph-meta-compact .ralph-meta-label { .ralph-meta-compact .ralph-meta-label {
font-size: 0.6rem; font-size: 0.6rem;
white-space: nowrap;
} }
.ralph-meta-compact code { .ralph-meta-compact code {
font-size: 0.7rem; font-size: 0.55rem;
padding: 0.15rem 0.4rem; padding: 0.1rem 0.3rem;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.ralph-meta-compact span:not(.ralph-meta-label) { .ralph-meta-compact span:not(.ralph-meta-label) {
font-size: 0.8rem; font-size: 0.6rem;
} }
/* Compact Tasks Section */ /* Compact Tasks Section */