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

Two-line batch history layout with descriptive stats

Browse source
This commit is contained in:
JohnBaumb 2026-04-23 00:44:59 -07:00
parent 332392f338
commit 9b3e65c3d8
2 changed files with 36 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
webui/static/pages-extra.js
View file

@ -2832,15 +2832,17 @@ function _adlRenderBatchHistory() {
const failed = h.tracks_failed || 0; const failed = h.tracks_failed || 0;
const total = h.total_tracks || 0; const total = h.total_tracks || 0;
// Build stats: "found/total Xnew Xfailed" // Build stats line: "X in library · X downloaded · X failed (of N)"
const statsParts = []; const statsParts = [];
if (found > 0 || downloaded > 0) { if (found > 0 || downloaded > 0) {
const owned = found - downloaded; // already in library before this sync const owned = found - downloaded; // already in library before this sync
if (owned > 0) statsParts.push(`<span style="color:rgba(74,222,128,0.7)" title="Already in library">${owned}</span>`); if (owned > 0) statsParts.push(`<span style="color:rgba(74,222,128,0.7)" title="Already in library">${owned} in library</span>`);
if (downloaded > 0) statsParts.push(`<span style="color:rgba(96,165,250,0.7)" title="Downloaded">${downloaded} new</span>`); if (downloaded > 0) statsParts.push(`<span style="color:rgba(96,165,250,0.7)" title="Downloaded">${downloaded} downloaded</span>`);
} }
if (failed > 0) statsParts.push(`<span style="color:#ef4444" title="Failed">${failed} failed</span>`); if (failed > 0) statsParts.push(`<span style="color:#ef4444" title="Failed">${failed} failed</span>`);
if (statsParts.length === 0) statsParts.push(`0/${total}`); const notFound = total - found - failed;
if (notFound > 0) statsParts.push(`<span title="Not found">${notFound} not found</span>`);
if (statsParts.length === 0) statsParts.push(`${total} tracks`);
let dateText = ''; let dateText = '';
if (h.completed_at) { if (h.completed_at) {
@ -2877,11 +2879,16 @@ function _adlRenderBatchHistory() {
: ''; : '';
return `<div class="adl-batch-history-item"> return `<div class="adl-batch-history-item">
${histDot}
${thumb} ${thumb}
<div class="adl-batch-history-name">${name} ${sourceLabel}</div> <div class="adl-batch-history-content">
<div class="adl-batch-history-stats">${statsParts.join(' · ')}</div> <div class="adl-batch-history-row1">
<div class="adl-batch-history-date">${dateText}</div> ${histDot}
<span class="adl-batch-history-name">${name}</span>
${sourceLabel}
<span class="adl-batch-history-date">${dateText}</span>
</div>
<div class="adl-batch-history-row2">${statsParts.join(' · ')}</div>
</div>
</div>`; </div>`;
}).join(''); }).join('');
} }

28
webui/static/style.css
View file

@ -57115,37 +57115,51 @@ body.reduce-effects *::after {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 6px 0; padding: 7px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.02);
} }
.adl-batch-history-thumb { .adl-batch-history-thumb {
width: 24px; width: 28px;
height: 24px; height: 28px;
border-radius: 3px; border-radius: 3px;
object-fit: cover; object-fit: cover;
flex-shrink: 0; flex-shrink: 0;
} }
.adl-batch-history-name { .adl-batch-history-content {
flex: 1; flex: 1;
min-width: 0;
}
.adl-batch-history-row1 {
display: flex;
align-items: center;
gap: 6px;
}
.adl-batch-history-name {
font-size: 0.75rem; font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.55);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
flex: 1;
min-width: 0;
} }
.adl-batch-history-stats { .adl-batch-history-row2 {
font-size: 0.68rem; font-size: 0.68rem;
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
flex-shrink: 0; margin-top: 2px;
padding-left: 12px;
} }
.adl-batch-history-date { .adl-batch-history-date {
font-size: 0.65rem; font-size: 0.65rem;
color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2);
flex-shrink: 0; flex-shrink: 0;
margin-left: auto;
} }
/* ---- Responsive ---- */ /* ---- Responsive ---- */