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

Group track action buttons (info, redownload, delete) into single cell

Browse source 
Three separate table cells with fixed widths replaced by one compact
cell with a flex group. Buttons are 24px each, 2px gap, fade in on
row hover. Removes ~70px of wasted horizontal space per track row.
This commit is contained in:
Broque Thomas 2026-04-01 15:12:28 -07:00
parent 45129263b4
commit 19538233fd
2 changed files with 47 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
webui/static/script.js
View file

@ -42191,35 +42191,17 @@ function _buildTrackRow(track, album, admin) {
}
tr.appendChild(tagTd);
// Source info button (admin only)
const srcTd = document.createElement('td');
srcTd.className = 'col-source-info';
const srcBtn = document.createElement('button');
srcBtn.className = 'enhanced-source-info-btn';
srcBtn.innerHTML = 'ℹ';
srcBtn.title = 'View download source info';
srcTd.appendChild(srcBtn);
tr.appendChild(srcTd);
// Redownload button (admin only)
const rdTd = document.createElement('td');
rdTd.className = 'col-redownload';
const rdBtn = document.createElement('button');
rdBtn.className = 'enhanced-redownload-btn';
rdBtn.innerHTML = '↻';
rdBtn.title = 'Redownload this track';
rdTd.appendChild(rdBtn);
tr.appendChild(rdTd);
// Delete button (admin only)
const delTd = document.createElement('td');
delTd.className = 'col-delete';
const delBtn = document.createElement('button');
delBtn.className = 'enhanced-delete-btn';
delBtn.innerHTML = '✕';
delBtn.title = 'Delete track from library';
delTd.appendChild(delBtn);
tr.appendChild(delTd);
// Track actions cell — source info, redownload, delete (admin only)
const actionsTd = document.createElement('td');
actionsTd.className = 'col-track-actions';
actionsTd.innerHTML = `
<div class="enhanced-track-actions-group">
<button class="enhanced-source-info-btn" title="View download source info">ℹ</button>
<button class="enhanced-redownload-btn" title="Redownload this track">&#8635;</button>
<button class="enhanced-delete-btn" title="Delete track from library">&#10005;</button>
</div>
`;
tr.appendChild(actionsTd);
} else {
// Report Issue button per track (non-admin)
const reportTd = document.createElement('td');

46
webui/static/style.css
View file

@ -41655,9 +41655,9 @@ textarea.enhanced-meta-field-input {
color: rgba(255,255,255,0.4);
font-size: 12px;
}
.enhanced-track-table .col-delete {
width: 36px;
text-align: center;
.enhanced-track-table .col-track-actions {
width: auto;
text-align: right;
}
.enhanced-delete-btn {
background: none;
@ -52379,15 +52379,41 @@ tr.tag-diff-same {
font-size: 16px; padding: 2px 4px; border-radius: 4px; transition: all 0.2s;
}
.enhanced-redownload-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.1); }
.col-redownload { width: 30px; text-align: center; }
/* Track actions group — source info, redownload, delete in one cell */
.col-track-actions { width: auto; padding: 0 4px !important; }
/* Source Info button */
.enhanced-source-info-btn {
background: none; border: none; color: rgba(255,255,255,0.15); cursor: pointer;
font-size: 14px; padding: 2px 4px; border-radius: 4px; transition: all 0.2s;
.enhanced-track-actions-group {
display: flex;
align-items: center;
gap: 2px;
justify-content: flex-end;
opacity: 0.4;
transition: opacity 0.15s;
}
.enhanced-source-info-btn:hover { color: rgba(100,181,246,0.8); background: rgba(100,181,246,0.1); }
.col-source-info { width: 28px; text-align: center; }
tr:hover .enhanced-track-actions-group { opacity: 1; }
.enhanced-source-info-btn,
.enhanced-redownload-btn {
background: none; border: none; cursor: pointer;
width: 24px; height: 24px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s; padding: 0;
}
.enhanced-source-info-btn { color: rgba(255,255,255,0.35); font-size: 13px; }
.enhanced-source-info-btn:hover { color: rgba(100,181,246,0.9); background: rgba(100,181,246,0.1); }
.enhanced-redownload-btn { color: rgba(255,255,255,0.35); font-size: 15px; }
.enhanced-redownload-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.1); }
.enhanced-delete-btn {
background: none; border: none; cursor: pointer;
width: 24px; height: 24px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.35); font-size: 13px;
transition: all 0.15s; padding: 0;
}
.enhanced-delete-btn:hover { color: #ef5350; background: rgba(239,83,80,0.1); }
/* Source Info Popover */
.source-info-popover {