Fix advanced search layout

trln · Feb 18, 2025 · 26a4281 · 26a4281
1 parent 1b3c0c0
commit 26a4281
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 22 deletions.
diff --git a/app/assets/stylesheets/trln_argon/trln_argon_shared.scss b/app/assets/stylesheets/trln_argon/trln_argon_shared.scss
@@ -1520,6 +1520,7 @@ h2.local-filter-heading {
     width: 100px;
     display: inline-block;
     margin-right: 8px;
+    margin-left: 10px;
   }
 
   .range_limit .form-control.range_end {
@@ -1705,4 +1706,12 @@ div[aria-expanded=true] .expandable-content-controls .show-control.less {
   font-size: 1rem;
   font-style: italic;
   font-weight: normal;
-}
+}
+
+/* ================ */
+/* COLOR CONTRAST   */
+/* ================ */
+
+a.remove {
+  color: #343a40 !important; /* Ensures it takes precedence */
+}
diff --git a/app/components/trln_argon/advanced_search_form_component.html.erb b/app/components/trln_argon/advanced_search_form_component.html.erb
@@ -43,11 +43,9 @@
         <h2 class="limit-criteria-heading h3"><%= t('blacklight.advanced_search.form.limit_criteria_heading_html')%></h2>
 
         <div id="advanced_search_facets" class="limit_input row">
-          <div class="advanced-facet-limits col-md-9 offset-md-3">
-            <% search_filter_controls.each do |control| %>
-              <%= control %>
-            <% end %>
-          </div>
+          <% search_filter_controls.each do |control| %>
+            <%= control %>
+          <% end %>
         </div>
       </div>
     <% end %>

diff --git a/app/components/trln_argon/facet_field_component.html.erb b/app/components/trln_argon/facet_field_component.html.erb
@@ -0,0 +1,17 @@
+<div class="accordion-item facet-limit blacklight-<%= @facet_field.key %> <%= 'facet-limit-active' if @facet_field.active? %>">
+  <div class="accordion-header" id="<%= header_html_id %>">
+  </div>
+  <div id="<%= html_id %>" role="region" aria-labelledby="<%= header_html_id %>" class="panel-collapse facet-content collapse <%= "show" unless @facet_field.collapsed? %>">
+    <div class="accordion-body">
+      <%= body %>
+
+      <% if @facet_field.modal_path %>
+        <div class="more_facets">
+          <%= link_to t("more_#{@facet_field.key}_html", scope: 'blacklight.search.facets', default: :more_html, field_name: @facet_field.label),
+            @facet_field.modal_path,
+            data: { blacklight_modal: 'trigger', turbo: false } %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
diff --git a/app/components/trln_argon/facet_field_component.rb b/app/components/trln_argon/facet_field_component.rb
@@ -0,0 +1,4 @@
+module TrlnArgon
+  class FacetFieldComponent < Blacklight::FacetFieldComponent
+  end
+end
diff --git a/app/components/trln_argon/multi_select_facet_component.html.erb b/app/components/trln_argon/multi_select_facet_component.html.erb
@@ -1,16 +1,21 @@
-<%= render(@layout.new(facet_field: @facet_field)) do |component| %>
-    <% component.with_label do %>
-      <%= @facet_field.label %>
+<div class="row align-items-center">
+  <label class="col-12 col-md-3 col-form-label fw-bold" id="<%= @facet_field.key %>_label" for="<%= @facet_field.key %>_select">
+    <%= @facet_field.label %>
+  </label>
+  <div class="col-12 col-md-9">
+    <%= render(@layout.new(facet_field: @facet_field)) do |component| %>
+      <% component.with_body do %>
+        <div class="facet-multi-select p-2">
+          <select id="<%= @facet_field.key %>_select" aria-labelledby="<%= @facet_field.key %>_label"
+            <%= tag.attributes(select_attributes.merge(placeholder: t('blacklight_advanced_search.form.placeholder'))) %>>
+            <% presenters.each do |presenter| %>
+              <option <%= tag.attributes(option_attributes(presenter: presenter)) %>>
+                <%= "#{presenter.label} (#{number_with_delimiter(presenter.hits)})" %>
+              </option>
+            <% end %>
+          </select>
+        </div>
+      <% end %>
     <% end %>
-    <% component.with_body do %>
-      <div class="facet-multi-select p-2">
-        <select <%= tag.attributes(select_attributes.merge(placeholder: t('blacklight_advanced_search.form.placeholder'))) %>>
-          <% presenters.each do |presenter| %>
-            <option <%= tag.attributes(option_attributes(presenter: presenter)) %>>
-              <%= "#{presenter.label} (#{number_with_delimiter(presenter.hits)})" %>
-            </option>
-          <% end %>
-        </select>
-      </div>
-    <% end %>
-  <% end %>
+  </div>
+</div>
diff --git a/app/components/trln_argon/multi_select_facet_component.rb b/app/components/trln_argon/multi_select_facet_component.rb
@@ -4,7 +4,7 @@ class MultiSelectFacetComponent < Blacklight::Component
     def initialize(facet_field:, layout: nil)
       super()
       @facet_field = facet_field
-      @layout = layout == false ? FacetFieldNoLayoutComponent : Blacklight::FacetFieldComponent
+      @layout = layout == false ? FacetFieldNoLayoutComponent : TrlnArgon::FacetFieldComponent
     end
 
     # @return [Boolean] whether to render the component

diff --git a/lib/trln_argon/controller_override.rb b/lib/trln_argon/controller_override.rb
@@ -241,13 +241,15 @@ module ControllerOverride
                                label: TrlnArgon::Fields::CALL_NUMBER_FACET.label,
                                limit: 4500,
                                sort: 'alpha',
+                               collapse: false,
                                # This helper is still needed for the label in constraints
                                helper_method: :call_number_filter_display,
                                component: Blacklight::Hierarchy::FacetFieldListComponent,
                                advanced_search_component: TrlnArgon::MultiSelectFacetComponent
         config.add_facet_field TrlnArgon::Fields::LANGUAGE_FACET.to_s,
                                label: TrlnArgon::Fields::LANGUAGE_FACET.label,
                                limit: true,
+                               collapse: false,
                                advanced_search_component: TrlnArgon::MultiSelectFacetComponent
 
         # See Range Facet Configuration options:
@@ -283,6 +285,7 @@ module ControllerOverride
                                         'last_three_months' => { label: I18n.t('trln_argon.new_title_ranges.now_minus_three_months'),
                                                                  fq: "#{TrlnArgon::Fields::DATE_CATALOGED_FACET}:[NOW-3MONTH/DAY TO NOW]" } },
                                label: TrlnArgon::Fields::DATE_CATALOGED_FACET.label,
+                               collapse: false,
                                limit: true,
                                advanced_search_component: TrlnArgon::MultiSelectFacetComponent