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); tr.appendChild(tagTd);
// Source info button (admin only) // Track actions cell — source info, redownload, delete (admin only)
const srcTd = document.createElement('td'); const actionsTd = document.createElement('td');
srcTd.className = 'col-source-info'; actionsTd.className = 'col-track-actions';
const srcBtn = document.createElement('button'); actionsTd.innerHTML = `
srcBtn.className = 'enhanced-source-info-btn'; <div class="enhanced-track-actions-group">
srcBtn.innerHTML = 'ℹ'; <button class="enhanced-source-info-btn" title="View download source info">ℹ</button>
srcBtn.title = 'View download source info'; <button class="enhanced-redownload-btn" title="Redownload this track">&#8635;</button>
srcTd.appendChild(srcBtn); <button class="enhanced-delete-btn" title="Delete track from library">&#10005;</button>
tr.appendChild(srcTd); </div>
`;
// Redownload button (admin only) tr.appendChild(actionsTd);
const rdTd = document.createElement('td');
rdTd.className = 'col-redownload';
const rdBtn = document.createElement('button');
rdBtn.className = 'enhanced-redownload-btn';
rdBtn.innerHTML = '&#8635;';
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 = '&#10005;';
delBtn.title = 'Delete track from library';
delTd.appendChild(delBtn);
tr.appendChild(delTd);
} else { } else {
// Report Issue button per track (non-admin) // Report Issue button per track (non-admin)
const reportTd = document.createElement('td'); 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); color: rgba(255,255,255,0.4);
font-size: 12px; font-size: 12px;
} }
.enhanced-track-table .col-delete { .enhanced-track-table .col-track-actions {
width: 36px; width: auto;
text-align: center; text-align: right;
} }
.enhanced-delete-btn { .enhanced-delete-btn {
background: none; background: none;
@ -52379,15 +52379,41 @@ tr.tag-diff-same {
font-size: 16px; padding: 2px 4px; border-radius: 4px; transition: all 0.2s; 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); } .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-track-actions-group {
.enhanced-source-info-btn { display: flex;
background: none; border: none; color: rgba(255,255,255,0.15); cursor: pointer; align-items: center;
font-size: 14px; padding: 2px 4px; border-radius: 4px; transition: all 0.2s; 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); } tr:hover .enhanced-track-actions-group { opacity: 1; }
.col-source-info { width: 28px; text-align: center; }
.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 */
.source-info-popover { .source-info-popover {