Public Access
fix(freelancer-directory): remove the Clear filter button; give the way back inside the empty state
The Clear button, its .dir-clear-wrap container, the .dir-clear CSS and the JS that showed, hid and wired it are gone from the filter row. The search box keeps its native type=search clear. The empty state no longer names a missing control: it now reads "Nothing matches. Widen your search, or set the filters back to All." — with that phrase an inline text action (#dirEmptyReset) that does exactly what Clear did, so the one-click way back survives where a visitor needs it.
This commit is contained in:
1 parent
80bf4bc019
commit
f3e2812694
1 file changed
+24
-34
@@ -201,8 +201,8 @@
|
|||||||
min-width: 180px;
|
min-width: 180px;
|
||||||
}
|
}
|
||||||
/* The dropdown boxes only — 30% narrower than the 180px default (0.7 x 180).
|
/* The dropdown boxes only — 30% narrower than the 180px default (0.7 x 180).
|
||||||
`> select` keeps the search box (its own 240px below) and the Clear wrapper
|
`> select` keeps the search box (its own 240px below) out of this rule,
|
||||||
out of this rule, so only the four <select> facets change width. */
|
so only the <select> facets change width. */
|
||||||
.dir-filter:has(> select) {
|
.dir-filter:has(> select) {
|
||||||
min-width: 126px;
|
min-width: 126px;
|
||||||
}
|
}
|
||||||
@@ -240,23 +240,6 @@
|
|||||||
background: var(--midnight);
|
background: var(--midnight);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.dir-clear {
|
|
||||||
font-family: Inter, sans-serif;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem 0.9rem;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
border: 1px solid var(--line-brass);
|
|
||||||
background: transparent;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.dir-clear:hover {
|
|
||||||
background: rgba(201, 162, 39, 0.14);
|
|
||||||
}
|
|
||||||
.dir-clear:focus-visible {
|
|
||||||
outline: 3px solid var(--brass-bright);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The standardised language multi-select: a closed checklist, scrollable so the
|
/* The standardised language multi-select: a closed checklist, scrollable so the
|
||||||
form stays short. The level <select> is folded in beside a language only once
|
form stays short. The level <select> is folded in beside a language only once
|
||||||
@@ -324,6 +307,22 @@
|
|||||||
max-width: 560px;
|
max-width: 560px;
|
||||||
margin: 1.5rem auto 0;
|
margin: 1.5rem auto 0;
|
||||||
}
|
}
|
||||||
|
/* The way back sits in the empty state, where a visitor actually needs it —
|
||||||
|
a text action, not a filter-row button. */
|
||||||
|
.dir-empty-reset {
|
||||||
|
font: inherit;
|
||||||
|
color: var(--brass-bright);
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 0.15em;
|
||||||
|
}
|
||||||
|
.dir-empty-reset:focus-visible {
|
||||||
|
outline: 3px solid var(--brass-bright);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
/* The grid of freelancer cards */
|
/* The grid of freelancer cards */
|
||||||
.dir-grid {
|
.dir-grid {
|
||||||
@@ -974,9 +973,6 @@
|
|||||||
<div class="dir-filter"><label for="f-languages">Language</label><select id="f-languages" data-field="languages"><option value="">All</option><option value="english">English</option><option value="german">German</option><option value="spanish">Spanish</option></select></div>
|
<div class="dir-filter"><label for="f-languages">Language</label><select id="f-languages" data-field="languages"><option value="">All</option><option value="english">English</option><option value="german">German</option><option value="spanish">Spanish</option></select></div>
|
||||||
<div class="dir-filter"><label for="f-oca">OCA member</label><select id="f-oca" data-field="oca"><option value="">All</option><option value="1">OCA member</option></select></div>
|
<div class="dir-filter"><label for="f-oca">OCA member</label><select id="f-oca" data-field="oca"><option value="">All</option><option value="1">OCA member</option></select></div>
|
||||||
<!-- FILTERS-END -->
|
<!-- FILTERS-END -->
|
||||||
<div class="dir-filter dir-clear-wrap">
|
|
||||||
<button type="button" id="dirClear" class="dir-clear" hidden>Clear</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="dir-count" id="dirCount" hidden></p>
|
<p class="dir-count" id="dirCount" hidden></p>
|
||||||
<div class="dir-grid" id="dirGrid">
|
<div class="dir-grid" id="dirGrid">
|
||||||
@@ -1022,7 +1018,7 @@
|
|||||||
</article>
|
</article>
|
||||||
<!-- DIRECTORY-LIST-END -->
|
<!-- DIRECTORY-LIST-END -->
|
||||||
</div>
|
</div>
|
||||||
<p class="dir-empty" id="dirEmpty" hidden>No freelancer matches that search and those filters. Use Clear to see everyone.</p>
|
<p class="dir-empty" id="dirEmpty" hidden>Nothing matches. Widen your search, or <button type="button" class="dir-empty-reset" id="dirEmptyReset">set the filters back to All</button>.</p>
|
||||||
|
|
||||||
<div class="dir-note" id="listing-note">
|
<div class="dir-note" id="listing-note">
|
||||||
<p>You deal with the freelancer directly. The contract for the work is between you and them, and the terms, the price and the delivery are yours to agree. We are not a party to it — we publish the listings and nothing more; the conversation is between you and the freelancer.</p>
|
<p>You deal with the freelancer directly. The contract for the work is between you and them, and the terms, the price and the delivery are yours to agree. We are not a party to it — we publish the listings and nothing more; the conversation is between you and the freelancer.</p>
|
||||||
@@ -2047,9 +2043,8 @@
|
|||||||
function liveFilters(records) {
|
function liveFilters(records) {
|
||||||
var bar = document.getElementById("dirFilters");
|
var bar = document.getElementById("dirFilters");
|
||||||
var countries = countryNames();
|
var countries = countryNames();
|
||||||
var clearWrap = bar.querySelector(".dir-clear-wrap");
|
|
||||||
Array.prototype.slice.call(bar.querySelectorAll(".dir-filter")).forEach(function (node) {
|
Array.prototype.slice.call(bar.querySelectorAll(".dir-filter")).forEach(function (node) {
|
||||||
if (!node.classList.contains("dir-search") && !node.classList.contains("dir-clear-wrap")) {
|
if (!node.classList.contains("dir-search")) {
|
||||||
bar.removeChild(node);
|
bar.removeChild(node);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -2111,8 +2106,7 @@
|
|||||||
options.forEach(function (o) { sel.appendChild(new Option(o[1], o[0])); });
|
options.forEach(function (o) { sel.appendChild(new Option(o[1], o[0])); });
|
||||||
wrap.appendChild(lbl);
|
wrap.appendChild(lbl);
|
||||||
wrap.appendChild(sel);
|
wrap.appendChild(sel);
|
||||||
if (clearWrap) bar.insertBefore(wrap, clearWrap);
|
bar.appendChild(wrap);
|
||||||
else bar.appendChild(wrap);
|
|
||||||
});
|
});
|
||||||
return active;
|
return active;
|
||||||
}
|
}
|
||||||
@@ -2149,9 +2143,9 @@
|
|||||||
bar.addEventListener("input", function (event) {
|
bar.addEventListener("input", function (event) {
|
||||||
if (event.target && event.target.hasAttribute("data-search-box")) applyFilters();
|
if (event.target && event.target.hasAttribute("data-search-box")) applyFilters();
|
||||||
});
|
});
|
||||||
var clear = document.getElementById("dirClear");
|
var emptyReset = document.getElementById("dirEmptyReset");
|
||||||
if (clear) {
|
if (emptyReset) {
|
||||||
clear.addEventListener("click", function () {
|
emptyReset.addEventListener("click", function () {
|
||||||
var box = bar.querySelector("[data-search-box]");
|
var box = bar.querySelector("[data-search-box]");
|
||||||
if (box) box.value = "";
|
if (box) box.value = "";
|
||||||
Array.prototype.forEach.call(bar.querySelectorAll("select"), function (s) { s.value = ""; });
|
Array.prototype.forEach.call(bar.querySelectorAll("select"), function (s) { s.value = ""; });
|
||||||
@@ -2166,7 +2160,6 @@
|
|||||||
var grid = document.getElementById("dirGrid");
|
var grid = document.getElementById("dirGrid");
|
||||||
var count = document.getElementById("dirCount");
|
var count = document.getElementById("dirCount");
|
||||||
var empty = document.getElementById("dirEmpty");
|
var empty = document.getElementById("dirEmpty");
|
||||||
var clear = document.getElementById("dirClear");
|
|
||||||
if (!bar || !grid) return;
|
if (!bar || !grid) return;
|
||||||
|
|
||||||
var search = bar.querySelector("[data-search-box]");
|
var search = bar.querySelector("[data-search-box]");
|
||||||
@@ -2177,9 +2170,6 @@
|
|||||||
|
|
||||||
bar.hidden = nothing;
|
bar.hidden = nothing;
|
||||||
if (count) count.hidden = nothing;
|
if (count) count.hidden = nothing;
|
||||||
if (clear) {
|
|
||||||
clear.hidden = nothing || (!query && !selects.some(function (s) { return s.value; }));
|
|
||||||
}
|
|
||||||
|
|
||||||
var shown = 0;
|
var shown = 0;
|
||||||
cards.forEach(function (card) {
|
cards.forEach(function (card) {
|
||||||
|
|||||||
Reference in new issue
Block a user