Skip to content

Arrange HTML so that the search bar is part of the main element #3398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Arrange HTML so that the search bar is part of the main element #3398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/components/blacklight/header_component.html.erb
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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