consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify advanced search layout width rules

Browse Source 
This way, adding a new element is going to be easier.
This commit is contained in:
Javi Martín
2020-12-28 15:59:52 +01:00
parent a750c48c99
commit 0595f91222
2 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/stylesheets/advanced_search.scss
View File

@@ -14,11 +14,37 @@
.advanced-search-form { .advanced-search-form {
@include breakpoint(large) {
.filter {
@include grid-column;
width: 25%;
}
.date-filters {
float: left;
width: 50%;
.filter {
width: 50%;
}
.custom-date-filters {
clear: both;
}
}
.submit {
width: 25%;
}
}
.general-search,
.filter,
.submit {
@include grid-column-gutter;
}
select { select {
height: $line-height * 2; height: $line-height * 2;
} }
.column.end.clear {
clear: both;
}
} }

44
app/components/shared/advanced_search_component.html.erb
View File

@@ -6,7 +6,7 @@
<%= form_tag request.path, id: "advanced_search_form", method: :get do %> <%= form_tag request.path, id: "advanced_search_form", method: :get do %>
<div id="js-advanced-search" data-advanced-search-terms="<%= advanced_search.present? %>" style="display: none"> <div id="js-advanced-search" data-advanced-search-terms="<%= advanced_search.present? %>" style="display: none">
<div class="small-12 column"> <div class="general-search">
<label for="search"> <label for="search">
<%= t("shared.advanced_search.general") %> <%= t("shared.advanced_search.general") %>
</label> </label>
@@ -14,43 +14,41 @@
placeholder: t("shared.advanced_search.general_placeholder") %> placeholder: t("shared.advanced_search.general_placeholder") %>
</div> </div>
<div class="small-12 large-3 column"> <div class="filter">
<label for="advanced_search_official_level"><%= t("shared.advanced_search.author_type") %></label> <label for="advanced_search_official_level"><%= t("shared.advanced_search.author_type") %></label>
<%= select_tag("advanced_search[official_level]", official_level_search_options, <%= select_tag("advanced_search[official_level]", official_level_search_options,
include_blank: t("shared.advanced_search.author_type_blank")) %> include_blank: t("shared.advanced_search.author_type_blank")) %>
</div> </div>
<div class="small-12 large-9"> <div class="date-filters">
<div class="small-12 large-4 column"> <div class="filter">
<label for="js-advanced-search-date-min"><%= t("shared.advanced_search.date") %></label> <label for="js-advanced-search-date-min"><%= t("shared.advanced_search.date") %></label>
<%= select_tag("advanced_search[date_min]", date_range_options, <%= select_tag("advanced_search[date_min]", date_range_options,
include_blank: t("shared.advanced_search.date_range_blank"), include_blank: t("shared.advanced_search.date_range_blank"),
id: "js-advanced-search-date-min") %> id: "js-advanced-search-date-min") %>
</div> </div>
<div id="js-custom-date" class="small-12 large-8 column" style="display: none"> <div id="js-custom-date" class="custom-date-filters" style="display: none">
<div class="row"> <div class="filter">
<div class="small-12 large-6 column"> <label for="advanced_search_date_min">
<label for="advanced_search_date_min"> <%= t("shared.advanced_search.from") %> (<%= t("shared.advanced_search.date_placeholder") %>)
<%= t("shared.advanced_search.from") %> (<%= t("shared.advanced_search.date_placeholder") %>) </label>
</label> <%= text_field_tag "advanced_search[date_min]",
<%= text_field_tag "advanced_search[date_min]", advanced_search[:date_min],
advanced_search[:date_min], class: "js-calendar" %>
class: "js-calendar" %> </div>
</div> <div class="filter">
<div class="small-12 large-6 column"> <label for="advanced_search_date_max">
<label for="advanced_search_date_max"> <%= t("shared.advanced_search.to") %> (<%= t("shared.advanced_search.date_placeholder") %>)
<%= t("shared.advanced_search.to") %> (<%= t("shared.advanced_search.date_placeholder") %>) </label>
</label> <%= text_field_tag "advanced_search[date_max]",
<%= text_field_tag "advanced_search[date_max]", advanced_search[:date_max],
advanced_search[:date_max], class: "js-calendar" %>
class: "js-calendar" %>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="small-12 medium-3 column end clear"> <div class="submit">
<%= submit_tag t("shared.advanced_search.search"), class: "button expanded" %> <%= submit_tag t("shared.advanced_search.search"), class: "button expanded" %>
</div> </div>