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 {
@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 {
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 %>
<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">
<%= t("shared.advanced_search.general") %>
</label>
@@ -14,43 +14,41 @@
placeholder: t("shared.advanced_search.general_placeholder") %>
</div>
<div class="small-12 large-3 column">
<div class="filter">
<label for="advanced_search_official_level"><%= t("shared.advanced_search.author_type") %></label>
<%= select_tag("advanced_search[official_level]", official_level_search_options,
include_blank: t("shared.advanced_search.author_type_blank")) %>
</div>
<div class="small-12 large-9">
<div class="small-12 large-4 column">
<div class="date-filters">
<div class="filter">
<label for="js-advanced-search-date-min"><%= t("shared.advanced_search.date") %></label>
<%= select_tag("advanced_search[date_min]", date_range_options,
include_blank: t("shared.advanced_search.date_range_blank"),
id: "js-advanced-search-date-min") %>
</div>
<div id="js-custom-date" class="small-12 large-8 column" style="display: none">
<div class="row">
<div class="small-12 large-6 column">
<label for="advanced_search_date_min">
<%= t("shared.advanced_search.from") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_min]",
advanced_search[:date_min],
class: "js-calendar" %>
</div>
<div class="small-12 large-6 column">
<label for="advanced_search_date_max">
<%= t("shared.advanced_search.to") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_max]",
advanced_search[:date_max],
class: "js-calendar" %>
</div>
<div id="js-custom-date" class="custom-date-filters" style="display: none">
<div class="filter">
<label for="advanced_search_date_min">
<%= t("shared.advanced_search.from") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_min]",
advanced_search[:date_min],
class: "js-calendar" %>
</div>
<div class="filter">
<label for="advanced_search_date_max">
<%= t("shared.advanced_search.to") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_max]",
advanced_search[:date_max],
class: "js-calendar" %>
</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" %>
</div>