feat(search): add quality badge to Most Popular album/track cards
- Shows compact QualityBadge (e.g. "24bit/96kHz", "CD Quality") - Positioned at top-right corner of artwork - Semi-transparent background with blur for readability
This commit is contained in:
1 parent
5e83c1df47
commit
8c9a27afbb
1 file changed
+36
@@ -882,6 +882,15 @@
|
||||
<Disc3 size={32} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if album.maximum_bit_depth || album.maximum_sampling_rate}
|
||||
<div class="popular-quality-badge">
|
||||
<QualityBadge
|
||||
compact
|
||||
bitDepth={album.maximum_bit_depth}
|
||||
samplingRate={album.maximum_sampling_rate}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="popular-card-overlay">
|
||||
<div class="popular-card-buttons">
|
||||
<button
|
||||
@@ -957,6 +966,15 @@
|
||||
<Music size={32} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if track.maximum_bit_depth || track.maximum_sampling_rate}
|
||||
<div class="popular-quality-badge">
|
||||
<QualityBadge
|
||||
compact
|
||||
bitDepth={track.maximum_bit_depth}
|
||||
samplingRate={track.maximum_sampling_rate}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="popular-card-overlay">
|
||||
<div class="popular-card-buttons">
|
||||
<button
|
||||
@@ -2144,6 +2162,24 @@
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.popular-quality-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
z-index: 2;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.popular-quality-badge :global(.quality-badge-compact) {
|
||||
font-size: 10px;
|
||||
width: auto;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.popular-card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
Reference in new issue
Block a user