josh/Catalyst
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Merge pull request 'feat: redesign history timeline — single-line, timestamp right-aligned' (#26) from feat/timezone-settings into dev
All checks were successful
CI / test (push) Successful in 12s
Details
CI / build-dev (push) Successful in 19s
Details

Browse Source 
Reviewed-on: #26
This commit was merged in pull request #26.
This commit is contained in:
Josh Wright
2026-03-28 15:07:01 -04:00
parent 2fba532ec7 800184d2be
commit 520fb98d96
2 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
css/app.css
View File

@@ -630,21 +630,25 @@ select:focus { border-color: var(--accent); }
/* ── HISTORY TIMELINE ── */
.tl-item {
padding: 12px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.tl-item:last-child { border-bottom: none; }
.tl-time { display: block; color: var(--text3); font-size: 11px; margin-bottom: 5px; }
.tl-desc { display: flex; align-items: baseline; gap: 16px; font-size: 13px; }
.tl-label { color: var(--text2); min-width: 130px; }
.tl-change { display: flex; align-items: baseline; gap: 8px; }
.tl-old { color: var(--text3); text-decoration: line-through; }
.tl-arrow { color: var(--text3); }
.tl-event { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.tl-label { color: var(--text2); }
.tl-sep { color: var(--text3); user-select: none; }
.tl-old { color: var(--text3); text-decoration: line-through; font-size: 12px; }
.tl-arrow { color: var(--text3); font-size: 11px; }
.tl-new { color: var(--text); font-weight: 500; }
.tl-time { color: var(--text3); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.tl-deployed { color: var(--accent); }
.tl-testing { color: var(--amber); }
.tl-degraded { color: var(--red); }
.tl-created .tl-label { color: var(--accent); font-weight: 500; }
.tl-created .tl-event { color: var(--accent); font-weight: 500; }
.tl-empty { color: var(--text3); font-size: 12px; padding: 8px 0; }
/* ── SETTINGS MODAL ── */

18
js/ui.js
View File

@@ -193,21 +193,23 @@ async function renderDetailPage(vmid) {
? history.map(e => {
if (e.field === 'created') return `
<div class="tl-item tl-created">
<span class="tl-event">instance created</span>
<span class="tl-time">${fmtDateFull(e.changed_at)}</span>
<div class="tl-desc"><span class="tl-label">instance created</span></div>
</div>`;
const label = FIELD_LABELS[e.field] ?? esc(e.field);
const newCls = e.field === 'state'
? `badge ${esc(e.new_value)}`
: `tl-new ${stateClass(e.field, e.new_value)}`;
return `
<div class="tl-item">
<span class="tl-time">${fmtDateFull(e.changed_at)}</span>
<div class="tl-desc">
<div class="tl-event">
<span class="tl-label">${label}</span>
<span class="tl-change">
<span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
<span class="tl-arrow">→</span>
<span class="tl-new ${stateClass(e.field, e.new_value)}">${fmtHistVal(e.field, e.new_value)}</span>
</span>
<span class="tl-sep">·</span>
<span class="tl-old">${fmtHistVal(e.field, e.old_value)}</span>
<span class="tl-arrow">→</span>
<span class="${newCls}">${fmtHistVal(e.field, e.new_value)}</span>
</div>
<span class="tl-time">${fmtDateFull(e.changed_at)}</span>
</div>`;
}).join('')
: '<div class="tl-empty">no history yet</div>';