From f3e2812694423fe27905bec8feab406776a86be6 Mon Sep 17 00:00:00 2001
From: webmaster <oliver@odoo4projects.com>
Date: Tue, 3 Nov 2026 14:37:05 +0000
Subject: [PATCH] fix(freelancer-directory): remove the Clear filter button;
 give the way back inside the empty state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 odoo-community-developers/index.html | 58 ++++++++++++----------------
 1 file changed, 24 insertions(+), 34 deletions(-)

diff --git a/odoo-community-developers/index.html b/odoo-community-developers/index.html
index b8f2dcf..5c2eac1 100644
--- a/odoo-community-developers/index.html
+++ b/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
-         out of this rule, so only the four <select> facets change width. */
+         `> select` keeps the search box (its own 240px below) out of this rule,
+         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);
-          else bar.appendChild(wrap);
+          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");
-        if (clear) {
-          clear.addEventListener("click", function () {
+        var emptyReset = document.getElementById("dirEmptyReset");
+        if (emptyReset) {
+          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) {