openclaw/lidarr-spotify-frontend
2
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve track dialog layout with responsive grid and cleaner status alignment

Browse source
This commit is contained in:
J0Z1L 2026-02-28 12:04:21 +01:00
parent b021df31b4
commit 7815051e5d
2 changed files with 97 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

10
public/app.js
View file

@ -198,10 +198,12 @@ async function openAlbumDialog(albumId, preselectedTrackNames = [], context = nu
row.className = 'track-row'; row.className = 'track-row';
const isChecked = preselected.size > 0 ? preselected.has(track.name) : true; const isChecked = preselected.size > 0 ? preselected.has(track.name) : true;
row.innerHTML = ` row.innerHTML = `
<input type="checkbox" ${isChecked ? 'checked' : ''} data-track-name="${track.name.replace(/"/g, '&quot;')}" data-exists="${Boolean(track.exists)}" /> <input class="track-check" type="checkbox" ${isChecked ? 'checked' : ''} data-track-name="${track.name.replace(/"/g, '&quot;')}" data-exists="${Boolean(track.exists)}" />
<span>${track.trackNumber}. ${track.name}</span> <span class="track-main">
<small>(${formatDuration(track.durationMs)})</small> <span class="track-title">${track.trackNumber}. ${track.name}</span>
${pill(Boolean(track.exists))} <span class="track-meta">${formatDuration(track.durationMs)}</span>
</span>
<span class="track-status">${pill(Boolean(track.exists))}</span>
`; `;
const input = row.querySelector('input'); const input = row.querySelector('input');
input.addEventListener('change', updateDialogActionButton); input.addEventListener('change', updateDialogActionButton);

101
public/styles.css
View file

@ -167,42 +167,123 @@ button:hover {
dialog { dialog {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 16px;
background: #0b1220; background: #0b1220;
color: var(--text); color: var(--text);
width: min(620px, 95vw); width: min(760px, 96vw);
padding: 0;
} }
.dialog-content { .dialog-content {
display: grid; display: grid;
gap: 0.6rem; gap: 0.8rem;
padding: 1rem;
} }
.track-list { .track-list {
max-height: 45vh; max-height: min(58vh, 640px);
overflow: auto; overflow: auto;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 12px;
padding: 0.5rem; padding: 0.6rem;
display: grid; display: grid;
gap: 0.3rem; gap: 0.45rem;
background: #0a1323;
} }
.track-row { .track-row {
display: flex; display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.65rem;
border: 1px solid #1f2f49;
border-radius: 10px;
padding: 0.5rem 0.6rem;
background: #0d1a2e;
}
.track-row:hover {
border-color: #34517a;
background: #10203a;
}
.track-check {
width: 22px;
height: 22px;
margin: 0;
cursor: pointer;
}
.track-main {
min-width: 0;
display: grid;
gap: 0.1rem;
}
.track-title {
font-size: 1.02rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-meta {
color: var(--muted);
font-size: 0.85rem;
}
.track-status {
justify-self: end;
} }
.dialog-actions { .dialog-actions {
margin-top: 0.7rem;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.5rem; gap: 0.5rem;
position: sticky;
bottom: 0;
background: linear-gradient(180deg, rgba(11, 18, 32, 0.7), rgba(11, 18, 32, 1));
padding-top: 0.6rem;
} }
@media (max-width: 680px) { @media (max-width: 680px) {
.search-row { .search-row {
flex-direction: column; flex-direction: column;
} }
dialog {
width: 98vw;
}
.dialog-content {
padding: 0.8rem;
}
.track-row {
grid-template-columns: 28px minmax(0, 1fr);
grid-template-areas:
"check title"
"check status";
align-items: start;
}
.track-check {
grid-area: check;
margin-top: 0.15rem;
}
.track-main {
grid-area: title;
}
.track-title {
white-space: normal;
line-height: 1.25;
}
.track-status {
grid-area: status;
justify-self: start;
}
} }