diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index b72f91cfd..a5236e378 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -19,6 +19,14 @@ } } + .filters__list { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: var(--inline-space-half); + justify-content: center; + } + .filter { &[aria-selected] { display: flex; @@ -133,12 +141,19 @@ } .quick-filter { + position: relative; + &:has([aria-checked="true"]):not(.quick-filter--with-default) { .input--select { --input-background: var(--color-selected); } } + /* Hide a quick filter if there's nothing in it to filter by */ + &:not(:has(.popup__item)) { + display: none !important; + } + @media (max-width: 80ch) { display: none; } diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb index e17e0847d..560856a66 100644 --- a/app/views/filters/_settings.html.erb +++ b/app/views/filters/_settings.html.erb @@ -18,7 +18,7 @@ <%= yield form if block_given? %> -
+
<%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %> <%= yield form if block_given? %> <% end %> diff --git a/app/views/filters/settings/_tags.html.erb b/app/views/filters/settings/_tags.html.erb index 9ce332673..6d355327f 100644 --- a/app/views/filters/settings/_tags.html.erb +++ b/app/views/filters/settings/_tags.html.erb @@ -1,39 +1,38 @@ <% filter = user_filtering.filter %> -<%= tag.div class: "quick-filter position-relative", +<%= tag.div class: "quick-filter", data: { controller: "dialog multi-selection-combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_tags?, multi_selection_combobox_no_selection_label_value: "Tagged…" } do %> - + - + - <%= filter_dialog "Tagged…" do %> - Tagged… + <%= filter_dialog "Tagged…" do %> + Tagged… - <% if user_filtering.tags.many? %> - <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, - type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> - <% end %> - - + <% if user_filtering.tags.many? %> + <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, + type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <% end %> + + + <% end %> <% end %>