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

style

Browse source
This commit is contained in:
Broque Thomas 2025-08-25 17:43:13 -07:00
parent a0682b1ae0
commit 2475586523
2 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webui/static/script.js
View file

@ -1730,8 +1730,8 @@ async function openDownloadMissingModal(playlistId) {
${tracks.map((track, index) => ` ${tracks.map((track, index) => `
<tr data-track-index="${index}"> <tr data-track-index="${index}">
<td class="track-number">${index + 1}</td> <td class="track-number">${index + 1}</td>
<td class="track-name">${escapeHtml(track.name)}</td> <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
<td class="track-artist">${track.artists.join(', ')}</td> <td class="track-artist" title="${escapeHtml(track.artists.join(', '))}">${track.artists.join(', ')}</td>
<td class="track-duration">${formatDuration(track.duration_ms)}</td> <td class="track-duration">${formatDuration(track.duration_ms)}</td>
<td class="track-match-status match-checking" id="match-${index}">🔍 Pending</td> <td class="track-match-status match-checking" id="match-${index}">🔍 Pending</td>
<td class="track-download-status" id="download-${index}">-</td> <td class="track-download-status" id="download-${index}">-</td>

29
webui/static/style.css
View file

@ -4751,6 +4751,7 @@ body {
.download-tracks-table { .download-tracks-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; /* Enable fixed layout for even column distribution */
} }
.download-tracks-table th { .download-tracks-table th {
@ -4758,7 +4759,7 @@ body {
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
text-align: left; text-align: center;
padding: 12px 15px; padding: 12px 15px;
border-bottom: 1px solid #555555; border-bottom: 1px solid #555555;
position: sticky; position: sticky;
@ -4780,31 +4781,40 @@ body {
.track-number { .track-number {
color: #888888; color: #888888;
font-weight: 500; font-weight: 500;
width: 50px; width: 5%; /* 5% for track numbers */
text-align: center; text-align: center;
} }
.track-name { .track-name {
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
max-width: 200px; width: 25%; /* 25% for track names */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.track-artist { .track-artist {
color: #cccccc; color: #cccccc;
max-width: 150px; width: 20%; /* 20% for artist names */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.track-duration { .track-duration {
color: #999999; color: #999999;
text-align: center; text-align: center;
width: 80px; width: 8%; /* 8% for duration */
} }
.track-match-status { .track-match-status {
text-align: center; text-align: center;
width: 100px; width: 15%; /* 15% for library match status */
font-weight: 600; font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.match-found { color: #4CAF50; } .match-found { color: #4CAF50; }
@ -4813,8 +4823,11 @@ body {
.track-download-status { .track-download-status {
text-align: center; text-align: center;
width: 120px; width: 20%; /* 20% for download status with progress */
font-weight: 500; font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.download-searching { color: #2196F3; } .download-searching { color: #2196F3; }
@ -4824,7 +4837,7 @@ body {
.track-actions { .track-actions {
text-align: center; text-align: center;
width: 80px; width: 7%; /* 7% for action buttons */
} }
.track-result-card .track-actions{ .track-result-card .track-actions{