discovery: rebuild the Adventurousness dial — visible track + compact layout
The first cut had two problems (screenshot): the gradient track was invisible (Chromium does not render the range inputs own background as the track when appearance:none — must style ::-webkit-slider-runnable- track / ::-moz-range-track) and the grid layout stretched it full-width into a sparse void. Now: a contained (max-width 880) single-row flex control — icon | title+state | Safe | gradient track | Adventurous | live %. The gradient (green->accent->orange) renders on the track pseudo-elements, the thumb is centred on it, and a % readout anchors the right edge. Mobile wraps the slider to its own row.
This commit is contained in:
BoulderBadgeDad
parent
71a48dd344
commit
43fbab5704
3 changed files with 49 additions and 43 deletions
|
|
@ -3147,22 +3147,19 @@
|
|||
</div>
|
||||
|
||||
<!-- Discovery Adventurousness dial — fancy, syncs with Settings → Discovery -->
|
||||
<div class="adv-dial" id="adv-dial">
|
||||
<div class="adv-dial-head">
|
||||
<div class="adv-dial-icon" id="adv-dial-icon">🧭</div>
|
||||
<div>
|
||||
<div class="adv-dial-title">Adventurousness</div>
|
||||
<div class="adv-dial-state" id="adv-dial-state">Balanced</div>
|
||||
</div>
|
||||
<div class="adv-dial" id="adv-dial"
|
||||
title="Pushes globally-popular artists down so more obscure picks surface in your recommendations">
|
||||
<div class="adv-dial-icon" id="adv-dial-icon">🧭</div>
|
||||
<div class="adv-dial-label">
|
||||
<span class="adv-dial-title">Adventurousness</span>
|
||||
<span class="adv-dial-state" id="adv-dial-state">Balanced</span>
|
||||
</div>
|
||||
<div class="adv-dial-slider-wrap">
|
||||
<span class="adv-dial-end">Safe</span>
|
||||
<input type="range" class="adv-dial-slider" id="adv-dial-slider" min="0" max="1" step="0.05" value="0.3"
|
||||
oninput="onAdvDialInput(this.value)" onchange="onAdvDialCommit(this.value)"
|
||||
aria-label="Discovery adventurousness">
|
||||
<span class="adv-dial-end">Adventurous</span>
|
||||
</div>
|
||||
<div class="adv-dial-hint">Pushes popular artists down so obscure picks surface in your recommendations</div>
|
||||
<span class="adv-dial-end">Safe</span>
|
||||
<input type="range" class="adv-dial-slider" id="adv-dial-slider" min="0" max="1" step="0.05" value="0.3"
|
||||
oninput="onAdvDialInput(this.value)" onchange="onAdvDialCommit(this.value)"
|
||||
aria-label="Discovery adventurousness">
|
||||
<span class="adv-dial-end">Adventurous</span>
|
||||
<div class="adv-dial-val" id="adv-dial-val">30%</div>
|
||||
</div>
|
||||
|
||||
<!-- Recommended For You Section (similar-artists graph) -->
|
||||
|
|
|
|||
|
|
@ -31,11 +31,14 @@ function _advState(v) {
|
|||
return { word: 'Deep cuts only', icon: '🔮' };
|
||||
}
|
||||
function onAdvDialInput(value) {
|
||||
const s = _advState(parseFloat(value));
|
||||
const v = parseFloat(value);
|
||||
const s = _advState(v);
|
||||
const stateEl = document.getElementById('adv-dial-state');
|
||||
if (stateEl) stateEl.textContent = s.word;
|
||||
const iconEl = document.getElementById('adv-dial-icon');
|
||||
if (iconEl) iconEl.textContent = s.icon;
|
||||
const valEl = document.getElementById('adv-dial-val');
|
||||
if (valEl) valEl.textContent = Math.round(v * 100) + '%';
|
||||
}
|
||||
let _advCommitTimer = null;
|
||||
function onAdvDialCommit(value) {
|
||||
|
|
|
|||
|
|
@ -35167,52 +35167,58 @@ div.artist-hero-badge {
|
|||
Gradient slider (Safe green → accent → hot orange) with a glowing thumb, a rotating
|
||||
compass that swaps with the level, and a live state word. Syncs with Settings → Discovery. */
|
||||
.adv-dial {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
max-width: 880px;
|
||||
margin: 0 0 26px;
|
||||
padding: 16px 22px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(255,255,255,0.02));
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
box-shadow: 0 10px 34px rgba(0,0,0,0.28);
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "head slider" "head hint";
|
||||
align-items: center;
|
||||
column-gap: 26px; row-gap: 4px;
|
||||
padding: 13px 20px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(255,255,255,0.02));
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,0.25);
|
||||
}
|
||||
.adv-dial-head { grid-area: head; display: flex; align-items: center; gap: 14px; min-width: 188px; }
|
||||
.adv-dial-icon {
|
||||
width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 25px;
|
||||
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 22px;
|
||||
background: rgba(var(--accent-rgb),0.16);
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.22);
|
||||
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
|
||||
}
|
||||
.adv-dial:hover .adv-dial-icon { transform: rotate(-14deg) scale(1.06); }
|
||||
.adv-dial-title { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.adv-dial-state { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 2px; transition: color 0.2s; }
|
||||
.adv-dial-slider-wrap { grid-area: slider; display: flex; align-items: center; gap: 14px; }
|
||||
.adv-dial-end { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); white-space: nowrap; }
|
||||
.adv-dial-hint { grid-area: hint; font-size: 12px; color: rgba(255,255,255,0.45); }
|
||||
.adv-dial-label { display: flex; flex-direction: column; min-width: 142px; flex-shrink: 0; }
|
||||
.adv-dial-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
|
||||
.adv-dial-state { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 1px; transition: color 0.2s; }
|
||||
.adv-dial-end { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4); white-space: nowrap; flex-shrink: 0; }
|
||||
.adv-dial-val { min-width: 44px; text-align: right; font-size: 14px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
|
||||
/* Track styled via the pseudo-elements (the input's own background does NOT render as the track when
|
||||
appearance is none on Chromium — that was the invisible-track bug). */
|
||||
.adv-dial-slider {
|
||||
flex: 1; height: 8px; border-radius: 5px; cursor: pointer;
|
||||
-webkit-appearance: none; appearance: none; outline: none;
|
||||
flex: 1; min-width: 100px; height: 8px; cursor: pointer;
|
||||
-webkit-appearance: none; appearance: none; outline: none; background: transparent;
|
||||
}
|
||||
.adv-dial-slider::-webkit-slider-runnable-track {
|
||||
height: 8px; border-radius: 5px;
|
||||
background: linear-gradient(90deg, #1DB954 0%, var(--accent) 52%, #ff7a45 100%);
|
||||
}
|
||||
.adv-dial-slider::-moz-range-track {
|
||||
height: 8px; border-radius: 5px;
|
||||
background: linear-gradient(90deg, #1DB954 0%, var(--accent) 52%, #ff7a45 100%);
|
||||
}
|
||||
.adv-dial-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; appearance: none;
|
||||
width: 22px; height: 22px; border-radius: 50%; background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 10px rgba(0,0,0,0.45);
|
||||
width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 9px rgba(0,0,0,0.45);
|
||||
cursor: grab; transition: transform 0.15s, box-shadow 0.2s;
|
||||
}
|
||||
.adv-dial-slider::-webkit-slider-thumb:hover { transform: scale(1.16); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.32), 0 4px 14px rgba(0,0,0,0.55); }
|
||||
.adv-dial-slider::-webkit-slider-thumb:hover { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.34), 0 4px 12px rgba(0,0,0,0.55); }
|
||||
.adv-dial-slider::-webkit-slider-thumb:active { cursor: grabbing; }
|
||||
.adv-dial-slider::-moz-range-thumb {
|
||||
width: 22px; height: 22px; border-radius: 50%; border: none; background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 10px rgba(0,0,0,0.45); cursor: grab;
|
||||
width: 20px; height: 20px; border-radius: 50%; border: none; background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 9px rgba(0,0,0,0.45); cursor: grab;
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.adv-dial { grid-template-columns: 1fr; grid-template-areas: "head" "slider" "hint"; row-gap: 12px; }
|
||||
.adv-dial-head { min-width: 0; }
|
||||
.adv-dial { flex-wrap: wrap; gap: 10px 14px; }
|
||||
.adv-dial-label { min-width: 0; }
|
||||
.adv-dial-slider { flex: 1 1 100%; order: 5; }
|
||||
}
|
||||
|
||||
/* Watchlist toggle on recommended-artist .ya-cards — corner pill, appears on hover,
|
||||
|
|
|
|||
Loading…
Reference in a new issue