Skip to content

Commit 752877c

Browse files
GeiserXGeiserX
committed
Fix action buttons: visible, consistent size, instance badge in status
- Replace invisible ghost buttons with bordered action-btns group - All action buttons same 26px size with border and background - Cashout eligible = green soft background (not full gradient) - SVG sizes controlled by parent container, not inline attributes - Instance count (Nx badge) shown next to status label - External services show no container controls
1 parent bb4c0de commit 752877c

2 files changed

Lines changed: 62 additions & 17 deletions

File tree

‎app/static/css/style.css‎

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -828,14 +828,54 @@ img { max-width: 100%; }
828828
}
829829

830830
.btn-icon {
831-
padding: 6px;
832-
min-width: 32px;
833-
min-height: 32px;
834-
width: 32px;
835-
height: 32px;
831+
padding: 0;
832+
width: 28px;
833+
height: 28px;
834+
min-width: 28px;
835+
min-height: 28px;
836+
border-radius: var(--radius-sm);
836837
box-sizing: border-box;
837838
}
838839

840+
/* Action buttons in table rows — consistent sizing */
841+
.action-btns {
842+
display: inline-flex;
843+
align-items: center;
844+
gap: 2px;
845+
}
846+
.action-btns .btn-icon {
847+
width: 26px;
848+
height: 26px;
849+
min-width: 26px;
850+
min-height: 26px;
851+
border: 1px solid var(--border-color);
852+
background: var(--bg-tertiary);
853+
color: var(--text-secondary);
854+
}
855+
.action-btns .btn-icon:hover:not(:disabled) {
856+
background: var(--bg-hover);
857+
color: var(--text-primary);
858+
border-color: var(--border-light);
859+
}
860+
.action-btns .btn-icon:disabled {
861+
opacity: 0.35;
862+
border-color: transparent;
863+
background: transparent;
864+
}
865+
.action-btns .btn-icon.btn-success {
866+
background: var(--success-soft);
867+
color: var(--success);
868+
border-color: rgba(34, 197, 94, 0.25);
869+
}
870+
.action-btns .btn-icon.btn-success:hover:not(:disabled) {
871+
background: var(--success);
872+
color: #fff;
873+
}
874+
.action-btns .btn-icon svg {
875+
width: 13px;
876+
height: 13px;
877+
}
878+
839879
/* ----- Forms ----- */
840880
.form-group {
841881
margin-bottom: 16px;

‎app/static/js/app.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -291,34 +291,39 @@ const CP = (() => {
291291
? (eligible ? 'Cash out earnings' : 'View payout details')
292292
: 'No payout info available';
293293
const claimDisabled = !co.dashboard_url;
294-
const claimBtn = `<button class="btn btn-sm ${eligible ? 'btn-success' : 'btn-ghost'} btn-icon" onclick="${claimDisabled ? '' : `CP.openClaimModal('${svc.slug}')`}" title="${claimTitle}"${claimDisabled ? ' disabled' : ''}>
295-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
294+
const claimBtn = `<button class="btn btn-icon ${eligible ? 'btn-success' : ''}" onclick="${claimDisabled ? '' : `CP.openClaimModal('${svc.slug}')`}" title="${claimTitle}"${claimDisabled ? ' disabled' : ''}>
295+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
296296
</button>`;
297297

298298
const containerBtns = isExternal ? '' : `
299-
<button class="btn btn-ghost btn-sm btn-icon" onclick="CP.restartService('${svc.slug}')" title="Restart container">
300-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
299+
<button class="btn btn-icon" onclick="CP.restartService('${svc.slug}')" title="Restart container">
300+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
301301
</button>
302-
<button class="btn btn-ghost btn-sm btn-icon" onclick="CP.stopService('${svc.slug}')" title="Stop container">
303-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
302+
<button class="btn btn-icon" onclick="CP.stopService('${svc.slug}')" title="Stop container">
303+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
304304
</button>
305-
<button class="btn btn-ghost btn-sm btn-icon" onclick="CP.viewLogs('${svc.slug}')" title="View container logs">
306-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
305+
<button class="btn btn-icon" onclick="CP.viewLogs('${svc.slug}')" title="View container logs">
306+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
307307
</button>`;
308308

309+
// Instance count — show in status column
310+
const instanceLabel = instances > 1 ? ` <span class="badge badge-instances">${instances}x</span>` : '';
311+
309312
return `
310313
<tr class="breakdown-row" data-slug="${escapeHtml(svc.slug)}">
311-
<td>${nameHtml} ${instanceBadge}<div style="font-size:0.7rem; color:var(--text-muted);">${subtitle}</div></td>
312-
<td style="text-align:center;"><span class="badge badge-${statusClass}"><span class="status-dot ${statusClass}"></span> ${statusLabel}</span></td>
314+
<td>${nameHtml}<div style="font-size:0.7rem; color:var(--text-muted);">${subtitle}</div></td>
315+
<td style="text-align:center;"><span class="badge badge-${statusClass}"><span class="status-dot ${statusClass}"></span> ${statusLabel}</span>${instanceLabel}</td>
313316
<td style="text-align:center;">${healthBadge}</td>
314317
<td style="text-align:right; font-weight:600;">${formatCurrency(balance)}</td>
315318
<td style="text-align:right;"><span class="stat-change ${deltaClass}">${deltaStr}</span></td>
316319
<td style="text-align:right;">${cpuStr}</td>
317320
<td style="text-align:right;">${memStr}</td>
318321
<td style="text-align:center;">${progressBar}</td>
319322
<td style="text-align:center; white-space:nowrap;">
320-
${claimBtn}
321-
${containerBtns}
323+
<div class="action-btns">
324+
${claimBtn}
325+
${containerBtns}
326+
</div>
322327
</td>
323328
</tr>`;
324329
}

0 commit comments

Comments
 (0)