vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: fix tracklist layout for editable playlists (add space for delete button)

Browse source
This commit is contained in:
Julien Maille 2026-01-18 22:21:55 +01:00
parent 53e20740b0
commit 9a1ef9d0ef
2 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
js/ui.js
View file

@ -1596,6 +1596,7 @@ export class UIRenderer {
// Add remove buttons and enable reordering ONLY IF OWNED // Add remove buttons and enable reordering ONLY IF OWNED
if (ownedPlaylist) { if (ownedPlaylist) {
tracklistContainer.classList.add('is-editable');
const trackItems = tracklistContainer.querySelectorAll('.track-item'); const trackItems = tracklistContainer.querySelectorAll('.track-item');
trackItems.forEach((item, index) => { trackItems.forEach((item, index) => {
const actionsDiv = item.querySelector('.track-item-actions'); const actionsDiv = item.querySelector('.track-item-actions');
@ -1610,6 +1611,8 @@ export class UIRenderer {
}); });
this.enableTrackReordering(tracklistContainer, tracks, playlistId, syncManager); this.enableTrackReordering(tracklistContainer, tracks, playlistId, syncManager);
} else {
tracklistContainer.classList.remove('is-editable');
} }
// Update header like button - hide for user playlists // Update header like button - hide for user playlists

19
styles.css
View file

@ -980,6 +980,10 @@ body.has-page-background .track-item:hover {
justify-self: flex-end; justify-self: flex-end;
} }
.is-editable .track-list-header .duration-header {
padding-right: 1.5rem;
}
.track-item { .track-item {
display: grid; display: grid;
grid-template-columns: 40px 1fr 80px 48px; grid-template-columns: 40px 1fr 80px 48px;
@ -1148,6 +1152,17 @@ body.has-page-background .track-item:hover {
color: var(--foreground); color: var(--foreground);
} }
/* Editable Playlist Track Items (with remove button) */
.is-editable .track-list-header,
.is-editable .track-item {
grid-template-columns: 40px 1fr 80px 90px;
}
:root[data-track-actions-mode='inline'] .is-editable .track-list-header,
:root[data-track-actions-mode='inline'] .is-editable .track-item {
grid-template-columns: 40px 1fr 80px 260px;
}
.detail-header { .detail-header {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -2617,6 +2632,10 @@ input:checked + .slider::before {
justify-self: flex-end; justify-self: flex-end;
} }
.is-editable .track-list-header .duration-header {
padding-right: 1.5rem;
}
/* Responsive Design */ /* Responsive Design */
@supports (padding-top: env(safe-area-inset-top)) { @supports (padding-top: env(safe-area-inset-top)) {