Fix mobile-only filter toggle specificity on desktop and add Reset Filters button
This commit is contained in:
1 parent
ff0fe0990e
commit
ffe8fab1da
3 files changed
+44
-3
No files matched your search
+39
-1
@@ -1923,9 +1923,43 @@ function bindGlobalEvents() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Global Filters
|
// Global Filters
|
||||||
|
function syncFilterControlsUI() {
|
||||||
|
const hasActiveFilter =
|
||||||
|
Boolean(state.filters.search.trim()) ||
|
||||||
|
state.filters.category !== "all" ||
|
||||||
|
state.filters.tag !== "all" ||
|
||||||
|
Boolean(state.filters.hasMockup);
|
||||||
|
document.getElementById("btn-clear-filters")?.classList.toggle("hidden", !hasActiveFilter);
|
||||||
|
const mobileBtn = document.getElementById("btn-mobile-filter-toggle");
|
||||||
|
if (mobileBtn) {
|
||||||
|
mobileBtn.textContent = hasActiveFilter ? "🔍 Filters • Active" : "🔍 Filters";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById("btn-mobile-filter-toggle")?.addEventListener("click", () => {
|
document.getElementById("btn-mobile-filter-toggle")?.addEventListener("click", () => {
|
||||||
const bar = document.getElementById("global-filter-bar");
|
const bar = document.getElementById("global-filter-bar");
|
||||||
bar?.classList.toggle("mobile-filters-open");
|
const isOpen = bar?.classList.toggle("mobile-filters-open");
|
||||||
|
document.getElementById("btn-mobile-filter-toggle")?.classList.toggle("btn-primary", Boolean(isOpen));
|
||||||
|
if (isOpen) {
|
||||||
|
document.getElementById("filter-search")?.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("btn-clear-filters")?.addEventListener("click", () => {
|
||||||
|
state.filters.search = "";
|
||||||
|
state.filters.category = "all";
|
||||||
|
state.filters.tag = "all";
|
||||||
|
state.filters.hasMockup = false;
|
||||||
|
const searchEl = document.getElementById("filter-search");
|
||||||
|
const catEl = document.getElementById("filter-category");
|
||||||
|
const tagEl = document.getElementById("filter-tag");
|
||||||
|
const mkEl = document.getElementById("filter-has-mockup");
|
||||||
|
if (searchEl) searchEl.value = "";
|
||||||
|
if (catEl) catEl.value = "all";
|
||||||
|
if (tagEl) tagEl.value = "all";
|
||||||
|
if (mkEl) mkEl.checked = false;
|
||||||
|
syncFilterControlsUI();
|
||||||
|
loadIdeas();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((tab) => {
|
document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((tab) => {
|
||||||
@@ -1940,18 +1974,22 @@ function bindGlobalEvents() {
|
|||||||
|
|
||||||
document.getElementById("filter-search")?.addEventListener("input", (e) => {
|
document.getElementById("filter-search")?.addEventListener("input", (e) => {
|
||||||
state.filters.search = e.target.value;
|
state.filters.search = e.target.value;
|
||||||
|
syncFilterControlsUI();
|
||||||
loadIdeas();
|
loadIdeas();
|
||||||
});
|
});
|
||||||
document.getElementById("filter-category")?.addEventListener("change", (e) => {
|
document.getElementById("filter-category")?.addEventListener("change", (e) => {
|
||||||
state.filters.category = e.target.value;
|
state.filters.category = e.target.value;
|
||||||
|
syncFilterControlsUI();
|
||||||
loadIdeas();
|
loadIdeas();
|
||||||
});
|
});
|
||||||
document.getElementById("filter-tag")?.addEventListener("change", (e) => {
|
document.getElementById("filter-tag")?.addEventListener("change", (e) => {
|
||||||
state.filters.tag = e.target.value;
|
state.filters.tag = e.target.value;
|
||||||
|
syncFilterControlsUI();
|
||||||
loadIdeas();
|
loadIdeas();
|
||||||
});
|
});
|
||||||
document.getElementById("filter-has-mockup")?.addEventListener("change", (e) => {
|
document.getElementById("filter-has-mockup")?.addEventListener("change", (e) => {
|
||||||
state.filters.hasMockup = e.target.checked;
|
state.filters.hasMockup = e.target.checked;
|
||||||
|
syncFilterControlsUI();
|
||||||
loadIdeas();
|
loadIdeas();
|
||||||
});
|
});
|
||||||
document.getElementById("filter-sort")?.addEventListener("change", (e) => {
|
document.getElementById("filter-sort")?.addEventListener("change", (e) => {
|
||||||
|
|||||||
@@ -141,6 +141,9 @@
|
|||||||
<option value="updated">Sort: Recently Updated</option>
|
<option value="updated">Sort: Recently Updated</option>
|
||||||
<option value="newest">Sort: Newest First</option>
|
<option value="newest">Sort: Newest First</option>
|
||||||
</select>
|
</select>
|
||||||
|
<button type="button" id="btn-clear-filters" class="btn btn-ghost btn-sm hidden" title="Clear active filters">
|
||||||
|
✕ Reset
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
+2
-2
@@ -238,7 +238,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mobile-only {
|
.mobile-only {
|
||||||
display: none;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-tabs {
|
.view-tabs {
|
||||||
@@ -1438,7 +1438,7 @@ body {
|
|||||||
========================================================= */
|
========================================================= */
|
||||||
@media (max-width: 820px) {
|
@media (max-width: 820px) {
|
||||||
.mobile-only {
|
.mobile-only {
|
||||||
display: inline-flex;
|
display: inline-flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 1. Topbar & Quick Capture on Mobile */
|
/* 1. Topbar & Quick Capture on Mobile */
|
||||||
|
|||||||
Reference in new issue
Block a user