From 4737f2be1b292318430716d67fca751626a0b06e Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Mon, 18 Jan 2016 12:13:38 +0100
Subject: [PATCH] Improves styles for advanced search

---
 .../javascripts/advanced_search.js.coffee     |  8 +-
 app/assets/stylesheets/layout.scss            | 32 +++++++
 app/views/debates/index.html.erb              |  5 +-
 app/views/proposals/index.html.erb            |  7 +-
 app/views/shared/_advanced_search.html.erb    | 83 +++++++++----------
 5 files changed, 78 insertions(+), 57 deletions(-)

diff --git a/app/assets/javascripts/advanced_search.js.coffee b/app/assets/javascripts/advanced_search.js.coffee
index 5bd7467c3..8bff7f996 100644
--- a/app/assets/javascripts/advanced_search.js.coffee
+++ b/app/assets/javascripts/advanced_search.js.coffee
@@ -9,11 +9,11 @@ App.AdvancedSearch =
 
   toggle_date_options: ->
     if $('#js-advanced-search-date-min').val() == 'custom'
-      $('#js-customized-date').show()
-      $('#js-customized-date input').prop 'disabled', false
+      $('#js-custom-date').show()
+      $('#js-custom-date input').prop 'disabled', false
     else
-      $('#js-customized-date').hide()
-      $('#js-customized-date input').prop 'disabled', true
+      $('#js-custom-date').hide()
+      $('#js-custom-date input').prop 'disabled', true
 
   initialize: ->
     if App.AdvancedSearch.advanced_search_terms()
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d7cf4d4d1..b76e4052a 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -230,6 +230,10 @@ a {
   }
 }
 
+.small {
+  font-size: $small-font-size;
+}
+
 // 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
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
diff --git a/app/views/debates/index.html.erb b/app/views/debates/index.html.erb
index 231b06b7b..1c3aba998 100644
--- a/app/views/debates/index.html.erb
+++ b/app/views/debates/index.html.erb
@@ -29,10 +29,7 @@
         <%= render "featured_debates_static" %>
       <% end %>
 
-      <div class="small-12 medium-12 advanced-search row">
-        <%= render "shared/advanced_search",
-                   search_path: debates_path(page: 1) %>
-      </div>
+      <%= render "shared/advanced_search", search_path: debates_path(page: 1) %>
 
       <%= render 'shared/order_links', i18n_namespace: "debates.index" %>
 
diff --git a/app/views/proposals/index.html.erb b/app/views/proposals/index.html.erb
index eb9c31884..4acda4655 100644
--- a/app/views/proposals/index.html.erb
+++ b/app/views/proposals/index.html.erb
@@ -38,12 +38,9 @@
         </div>
       <% 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/advanced_search",
-                   search_path: proposals_path(page: 1)%>
-      </div>
+      <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>
 
       <div class="show-for-small-only">
         <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb
index df811144b..abeddd3da 100644
--- a/app/views/shared/_advanced_search.html.erb
+++ b/app/views/shared/_advanced_search.html.erb
@@ -1,52 +1,47 @@
-<div class="small-12 medium-12 columns">
-  <%= link_to t("shared.advanced_search.title"), "#", id: 'js-advanced-search-title' %>
-</div>
+<%= link_to t("shared.advanced_search.title"), "#", id: 'js-advanced-search-title', class: "advanced-search small" %>
 
-<%= form_tag search_path, method: :get do %>
-  <div id='js-advanced-search'
-      data-advanced-search-terms=<%= @advanced_search_terms.present? %>
-      style="display: none">
+<div class="advanced-search-form margin-top clear">
+  <%= form_tag search_path, method: :get do %>
+    <div id='js-advanced-search' data-advanced-search-terms=<%= @advanced_search_terms.present? %> style="display: none">
 
-    <div class="small-12 medium-12 advanced-search columns">
-      <h5 class='search-option inline-block'><%= t("shared.advanced_search.general") %></h5>
-      <%= text_field_tag "search", params[:search],
-                         placeholder: t("shared.advanced_search.general_placeholder") %>
-    </div>
+      <div class="small-12">
+        <label><%= t("shared.advanced_search.general") %></label>
+        <%= text_field_tag "search", params[:search],
+                           placeholder: t("shared.advanced_search.general_placeholder") %>
+      </div>
 
-    <div class="small-12 medium-6 advanced-search columns">
-      <h5 class='search-option'><%= t("shared.advanced_search.author_type") %></h5>
-      <%= 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-3 left">
+        <label><%= 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 advanced-search columns">
-      <h5 class='search-option'><%= t("shared.advanced_search.date") %></h5>
-      <%= 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 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 class="small-12 large-9 column">
+        <div class="small-12 large-4 left">
+          <label><%= 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>
-        &nbsp;&nbsp;
-        <%= t("shared.advanced_search.to") %>:
-        <div class='inline-block'>
-          <%= date_field 'advanced_search', 'date_max', max: Date.today,
-                         value: params[:advanced_search].try(:[], :date_max) %>
+
+        <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
+          <div class='small-12 large-6 column'>
+            <label><%= t("shared.advanced_search.from") %></label>
+            <%= 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 class="small-12 medium-3">
+        <%= submit_tag t("shared.advanced_search.search"), class: 'button radius expand' %>
+      </div>
+
     </div>
-
-    <div class="small-6 medium-3 offset advanced-search columns">
-      <%= submit_tag t("shared.advanced_search.search"), class: 'button postfix' %>
-    </div>
-
-  </div>
-
-<% end %>
-
-<hr>
\ No newline at end of file
+  <% end %>
+</div>
\ No newline at end of file