danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Simplify auto-sync history card layout

Browse source 
Flatten playlist pipeline history cards into a stable header, flow, preview, and detail structure so the run history does not collapse into broken line rows. Keep explicit expand bindings and preserve the richer detail payload rendering.
This commit is contained in:
Broque Thomas 2026-05-25 08:34:37 -07:00
parent 81ad3079b4
commit 4aec5584e1
2 changed files with 44 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
webui/static/auto-sync.js
View file

@ -463,28 +463,30 @@ function autoSyncHistoryEntryHtml(entry, index = 0) {
return `
<article class="auto-sync-history-entry" id="${entryId}-card" data-history-entry="${entryId}">
<div class="auto-sync-history-row" role="button" tabindex="0" aria-expanded="false" aria-controls="${entryId}" data-history-toggle="${entryId}">
<span class="auto-sync-card-status-dot ${autoSyncHistoryStatusClass(status)}"></span>
<div class="auto-sync-history-main">
<div class="auto-sync-history-title-row">
<strong>${_esc(playlistName)}</strong>
<span class="auto-sync-history-status ${_escAttr(status)}">${_esc(autoSyncHistoryStatusLabel(status))}</span>
<div class="auto-sync-history-card-head">
<div class="auto-sync-history-title-block">
<div class="auto-sync-history-title-row">
<span class="auto-sync-card-status-dot ${autoSyncHistoryStatusClass(status)}"></span>
<strong>${_esc(playlistName)}</strong>
<span class="auto-sync-history-status ${_escAttr(status)}">${_esc(autoSyncHistoryStatusLabel(status))}</span>
</div>
<small>${_esc(summary)}</small>
</div>
<div class="auto-sync-card-flow">
<span class="flow-trigger">${_esc(entry.trigger_source || 'pipeline')}</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-action">Refresh</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-action">Discover</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-notify">Sync + wishlist</span>
<div class="auto-sync-history-meta">
${started ? `<span>${_esc(started)}</span>` : ''}
${duration ? `<span>${_esc(duration)}</span>` : ''}
<span>${_esc(entry.trigger_source || 'pipeline')}</span>
<button type="button" class="auto-sync-history-expand-label" data-history-toggle-button="${entryId}">View details</button>
</div>
<small>${_esc(summary)}</small>
</div>
<div class="auto-sync-history-meta">
${started ? `<span>${_esc(started)}</span>` : ''}
${duration ? `<span>${_esc(duration)}</span>` : ''}
<span>${_esc(entry.trigger_source || 'pipeline')}</span>
<button type="button" class="auto-sync-history-expand-label" data-history-toggle-button="${entryId}">View details</button>
<div class="auto-sync-card-flow">
<span class="flow-trigger">${_esc(entry.trigger_source || 'pipeline')}</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-action">Refresh</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-action">Discover</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-notify">Sync + wishlist</span>
</div>
<div class="auto-sync-history-preview">
${autoSyncHistoryPreviewPill('Tracks', before.track_count, after.track_count, trackDelta)}

52
webui/static/style.css
View file

@ -12111,21 +12111,17 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-history-row {
display: grid;
grid-template-columns: 16px minmax(280px, 1fr) minmax(160px, auto);
grid-template-areas:
"dot main meta"
". preview meta";
align-items: center;
gap: 10px 16px;
min-height: 118px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px 20px;
cursor: pointer;
}
.auto-sync-history-row:focus-visible {
outline: 2px solid rgba(var(--accent-rgb), 0.45);
outline-offset: -3px;
outline-offset: -4px;
border-radius: 12px;
}
.auto-sync-history-status {
@ -12154,10 +12150,16 @@ body.helper-mode-active #dashboard-activity-feed:hover {
color: #facc15;
}
.auto-sync-history-main {
grid-area: main;
.auto-sync-history-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
min-width: 0;
}
.auto-sync-history-title-block {
min-width: 0;
max-width: 760px;
}
.auto-sync-history-title-row {
@ -12179,7 +12181,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
white-space: nowrap;
}
.auto-sync-history-main small {
.auto-sync-history-title-block small {
display: block;
margin-top: 8px;
color: rgba(255, 255, 255, 0.4);
@ -12191,11 +12193,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-history-preview {
grid-area: preview;
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 760px;
}
.auto-sync-history-preview span {
@ -12208,14 +12208,14 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-history-meta {
grid-area: meta;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
align-items: center;
gap: 6px;
max-width: 240px;
min-width: 190px;
max-width: 320px;
}
.auto-sync-history-meta span,
@ -12261,13 +12261,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
border-color: rgba(var(--accent-rgb), 0.35);
}
.auto-sync-history-entry .auto-sync-card-status-dot {
grid-area: dot;
}
.auto-sync-history-detail {
display: none;
padding: 18px 20px 20px 52px;
padding: 18px 20px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
@ -12575,18 +12571,16 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-history-row {
grid-template-columns: 12px minmax(0, 1fr);
grid-template-areas:
"dot main"
". preview"
". meta";
align-items: flex-start;
min-height: 0;
padding: 16px;
}
.auto-sync-history-card-head {
flex-direction: column;
}
.auto-sync-history-meta {
justify-content: flex-start;
min-width: 0;
max-width: none;
}