Improves styles for advanced search

This commit is contained in:
Alberto Garcia Cabeza
2016-01-18 12:13:38 +01:00
parent 8ef74f1e11
commit 4737f2be1b
5 changed files with 78 additions and 57 deletions

View File

@@ -9,11 +9,11 @@ App.AdvancedSearch =
toggle_date_options: -> toggle_date_options: ->
if $('#js-advanced-search-date-min').val() == 'custom' if $('#js-advanced-search-date-min').val() == 'custom'
$('#js-customized-date').show() $('#js-custom-date').show()
$('#js-customized-date input').prop 'disabled', false $('#js-custom-date input').prop 'disabled', false
else else
$('#js-customized-date').hide() $('#js-custom-date').hide()
$('#js-customized-date input').prop 'disabled', true $('#js-custom-date input').prop 'disabled', true
initialize: -> initialize: ->
if App.AdvancedSearch.advanced_search_terms() if App.AdvancedSearch.advanced_search_terms()

View File

@@ -230,6 +230,10 @@ a {
} }
} }
.small {
font-size: $small-font-size;
}
// 02. Header // 02. Header
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -1033,6 +1037,34 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
} }
} }
.advanced-search {
float: left;
margin: $line-height 0;
@media (min-width: $small-breakpoint) {
float: right;
margin-bottom: 0;
margin-top: rem-calc(28);
position: absolute;
right: 15px;
z-index: 2;
}
}
.advanced-search-form {
select {
height: $line-height*2;
}
@media (max-width: $medium-breakpoint) {
.column {
padding: 0;
}
}
}
// 10. Officials levels // 10. Officials levels
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -

View File

@@ -29,10 +29,7 @@
<%= render "featured_debates_static" %> <%= render "featured_debates_static" %>
<% end %> <% end %>
<div class="small-12 medium-12 advanced-search row"> <%= render "shared/advanced_search", search_path: debates_path(page: 1) %>
<%= render "shared/advanced_search",
search_path: debates_path(page: 1) %>
</div>
<%= render 'shared/order_links', i18n_namespace: "debates.index" %> <%= render 'shared/order_links', i18n_namespace: "debates.index" %>

View File

@@ -38,12 +38,9 @@
</div> </div>
<% end %> <% end %>
<%= render 'shared/order_links', i18n_namespace: "proposals.index" %> <%= render "shared/advanced_search", search_path: proposals_path(page: 1)%>
<div class="small-12 medium-12 advanced-search row"> <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>
<%= render "shared/advanced_search",
search_path: proposals_path(page: 1)%>
</div>
<div class="show-for-small-only"> <div class="show-for-small-only">
<%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %> <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>

View File

@@ -1,52 +1,47 @@
<div class="small-12 medium-12 columns"> <%= link_to t("shared.advanced_search.title"), "#", id: 'js-advanced-search-title', class: "advanced-search small" %>
<%= link_to t("shared.advanced_search.title"), "#", id: 'js-advanced-search-title' %>
</div>
<%= form_tag search_path, method: :get do %> <div class="advanced-search-form margin-top clear">
<div id='js-advanced-search' <%= form_tag search_path, method: :get do %>
data-advanced-search-terms=<%= @advanced_search_terms.present? %> <div id='js-advanced-search' data-advanced-search-terms=<%= @advanced_search_terms.present? %> style="display: none">
style="display: none">
<div class="small-12 medium-12 advanced-search columns"> <div class="small-12">
<h5 class='search-option inline-block'><%= t("shared.advanced_search.general") %></h5> <label><%= t("shared.advanced_search.general") %></label>
<%= text_field_tag "search", params[:search], <%= text_field_tag "search", params[:search],
placeholder: t("shared.advanced_search.general_placeholder") %> placeholder: t("shared.advanced_search.general_placeholder") %>
</div> </div>
<div class="small-12 medium-6 advanced-search columns"> <div class="small-12 large-3 left">
<h5 class='search-option'><%= t("shared.advanced_search.author_type") %></h5> <label><%= 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 advanced-search columns"> <div class="small-12 large-9 column">
<h5 class='search-option'><%= t("shared.advanced_search.date") %></h5> <div class="small-12 large-4 left">
<%= select_tag('advanced_search[date_min]', date_range_options, <label><%= t("shared.advanced_search.date") %></label>
include_blank: t("shared.advanced_search.date_range_blank"), <%= select_tag('advanced_search[date_min]', date_range_options,
id: 'js-advanced-search-date-min') %> include_blank: t("shared.advanced_search.date_range_blank"),
id: 'js-advanced-search-date-min') %>
<div id='js-customized-date' class='inline-block' style="display: none">
&nbsp;&nbsp;
<%= t("shared.advanced_search.from") %>:
<div class='inline-block'>
<%= date_field 'advanced_search', 'date_min', max: Date.today,
value: params[:advanced_search].try(:[], :date_min) %>
</div> </div>
&nbsp;&nbsp;
<%= t("shared.advanced_search.to") %>: <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
<div class='inline-block'> <div class='small-12 large-6 column'>
<%= date_field 'advanced_search', 'date_max', max: Date.today, <label><%= t("shared.advanced_search.from") %></label>
value: params[:advanced_search].try(:[], :date_max) %> <%= date_field 'advanced_search', 'date_min', max: Date.today,
value: params[:advanced_search].try(:[], :date_min) %>
</div>
<div class='small-12 large-6 column'>
<label><%= t("shared.advanced_search.to") %></label>
<%= date_field 'advanced_search', 'date_max', max: Date.today,
value: params[:advanced_search].try(:[], :date_max) %>
</div>
</div> </div>
</div> </div>
<div class="small-12 medium-3">
<%= submit_tag t("shared.advanced_search.search"), class: 'button radius expand' %>
</div>
</div> </div>
<% end %>
<div class="small-6 medium-3 offset advanced-search columns"> </div>
<%= submit_tag t("shared.advanced_search.search"), class: 'button postfix' %>
</div>
</div>
<% end %>
<hr>