Soverein/sanasto-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hide/show filters

Browse Source
This commit is contained in:
Runar Ingebrigtsen
2026-01-23 02:09:30 +01:00
parent f2bf9220f9
commit c08f39da44
2 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/entries/_filters.html.erb
+2 -2
View File
@@ -1,5 +1,5 @@
<div class="flex flex-wrap gap-2">
<% base_params = { q: @query.presence, category: @category.presence, language: @language_code.presence, starts_with: @starts_with.presence }.compact %>
<% base_params = { q: @query, category: @category.presence, language: @language_code.presence, starts_with: @starts_with.presence }.compact %>
<% all_category_params = base_params.except(:category) %>
<%= link_to "All",
entries_path(all_category_params),
@@ -13,7 +13,7 @@
<% end %>
</div>
<div class="flex flex-wrap gap-2">
<div class="flex flex-wrap gap-2 mt-2">
<% all_language_params = base_params.except(:language, :starts_with, :page) %>
<%= link_to "All Languages",
entries_path(all_language_params),
app/views/entries/index.html.erb
+33 -9
View File
@@ -29,24 +29,32 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<% if @query.present? %>
<div class="absolute inset-y-0 right-0 pr-4 flex items-center">
<%= link_to "×",
entries_path(category: @category.presence, language: @language_code.presence, starts_with: @starts_with.presence),
class: "text-slate-400 hover:text-slate-600 text-2xl leading-none",
aria: { label: "Clear search" },
data: { turbo_stream: true } %>
<button type="button"
class="text-slate-400 hover:text-slate-600 text-2xl leading-none <%= @query.present? ? "" : "hidden" %>"
data-clear-search
aria-label="Clear search"
onclick="const input=this.closest('form').querySelector('input[name=q]'); if(input){input.value='';} this.closest('form').requestSubmit();">
×
</button>
</div>
<% end %>
<%= form.text_field :q,
value: @query,
placeholder: "Search words, phrases, or biblical terms...",
class: "block w-full pl-11 pr-10 mt-2 mb-2 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition",
oninput: "this.form.requestSubmit()" %>
oninput: "const clearBtn=this.form.querySelector('[data-clear-search]'); if(clearBtn){clearBtn.classList.toggle('hidden', this.value.length===0);} this.form.requestSubmit();" %>
</div>
<% end %>
<div id="entries_filters">
<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>
</div>
@@ -57,3 +65,19 @@
</div>
</div>
</div>
<script>
(function () {
const toggle = document.querySelector("[data-toggle-filters]");
const panel = document.getElementById("entries_filters");
if (!toggle || !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>