mirror of
https://github.com/narrrl/pl8list-rewind.git
synced 2026-11-13 17:17:03 +01:00
fix(ui): simplify filters and space controls
This commit is contained in:
nvrl committed
1 parent
faa2de9a42
commit
1775167515
3 files changed
+10
-29
No files matched your search
+5
-4
@@ -60,11 +60,12 @@
|
||||
<button id="account-btn" type="button" class="avatar-btn" title="account" aria-label="account" aria-controls="account"></button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="discovery-options" hidden>
|
||||
<label><span class="sr-only">chart</span><select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
|
||||
<label><span class="sr-only">period</span><select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
|
||||
<div id="discovery-controls">
|
||||
<div id="discovery-options" hidden>
|
||||
<label><span class="sr-only">chart</span><select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
|
||||
<label><span class="sr-only">period</span><select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="active-filters" hidden></button>
|
||||
|
||||
<div id="login" hidden>
|
||||
<div class="login-box">
|
||||
|
||||
@@ -792,7 +792,6 @@ $("history-clear").addEventListener("click", () => {
|
||||
const bpmMin = filtersForm.elements.namedItem("bpm_min") as HTMLInputElement;
|
||||
const bpmMax = filtersForm.elements.namedItem("bpm_max") as HTMLInputElement;
|
||||
const bpmOut = $("bpm-out");
|
||||
const activeFilters = $<HTMLButtonElement>("active-filters");
|
||||
|
||||
function matchesFilters(t: Track): boolean {
|
||||
if (filters.free === "1" && t.price !== 0) return false;
|
||||
@@ -831,9 +830,6 @@ function showFilters(): void {
|
||||
presetTempo = filters.bpm_equiv === "1";
|
||||
showBpm();
|
||||
filtersBtn.classList.toggle("active", Object.keys(filters).length > 0);
|
||||
const labels = [filters.free === "1" ? "free only" : "", filters.bpm_min || filters.bpm_max ? `${filters.bpm_min || "any"}–${filters.bpm_max || "any"} bpm${filters.bpm_equiv ? " ± half/double" : ""}` : ""].filter(Boolean);
|
||||
activeFilters.hidden = !labels.length;
|
||||
activeFilters.textContent = `${labels.join(" · ")} × clear`;
|
||||
}
|
||||
|
||||
function applyFilters(): void {
|
||||
@@ -870,7 +866,6 @@ for (const b of filtersForm.querySelectorAll<HTMLButtonElement>("[data-bpm]")) {
|
||||
});
|
||||
}
|
||||
|
||||
activeFilters.addEventListener("click", () => { filters = {}; localStorage.setItem(FILTERS_KEY, "{}"); showFilters(); refill(); });
|
||||
|
||||
function showSetting(name: string, value: string): void {
|
||||
for (const input of filtersForm.querySelectorAll<HTMLInputElement>(`input[name=${name}]`)) input.checked = input.value === value;
|
||||
|
||||
+5
-20
@@ -82,14 +82,12 @@ body.zen #bar { display: none; }
|
||||
.logo b { color: var(--accent); font-weight: 700; }
|
||||
.logo svg { width: 1.3em; height: 1.3em; color: var(--accent); flex: none; }
|
||||
.bar-end { justify-self: end; display: flex; align-items: center; gap: 0.4rem; }
|
||||
#discovery-options, #active-filters { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); }
|
||||
#discovery-controls { position: fixed; z-index: 11; top: 4.8rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 0.5rem; max-width: calc(100vw - 2rem); }
|
||||
#discovery-options { top: 4.2rem; display: flex; gap: 0.5rem; align-items: center; }
|
||||
#discovery-options label { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.75rem; }
|
||||
#discovery-options select { color: var(--fg); background: #18181b; border: 1px solid #ffffff40; border-radius: 8px; padding: 0.45rem; font: inherit; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
#active-filters { top: 7.3rem; padding: 0.35rem 0.7rem; background: #19191de8; border-radius: 8px; font-size: 0.75rem; white-space: nowrap; }
|
||||
body:has(#discovery-options[hidden]) #active-filters { top: 4.3rem; }
|
||||
body.zen :is(#discovery-options, #active-filters) { display: none; }
|
||||
body.zen #discovery-controls { display: none; }
|
||||
|
||||
/* Feed modes as segmented tabs, the middle of the bar. */
|
||||
#mode-tabs {
|
||||
@@ -1196,8 +1194,6 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
|
||||
#volume { display: none; }
|
||||
.logo-pl8 { display: none; }
|
||||
#discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 5.8rem); }
|
||||
#active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 8.5rem); }
|
||||
body:has(#discovery-options[hidden]) #active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 5.8rem); }
|
||||
#station { place-items: end stretch; padding: 0; }
|
||||
.station-box { width: 100%; border-radius: var(--radius-l) var(--radius-l) 0 0; padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
|
||||
.sheet {
|
||||
@@ -1352,29 +1348,18 @@ body.zen .content { gap: 0.3rem; }
|
||||
#discovery-options select { -webkit-appearance: none; appearance: none; min-height: 2rem; padding: 0.4rem 2rem 0.4rem 0.8rem; border: 0; border-radius: 999px; background: transparent; font-size: 0.8rem; cursor: pointer; }
|
||||
#discovery-options select:hover { background: #ffffff12; }
|
||||
#discovery-options select option { color: #fff; background: #18181b; }
|
||||
#active-filters { top: 7.8rem; }
|
||||
/* Keep chart options centered while active filters sit alongside them. */
|
||||
@media (min-width: 641px) {
|
||||
body:has(#discovery-options:not([hidden])) #active-filters {
|
||||
top: 4.8rem; left: calc(50% + 7rem); transform: none;
|
||||
max-width: calc(50vw - 8rem); min-height: 2.4rem;
|
||||
overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
#active-filters { max-width: calc(100vw - 2rem); overflow: hidden; text-overflow: ellipsis; border: 1px solid #ffffff24; border-radius: 999px; color: var(--fg); }
|
||||
#active-filters:hover { background: #303034; border-color: #ffffff50; }
|
||||
.time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem 0.5rem; }
|
||||
.time .cur { grid-column: 1; grid-row: 1; justify-self: start; }
|
||||
.time .counts { grid-column: 2; grid-row: 1; text-align: center; overflow-wrap: anywhere; }
|
||||
.time .dur { grid-column: 3; grid-row: 1; justify-self: end; }
|
||||
@media (max-width: 640px) {
|
||||
#discovery-controls { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); width: max-content; flex-wrap: wrap; }
|
||||
.bar-end { gap: 0.45rem; }
|
||||
.bar-end .icon-btn, .avatar-btn { width: 2.75rem; height: 2.75rem; }
|
||||
.art { width: min(14rem, 29dvh, 58vw); }
|
||||
.card.liquid .art { margin-bottom: 1.5rem; }
|
||||
.content { margin-top: 2.5rem; }
|
||||
#discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); gap: 0; }
|
||||
#active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 9.2rem); }
|
||||
}
|
||||
@media (max-width: 640px) and (max-height: 700px) {
|
||||
.art { width: min(9rem, 21dvh, 48vw); }
|
||||
@@ -1401,7 +1386,7 @@ button.danger:not(.link) { background: var(--danger); color: #111; }
|
||||
.content .actions {
|
||||
position: relative; inset: auto; translate: none; transform: none;
|
||||
width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
align-items: center; gap: 0.5rem; margin-top: 0.65rem; padding: 0.75rem 0 0;
|
||||
align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.75rem 0 0;
|
||||
border: none; border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
@@ -1431,7 +1416,7 @@ body.zen .content .actions { display: none; }
|
||||
@media (max-width: 640px) {
|
||||
#discovery-options select { min-height: 2.75rem; font-size: 1rem; }
|
||||
.content { margin-bottom: 4.5rem; }
|
||||
.content .actions { padding: 0.5rem 0 0; gap: 0.25rem; margin-top: 0.25rem; }
|
||||
.content .actions { padding: 0.5rem 0 0; gap: 0.25rem; margin-top: 0.8rem; }
|
||||
.content .act { gap: 0.25rem; font-size: 0.75rem; }
|
||||
#up-next { bottom: max(0.8rem, env(safe-area-inset-bottom)); }
|
||||
#toast { bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 4.6rem); }
|
||||
|
||||
Reference in new issue
Block a user