show/hide filters

This commit is contained in:
2026-01-23 02:51:44 +01:00
parent c08f39da44
commit e4e5a1c294
3 changed files with 24 additions and 39 deletions
+2 -2
View File
@@ -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),
+10 -19
View File
@@ -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>
+8 -14
View File
@@ -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 () {
const toggle = document.querySelector("[data-toggle-filters]");
const panel = document.getElementById("entries_filters");
if (!toggle || !panel) {
document.addEventListener("click", function (event) {
const toggle = event.target.closest("[data-toggle-filters]");
if (!toggle) {
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>