Skip to content

Commit

Permalink
Arrange HTML so that the search bar is part of the main element
Browse files Browse the repository at this point in the history 
Fixes #3252
  • Loading branch information
@jcoyne
jcoyne committed Oct 24, 2024
1 parent 2f9ce11 commit 56112ad
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 58 deletions.
1 change: 0 additions & 1 deletion app/components/blacklight/header_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
<%= top_bar %>
<%= search_bar %>
5 changes: 0 additions & 5 deletions app/components/blacklight/header_component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ class HeaderComponent < Blacklight::Component
component.new(blacklight_config: blacklight_config)
}

renders_one :search_bar, lambda { |component: Blacklight::SearchNavbarComponent|
component.new(blacklight_config: blacklight_config)
}

def initialize(blacklight_config:)
@blacklight_config = blacklight_config
end
Expand All @@ -20,7 +16,6 @@ def initialize(blacklight_config:)
# so that we don't have to do c.with_top_bar() in the call.
def before_render
set_slot(:top_bar, nil) unless top_bar
set_slot(:search_bar, nil) unless search_bar
end
end
end
14 changes: 6 additions & 8 deletions app/components/blacklight/search/sidebar_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<search>
<% facet_group_names.each do |groupname| %>
<% fields = facet_fields_in_group(groupname) %>
<%= render group_component_class.new(id: groupname, fields: fields, response: response) do |component| %>
<% component.with_body do %>
<%= render Blacklight::FacetComponent.with_collection(fields, response: response) %>
<% end %>
<% facet_group_names.each do |groupname| %>
<% fields = facet_fields_in_group(groupname) %>
<%= render group_component_class.new(id: groupname, fields: fields, response: response) do |component| %>
<% component.with_body do %>
<%= render Blacklight::FacetComponent.with_collection(fields, response: response) %>
<% end %>
<% end %>
</search>
<% end %>
70 changes: 34 additions & 36 deletions app/components/blacklight/search_bar_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,39 @@
<search>
<%= form_with url: @url, local: true, method: @method, class: @classes.join(' '), scope: @prefix, role: 'search', **@form_options do |f| %>
<%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
<%= form_with url: @url, local: true, method: @method, class: @classes.join(' '), scope: @prefix, **@form_options do |f| %>
<%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
<% if search_fields.length > 1 %>
<%= f.label :search_field, scoped_t('search_field.label'), class: 'visually-hidden' %>
<% end %>
<% before_input_groups.each do |input_group| %>
<%= input_group %>
<% end %>
<div class="input-group">
<%= prepend %>

<% if search_fields.length > 1 %>
<%= f.label :search_field, scoped_t('search_field.label'), class: 'visually-hidden' %>
<% end %>
<% before_input_groups.each do |input_group| %>
<%= input_group %>
<%= f.select(:search_field,
options_for_select(search_fields, h(@search_field)),
{},
title: scoped_t('search_field.title'),
class: "custom-select form-select search-field") %>
<% elsif search_fields.length == 1 %>
<%= f.hidden_field :search_field, value: search_fields.first.last %>
<% end %>
<div class="input-group">
<%= prepend %>

<% if search_fields.length > 1 %>
<%= f.select(:search_field,
options_for_select(search_fields, h(@search_field)),
{},
title: scoped_t('search_field.title'),
class: "custom-select form-select search-field") %>
<% elsif search_fields.length == 1 %>
<%= f.hidden_field :search_field, value: search_fields.first.last %>
<% end %>

<%= f.label @query_param, scoped_t('search.label'), class: 'visually-hidden' %>
<% if autocomplete_path.present? %>
<auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper form-control">
<%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' } %>
<ul id="autocomplete-popup" class="dropdown-menu" role="listbox" aria-label="<%= scoped_t('search.label') %>" hidden></ul>
</auto-complete>
<% else %>
<%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label') } %>
<% end %>
<%= f.label @query_param, scoped_t('search.label'), class: 'visually-hidden' %>
<% if autocomplete_path.present? %>
<auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper form-control">
<%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' } %>
<ul id="autocomplete-popup" class="dropdown-menu" role="listbox" aria-label="<%= scoped_t('search.label') %>" hidden></ul>
</auto-complete>
<% else %>
<%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control rounded-#{search_fields.length > 1 ? '0' : 'left'}", autofocus: @autofocus, aria: { label: scoped_t('search.label') } %>
<% end %>

<%= append %>
<%= search_button || render(Blacklight::SearchButtonComponent.new(id: "#{@prefix}search", text: scoped_t('submit'))) %>
</div>
<% end %>
<%= append %>
<%= search_button || render(Blacklight::SearchButtonComponent.new(id: "#{@prefix}search", text: scoped_t('submit'))) %>
</div>
<% end %>

<% if advanced_search_enabled? %>
<%= link_to t('blacklight.advanced_search.more_options'), @advanced_search_url, class: 'advanced_search btn btn-secondary'%>
<% end %>
</search>
<% if advanced_search_enabled? %>
<%= link_to t('blacklight.advanced_search.more_options'), @advanced_search_url, class: 'advanced_search btn btn-secondary'%>
<% end %>
4 changes: 2 additions & 2 deletions app/components/blacklight/search_context/server_applied_params_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="appliedParams" class="clearfix constraints-container mb-2">
<section id="appliedParams" class="clearfix constraints-container mb-2">
<%= render 'start_over' %>
<%= link_back_to_catalog class: 'btn btn-outline-secondary' %>
</div>
</section>
31 changes: 25 additions & 6 deletions app/views/layouts/blacklight/base.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,33 @@

<%= render partial: 'shared/header_navbar' %>

<main id="main-container" class="<%= container_classes %>" role="main" aria-label="<%= t('blacklight.main.aria.main_container') %>">
<%= content_for(:container_header) %>
<main id="main-container" role="main" aria-label="<%= t('blacklight.main.aria.main_container') %>">
<% if controller.is_a?(Blacklight::Catalog) && controller_name != 'bookmarks' && controller.action_name == "index" %>
<search>
<%= render Blacklight::SearchNavbarComponent.new(blacklight_config: blacklight_config) %>
<div class="<%= container_classes %>">
<%= content_for(:container_header) %>

<%= render partial: 'shared/flash_msg', layout: 'shared/flash_messages' %>
<%= render partial: 'shared/flash_msg', layout: 'shared/flash_messages' %>

<div class="row">
<%= content_for?(:content) ? yield(:content) : yield %>
</div>
<div class="row">
<%= content_for?(:content) ? yield(:content) : yield %>
</div>
</div>
</search>
<% else %>
<search>
<%= render Blacklight::SearchNavbarComponent.new(blacklight_config: blacklight_config) %>
</search>
<%# content on this page is not related to search %>
<div class="<%= container_classes %>">
<%= render partial: 'shared/flash_msg', layout: 'shared/flash_messages' %>

<div class="row">
<%= content_for?(:content) ? yield(:content) : yield %>
</div>
</div>
<% end %>
</main>

<%= render partial: 'shared/footer' %>
Expand Down

0 comments on commit 56112ad

Please sign in to comment.