show/hide filters

app/views/entries/_filters.html.erb

@@ -13,7 +13,7 @@
       <% end %>
     </div>
 
-    <div class="flex flex-wrap gap-2 mt-2">
+    <div class="flex flex-wrap gap-2 mt-2 mb-2">
       <% all_language_params = base_params.except(:language, :starts_with, :page) %>
       <%= link_to "All Languages",
                   entries_path(all_language_params),
@@ -28,7 +28,7 @@
     </div>
 
     <% if @language_code.present? %>
-      <div class="flex flex-wrap gap-2 text-xs">
+      <div class="flex flex-wrap gap-2 text-xs mb-2">
         <% alphabet_params = base_params.merge(language: @language_code).except(:starts_with, :page) %>
         <%= link_to "All",
                     entries_path(alphabet_params),

app/views/entries/_results.html.erb

@@ -1,27 +1,18 @@
-<section class="bg-slate-50 border-b border-slate-200">
-  <div class="max-w-7xl mx-auto px-4 py-4">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-      <div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
-        <div class="text-xs uppercase tracking-widest text-slate-400">Fully Translated</div>
-        <div class="text-2xl font-bold text-slate-900"><%= number_with_delimiter(@complete_entries_count) %></div>
-      </div>
-      <div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
-        <div class="text-xs uppercase tracking-widest text-slate-400">Needs Review</div>
-        <div class="text-2xl font-bold text-amber-600"><%= number_with_delimiter(@needs_review_count) %></div>
-      </div>
-      <div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm">
-        <div class="text-xs uppercase tracking-widest text-slate-400">Missing Translations</div>
-        <div class="text-2xl font-bold text-red-600"><%= number_with_delimiter(@missing_entries_count) %></div>
-      </div>
-    </div>
-  </div>
-</section>
 
 <main class="flex-1 overflow-hidden">
   <div class="max-w-7xl mx-auto px-4 h-full flex flex-col py-6">
     <div class="flex items-center justify-between mb-4">
       <div>
-        <h2 class="text-lg font-bold text-slate-900">Translation Table</h2>
+        <h2 class="text-lg font-bold text-slate-900">Translation Table
+          <button type="button"
+                  class="text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700 inline-flex items-center p-1"
+                  aria-expanded="false"
+                  aria-controls="entries_filters"
+                  data-toggle-filters>
+            Show Filters
+          </button>
+        </h2>
+
       </div>
       <div class="text-xs text-slate-500"><%= @total_entries %> entries</div>
     </div>

app/views/entries/index.html.erb

@@ -46,14 +46,6 @@
           </div>
         <% end %>
 
-        <button type="button"
-                class="text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700 inline-flex items-center"
-                aria-expanded="false"
-                aria-controls="entries_filters"
-                data-toggle-filters>
-          Show Filters
-        </button>
-
         <div id="entries_filters" class="hidden">
           <%= render "entries/filters" %>
         </div>
@@ -67,17 +59,19 @@
 </div>
 
 <script>
-  (function () {
+  document.addEventListener("click", function (event) {
-    const toggle = document.querySelector("[data-toggle-filters]");
+    const toggle = event.target.closest("[data-toggle-filters]");
-    const panel = document.getElementById("entries_filters");
+    if (!toggle) {
-    if (!toggle || !panel) {
+      return;
+    }
+
+    const panel = document.getElementById("entries_filters");
+    if (!panel) {
       return;
     }
 
-    toggle.addEventListener("click", function () {
     const isHidden = panel.classList.toggle("hidden");
     toggle.setAttribute("aria-expanded", (!isHidden).toString());
     toggle.textContent = isHidden ? "Show Filters" : "Hide Filters";
   });
-  })();
 </script>