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

Fix watchlist badge positioning and mobile card sizing

Browse source
This commit is contained in:
Broque Thomas 2026-03-10 15:24:33 -07:00
parent bc41afe83b
commit 9a1c3b4124
2 changed files with 84 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
webui/static/script.js
View file

@ -31811,6 +31811,14 @@ function createLibraryArtistCard(artist) {
if (artist.genius_url) {
badgeSources.push({ cls: 'genius-card-icon', logo: GENIUS_LOGO_URL, fallback: 'GEN', title: 'View on Genius', url: artist.genius_url });
}
// Add watchlist indicator as the last badge
const hasExternalId = artist.itunes_artist_id || artist.spotify_artist_id;
if (artist.is_watched) {
badgeSources.push({ cls: 'watch-card-icon watched', logo: null, fallback: '👁️', fallbackExpanded: 'Watching', title: 'On your watchlist', url: null, isWatch: true });
} else if (hasExternalId) {
badgeSources.push({ cls: 'watch-card-icon', logo: null, fallback: '👁️', fallbackExpanded: 'Watch', title: 'Add to Watchlist', url: null, isWatch: true, unwatched: true });
}
if (badgeSources.length > 0) {
const badgeContainer = document.createElement('div');
badgeContainer.className = 'card-badge-container';
@ -31824,40 +31832,28 @@ function createLibraryArtistCard(artist) {
img.style.cssText = 'width: 16px; height: auto; display: block;';
img.onerror = () => { icon.textContent = source.fallback; };
icon.appendChild(img);
} else if (source.fallbackExpanded) {
icon.innerHTML = `<span class="watch-icon-emoji">${source.fallback}</span><span class="watch-icon-label">${source.fallbackExpanded}</span>`;
} else {
icon.textContent = source.fallback;
}
icon.onclick = (e) => {
e.stopPropagation();
window.open(source.url, '_blank');
};
if (source.isWatch && source.unwatched) {
icon.style.opacity = '0.4';
icon.onclick = (e) => {
e.stopPropagation();
toggleLibraryCardWatchlist(icon, artist);
};
} else if (source.url) {
icon.onclick = (e) => {
e.stopPropagation();
window.open(source.url, '_blank');
};
}
badgeContainer.appendChild(icon);
});
card.appendChild(badgeContainer);
}
// Add watchlist button/indicator on the card
const hasExternalId = artist.itunes_artist_id || artist.spotify_artist_id;
if (artist.is_watched) {
const watchIcon = document.createElement('div');
watchIcon.className = 'watchlist-card-icon';
watchIcon.title = 'On your watchlist';
watchIcon.style.top = badgeOffset + 'px';
watchIcon.textContent = '👁️';
card.appendChild(watchIcon);
} else if (hasExternalId) {
const watchBtn = document.createElement('button');
watchBtn.className = 'library-card-watchlist-btn';
watchBtn.style.top = badgeOffset + 'px';
watchBtn.title = 'Add to Watchlist';
watchBtn.innerHTML = '<span class="watchlist-icon">👁️</span><span class="watchlist-text">Watch</span>';
watchBtn.onclick = (e) => {
e.stopPropagation();
toggleLibraryCardWatchlist(watchBtn, artist);
};
card.appendChild(watchBtn);
}
// Create image element
const imageContainer = document.createElement("div");
imageContainer.className = "library-artist-image";

65
webui/static/style.css
View file

@ -16372,6 +16372,7 @@ body {
.library-artist-card {
border-radius: 12px;
aspect-ratio: 0.65;
}
.library-artist-info {
@ -16381,6 +16382,29 @@ body {
.library-artist-name {
font-size: 14px;
}
.card-badge-container {
top: 4px;
right: 4px;
gap: 2px;
}
.source-card-icon {
width: 18px;
height: 18px;
font-size: 7px;
border-radius: 3px;
}
.source-card-icon img {
width: 12px !important;
}
.watch-card-icon {
width: 18px !important;
height: 18px !important;
font-size: 8px !important;
}
}
/* ========================================
@ -28339,13 +28363,12 @@ body {
.card-badge-container {
position: absolute;
top: 8px;
align-items: flex-end;
right: 8px;
display: flex;
flex-direction: column;
gap: 4px;
gap: 3px;
z-index: 100;
max-height: calc(100% - 80px);
overflow: hidden;
}
.source-card-icon {
@ -28401,6 +28424,42 @@ body {
.genius-card-icon:hover {
background: #ffff64;
}
.watch-card-icon {
cursor: pointer;
font-size: 10px;
white-space: nowrap;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
align-self: flex-end;
overflow: hidden;
transition: width 0.25s ease, padding 0.25s ease;
}
.watch-icon-emoji {
flex-shrink: 0;
}
.watch-icon-label {
opacity: 0;
max-width: 0;
overflow: hidden;
transition: opacity 0.2s ease 0.05s, max-width 0.25s ease;
}
.library-artist-card:hover .watch-card-icon {
width: auto !important;
padding: 3px 7px !important;
}
.library-artist-card:hover .watch-icon-label {
opacity: 1;
max-width: 60px;
margin-left: 2px;
}
.watch-card-icon.watched {
background: rgba(255, 193, 7, 0.2);
border-color: rgba(255, 193, 7, 0.4);
}
.watch-card-icon:hover {
background: rgba(255, 193, 7, 0.35);
}
/* Artist detail page source link buttons */
.source-link-btn {