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

Use anchors for artist badges and update styles

Browse source 
Replace div badges with data-url/onclick handlers by semantic <a> elements (with href, target="_blank" and rel="noopener noreferrer") for clickable artist badges, keeping non-clickable badges as divs. Update CSS to target .artist-hero-badge and unify hover/image rules instead of relying on data-url attribute, preserving visual behavior and removing pointer cursor for non-clickable divs. Also remove rendering of the server_source badge from the artist meta panel. These changes improve accessibility, security, and maintainability of badge markup and styling.
This commit is contained in:
Broque Thomas 2026-04-13 10:10:41 -07:00
parent 05dfcc3e30
commit 82a621ff05
2 changed files with 10 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
webui/static/script.js
View file

@ -36067,11 +36067,11 @@ function updateArtistDetailHeader(artist) {
const badgesEl = document.getElementById('artists-hero-badges'); const badgesEl = document.getElementById('artists-hero-badges');
if (badgesEl) { if (badgesEl) {
const _hb = (logo, fallback, title, url) => { const _hb = (logo, fallback, title, url) => {
const attr = url ? `data-url="${_esc(url)}" onclick="window.open(this.dataset.url,'_blank')"` : '';
const inner = logo const inner = logo
? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">` ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
: `<span style="font-size:9px;font-weight:700;">${fallback}</span>`; : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
return `<div class="artists-hero-badge" title="${title}" ${attr}>${inner}</div>`; if (url) return `<a class="artists-hero-badge" title="${title}" href="${_esc(url)}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
return `<div class="artists-hero-badge" title="${title}">${inner}</div>`;
}; };
const badges = []; const badges = [];
if (info.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${info.spotify_artist_id}`)); if (info.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${info.spotify_artist_id}`));
@ -42906,11 +42906,11 @@ function updateArtistDetailPageHeaderWithData(artist) {
const badgesContainer = document.getElementById("artist-hero-badges"); const badgesContainer = document.getElementById("artist-hero-badges");
if (badgesContainer) { if (badgesContainer) {
const _hb = (logo, fallback, title, url) => { const _hb = (logo, fallback, title, url) => {
const attr = url ? `data-url="${url}" onclick="window.open(this.dataset.url,'_blank')"` : '';
const inner = logo const inner = logo
? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">` ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
: `<span style="font-size:9px;font-weight:700;">${fallback}</span>`; : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
return `<div class="artist-hero-badge" title="${title}" ${attr}>${inner}</div>`; if (url) return `<a class="artist-hero-badge" title="${title}" href="${url}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
return `<div class="artist-hero-badge" title="${title}">${inner}</div>`;
}; };
const adbSlug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : ''; const adbSlug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
@ -44595,12 +44595,6 @@ function renderArtistMetaPanel(artist) {
idBadges.appendChild(makeClickableBadge(src.svc, 'artist', artist[src.key], src.label)); idBadges.appendChild(makeClickableBadge(src.svc, 'artist', artist[src.key], src.label));
} }
}); });
if (artist.server_source) {
const srcBadge = document.createElement('span');
srcBadge.className = 'enhanced-id-badge server';
srcBadge.textContent = artist.server_source;
idBadges.appendChild(srcBadge);
}
headerInfo.appendChild(idBadges); headerInfo.appendChild(idBadges);
headerLeft.appendChild(headerInfo); headerLeft.appendChild(headerInfo);
header.appendChild(headerLeft); header.appendChild(headerLeft);

10
webui/static/style.css
View file

@ -23211,19 +23211,21 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.artist-hero-badge[title="Qobuz"] img { .artist-hero-badge[title="Qobuz"] img {
filter: invert(1); filter: invert(1);
} }
.artist-hero-badge[data-url] { a.artist-hero-badge {
cursor: pointer; cursor: pointer;
text-decoration: none;
color: inherit;
} }
.artist-hero-badge[data-url]:hover { a.artist-hero-badge:hover {
background: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} }
.artist-hero-badge[data-url]:hover img { a.artist-hero-badge:hover img {
opacity: 1; opacity: 1;
} }
.artist-hero-badge:not([data-url]) { div.artist-hero-badge {
cursor: default; cursor: default;
} }