show/hide filters
This commit is contained in:
@@ -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),
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user