Merge fix/remove-clear-filter-button: clear filter button removed, empty state carries the way back

odoo-community-developers/index.html

@@ -201,8 +201,8 @@
         min-width: 180px;
       }
       /* 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) {
         min-width: 126px;
       }
@@ -240,23 +240,6 @@
         background: var(--midnight);
         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
          form stays short. The level <select> is folded in beside a language only once
@@ -324,6 +307,22 @@
         max-width: 560px;
         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 */
       .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-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 -->
-          <div class="dir-filter dir-clear-wrap">
-            <button type="button" id="dirClear" class="dir-clear" hidden>Clear</button>
-          </div>
         </div>
         <p class="dir-count" id="dirCount" hidden></p>
         <div class="dir-grid" id="dirGrid">
@@ -1022,7 +1018,7 @@
 </article>
       <!-- DIRECTORY-LIST-END -->
         </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">
           <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) {
         var bar = document.getElementById("dirFilters");
         var countries = countryNames();
-        var clearWrap = bar.querySelector(".dir-clear-wrap");
         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);
           }
         });
@@ -2111,8 +2106,7 @@
           options.forEach(function (o) { sel.appendChild(new Option(o[1], o[0])); });
           wrap.appendChild(lbl);
           wrap.appendChild(sel);
-          if (clearWrap) bar.insertBefore(wrap, clearWrap);
+          bar.appendChild(wrap);
-          else bar.appendChild(wrap);
         });
         return active;
       }
@@ -2149,9 +2143,9 @@
         bar.addEventListener("input", function (event) {
           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]");
             if (box) box.value = "";
             Array.prototype.forEach.call(bar.querySelectorAll("select"), function (s) { s.value = ""; });
@@ -2166,7 +2160,6 @@
         var grid = document.getElementById("dirGrid");
         var count = document.getElementById("dirCount");
         var empty = document.getElementById("dirEmpty");
-        var clear = document.getElementById("dirClear");
         if (!bar || !grid) return;
 
         var search = bar.querySelector("[data-search-box]");
@@ -2177,9 +2170,6 @@
 
         bar.hidden = nothing;
         if (count) count.hidden = nothing;
-        if (clear) {
-          clear.hidden = nothing || (!query && !selects.some(function (s) { return s.value; }));
-        }
 
         var shown = 0;
         cards.forEach(function (card) {