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

Unify artist detail action buttons

Browse source 
Move the artist watchlist and discography actions into the main artist hero action row so they sit with Artist Radio and Enhance Quality. Apply a shared compact pill treatment for the hero actions while preserving the existing button IDs and click behavior.
This commit is contained in:
Broque Thomas 2026-05-24 10:46:21 -07:00
parent 9a0e3b4011
commit ccbe918808
2 changed files with 121 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
webui/index.html
View file

@ -2435,10 +2435,6 @@
<span>← Back</span>
</button>
<button class="library-artist-watchlist-btn" id="library-artist-watchlist-btn">
<span class="watchlist-icon">👁️</span>
<span class="watchlist-text">Add to Watchlist</span>
</button>
</div>
<!-- Artist Hero Section -->
@ -2466,6 +2462,17 @@
<span class="radio-icon">📻</span>
<span class="radio-text">Artist Radio</span>
</button>
<button class="library-artist-watchlist-btn" id="library-artist-watchlist-btn">
<span class="watchlist-icon">👁️</span>
<span class="watchlist-text">Add to Watchlist</span>
</button>
<div class="discog-download-wrap" id="discog-download-wrap" style="display:none;">
<button class="discog-download-btn discog-btn-compact" id="discog-download-btn" onclick="openDiscographyModal()">
<span class="discog-btn-icon">⬇</span>
<span class="discog-btn-text">Download Discography</span>
<span class="discog-btn-shimmer"></span>
</button>
</div>
<button class="library-artist-enhance-btn hidden" id="library-artist-enhance-btn"
onclick="openEnhanceQualityModal()">
<span class="enhance-icon">⚡</span>
@ -2485,13 +2492,6 @@
</div>
</div>
<div class="discog-download-wrap" id="discog-download-wrap" style="display:none;">
<button class="discog-download-btn discog-btn-compact" id="discog-download-btn" onclick="openDiscographyModal()">
<span class="discog-btn-icon">⬇</span>
<span class="discog-btn-text">Download Discography</span>
<span class="discog-btn-shimmer"></span>
</button>
</div>
<div class="collection-overview">
<div class="collection-category">

110
webui/static/style.css
View file

@ -45706,6 +45706,10 @@ textarea.enhanced-meta-field-input {
.discog-download-wrap { margin: 12px 0 4px; }
.artist-hero-actions .discog-download-wrap { margin: 0; }
.artist-hero-actions .discog-btn-compact { margin-top: 0; }
.discog-download-btn {
position: relative;
display: flex;
@ -45753,6 +45757,112 @@ textarea.enhanced-meta-field-input {
animation: discogShimmer 3s ease-in-out infinite;
}
.artist-hero-actions {
gap: 10px;
align-items: center;
}
.artist-hero-actions .library-artist-radio-btn,
.artist-hero-actions .library-artist-watchlist-btn,
.artist-hero-actions .discog-download-btn,
.artist-hero-actions .library-artist-enhance-btn {
--artist-action-rgb: var(--accent-rgb);
min-height: 38px;
width: auto;
max-width: none;
padding: 8px 14px 8px 12px;
gap: 8px;
border-radius: 999px;
color: rgba(255, 255, 255, 0.82);
background:
linear-gradient(135deg, rgba(var(--artist-action-rgb), 0.13), rgba(var(--artist-action-rgb), 0.03)),
rgba(255, 255, 255, 0.035);
border: 1px solid rgba(var(--artist-action-rgb), 0.26);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 8px 22px rgba(0, 0, 0, 0.22);
font-size: 12px;
font-weight: 650;
letter-spacing: 0;
line-height: 1;
backdrop-filter: blur(14px) saturate(1.25);
transform: none;
}
.artist-hero-actions .library-artist-radio-btn { --artist-action-rgb: 79, 195, 247; }
.artist-hero-actions .library-artist-watchlist-btn { --artist-action-rgb: 255, 193, 7; }
.artist-hero-actions .discog-download-btn { --artist-action-rgb: var(--accent-rgb); }
.artist-hero-actions .library-artist-enhance-btn { --artist-action-rgb: 180, 132, 255; }
.artist-hero-actions .library-artist-radio-btn::before,
.artist-hero-actions .library-artist-watchlist-btn::before,
.artist-hero-actions .library-artist-enhance-btn::before,
.artist-hero-actions .discog-download-btn::before {
content: '';
width: 7px;
height: 7px;
border-radius: 999px;
position: relative;
inset: auto;
flex: 0 0 auto;
opacity: 1;
background: rgb(var(--artist-action-rgb));
box-shadow: 0 0 14px rgba(var(--artist-action-rgb), 0.85);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.artist-hero-actions .library-artist-radio-btn:hover,
.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled),
.artist-hero-actions .discog-download-btn:hover,
.artist-hero-actions .library-artist-enhance-btn:hover {
color: #ffffff;
border-color: rgba(var(--artist-action-rgb), 0.5);
background:
linear-gradient(135deg, rgba(var(--artist-action-rgb), 0.22), rgba(var(--artist-action-rgb), 0.06)),
rgba(255, 255, 255, 0.055);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 12px 28px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(var(--artist-action-rgb), 0.12);
transform: translateY(-1px);
}
.artist-hero-actions .library-artist-radio-btn:hover::before,
.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled)::before,
.artist-hero-actions .discog-download-btn:hover::before,
.artist-hero-actions .library-artist-enhance-btn:hover::before {
transform: scale(1.25);
box-shadow: 0 0 18px rgba(var(--artist-action-rgb), 1);
}
.artist-hero-actions .library-artist-watchlist-btn.watching {
color: #ffd761;
border-color: rgba(255, 193, 7, 0.52);
background:
linear-gradient(135deg, rgba(255, 193, 7, 0.24), rgba(255, 193, 7, 0.06)),
rgba(255, 255, 255, 0.04);
}
.artist-hero-actions .library-artist-radio-btn .radio-icon,
.artist-hero-actions .library-artist-watchlist-btn .watchlist-icon,
.artist-hero-actions .discog-download-btn .discog-btn-icon,
.artist-hero-actions .library-artist-enhance-btn .enhance-icon {
font-size: 13px;
position: relative;
z-index: 1;
transform: none;
}
.artist-hero-actions .library-artist-radio-btn:hover .radio-icon,
.artist-hero-actions .library-artist-watchlist-btn:hover:not(:disabled) .watchlist-icon,
.artist-hero-actions .library-artist-enhance-btn:hover .enhance-icon {
transform: none;
}
.artist-hero-actions .discog-btn-shimmer {
display: none;
}
@keyframes discogShimmer {
0%, 100% { left: -100%; }
50% { left: 150%; }