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

Two-column badge layout for artist cards with 7+ service matches

Browse source
This commit is contained in:
Broque Thomas 2026-03-11 23:01:47 -07:00
parent 691e026208
commit d401dc8af1
2 changed files with 61 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
webui/static/script.js
View file

@ -32603,7 +32603,15 @@ function createLibraryArtistCard(artist) {
if (badgeSources.length > 0) {
const badgeContainer = document.createElement('div');
badgeContainer.className = 'card-badge-container';
badgeSources.forEach(source => {
// Separate service badges from watch badge
const serviceBadges = badgeSources.filter(s => !s.isWatch);
const watchBadge = badgeSources.find(s => s.isWatch);
const maxPerColumn = 6;
const needsOverflow = serviceBadges.length > maxPerColumn;
// Helper to create a badge icon element
const createBadgeIcon = (source) => {
const icon = document.createElement('div');
icon.className = `${source.cls} source-card-icon`;
icon.title = source.title;
@ -32630,8 +32638,38 @@ function createLibraryArtistCard(artist) {
window.open(source.url, '_blank');
};
}
badgeContainer.appendChild(icon);
});
return icon;
};
if (needsOverflow) {
// Overflow column (left) — watch badge first, then extra service badges
const overflowCol = document.createElement('div');
overflowCol.className = 'badge-overflow-column';
if (watchBadge) {
overflowCol.appendChild(createBadgeIcon(watchBadge));
}
serviceBadges.slice(maxPerColumn).forEach(source => {
overflowCol.appendChild(createBadgeIcon(source));
});
badgeContainer.appendChild(overflowCol);
// Primary column (right) — first 6 service badges
const primaryCol = document.createElement('div');
primaryCol.className = 'badge-primary-column';
serviceBadges.slice(0, maxPerColumn).forEach(source => {
primaryCol.appendChild(createBadgeIcon(source));
});
badgeContainer.appendChild(primaryCol);
} else {
// Single column — service badges + watch badge last
serviceBadges.forEach(source => {
badgeContainer.appendChild(createBadgeIcon(source));
});
if (watchBadge) {
badgeContainer.appendChild(createBadgeIcon(watchBadge));
}
}
card.appendChild(badgeContainer);
}

20
webui/static/style.css
View file

@ -29210,6 +29210,26 @@ body {
filter: invert(1);
}
/* Two-column badge layout for overflow */
.card-badge-container:has(.badge-overflow-column) {
flex-direction: row;
gap: 3px;
align-items: flex-start;
}
.badge-primary-column,
.badge-overflow-column {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.badge-overflow-column {
width: 24px;
flex-shrink: 0;
}
.watch-card-icon {
cursor: pointer;
font-size: 10px;