From acfd49e5bd34df21f8adc1e87da567845c4e2bf2 Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Wed, 24 Jan 2018 20:52:32 +0100
Subject: [PATCH] improves styles for budget investments advanced filters

---
 app/assets/stylesheets/admin.scss             | 29 ++++++++-
 .../_advanced_filters.html.erb                | 45 +++++++++-----
 .../admin/budget_investments/index.html.erb   | 62 +++++++++----------
 config/locales/en/admin.yml                   |  1 +
 config/locales/es/admin.yml                   |  1 +
 5 files changed, 90 insertions(+), 48 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 615e7ac43..8e43f8903 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -9,7 +9,7 @@
 // 07. Legislation
 // 08. CMS
 // 09. Map
-// 10. Budget phases
+// 10. Budgets
 //
 
 // 01. Global styles
@@ -1034,8 +1034,33 @@ table {
   height: 0;
 }
 
-// 10. Budget phases
+// 10. Budgets
 // -----------------
+
+.advanced-filters {
+  margin: $line-height 0;
+
+  @include breakpoint(medium) {
+    margin: $line-height / 2 0 0;
+  }
+}
+
+.advanced-filters-content {
+  background: $highlight;
+  clear: both;
+  padding: $line-height / 2;
+  margin: $line-height 0;
+
+  .filter {
+    display: inline-block;
+    margin: 0 $line-height / 2;
+  }
+
+  .button {
+    margin-top: $line-height / 2;
+  }
+}
+
 .budget-phase-enabled {
   font-weight: bold;
   padding-left: rem-calc(20);
diff --git a/app/views/admin/budget_investments/_advanced_filters.html.erb b/app/views/admin/budget_investments/_advanced_filters.html.erb
index e9b68efa8..7f6e7fe6a 100644
--- a/app/views/admin/budget_investments/_advanced_filters.html.erb
+++ b/app/views/admin/budget_investments/_advanced_filters.html.erb
@@ -1,27 +1,44 @@
-<div id="advanced-filters" class="callout primary">
+<%= link_to "#advanced_filters_content",
+            data: {toggle: "advanced_filters"},
+            class: "advanced-filters float-right" do %>
+  <%= t("admin.budget_investments.index.advanced_filters") %>
+<% end %>
+
+<div id="advanced_filters" class="row expanded advanced-filters-content hide" data-toggler=".hide">
   <%= form_tag(admin_budget_budget_investments_path(budget: @budget,
                                                     filter: params[:filter],
                                                     second_filter: params[:second_filter],
                                                     max_per_heading: params[:max_per_heading],
                                                     page: 1), method: :get, remote: true, enforce_utf8: false) do %>
+    <div class="small-12 medium-8 large-10 column">
+      <span class="filter">
+        <%= check_box_tag :second_filter, "feasible" %>
+        <%= t("#{i18n_namespace}.filters.feasible") %>
+      </span>
 
-    <%= check_box_tag :second_filter, "feasible" %>
-    <%= t("#{i18n_namespace}.filters.feasible") %>
+      <span class="filter">
+        <%= check_box_tag :second_filter, "selected" %>
+        <%= t("#{i18n_namespace}.filters.selected") %>
+      </span>
 
-    <%= check_box_tag :second_filter, "selected" %>
-    <%= t("#{i18n_namespace}.filters.selected") %>
+      <span class="filter">
+        <%= check_box_tag :second_filter, "undecided" %>
+        <%= t("#{i18n_namespace}.filters.undecided") %>
+      </span>
 
-    <%= check_box_tag :second_filter, "undecided" %>
-    <%= t("#{i18n_namespace}.filters.undecided") %>
+      <span class="filter">
+        <%= check_box_tag :second_filter, "unfeasible" %>
+        <%= t("#{i18n_namespace}.filters.unfeasible") %>
+      </span>
 
-    <%= check_box_tag :second_filter, "unfeasible" %>
-    <%= t("#{i18n_namespace}.filters.unfeasible") %>
-
-    <div class="large-1">
-      <%= text_field_tag :max_per_heading %>
-      <%= t("#{i18n_namespace}.filters.max_per_heading") %>
+      <span class="filter">
+        <strong><%= t("#{i18n_namespace}.filters.max_per_heading") %></strong>
+        <%= text_field_tag :max_per_heading %>
+      </span>
     </div>
 
-    <%= submit_tag t("#{i18n_namespace}.filters.button"), class: "button small float-right" %>
+    <div class="small-12 medium-4 large-2 column">
+      <%= submit_tag t("#{i18n_namespace}.filters.button"), class: "button expanded" %>
+    </div>
   <% end %>
 </div>
diff --git a/app/views/admin/budget_investments/index.html.erb b/app/views/admin/budget_investments/index.html.erb
index 6deafed19..b0eed56aa 100644
--- a/app/views/admin/budget_investments/index.html.erb
+++ b/app/views/admin/budget_investments/index.html.erb
@@ -1,40 +1,38 @@
 <h2 class="inline-block"><%= @budget.name %> - <%= t("admin.budget_investments.index.title") %></h2>
 
-<div class="row margin">
-  <%= form_tag(admin_budget_budget_investments_path(budget: @budget), method: :get, enforce_utf8: false) do %>
-    <div class="small-12 medium-3 column">
-      <%= select_tag :administrator_id,
-                     options_for_select(admin_select_options, params[:administrator_id]),
-                     { prompt: t("admin.budget_investments.index.administrator_filter_all"),
-                       label: false,
-                       class: "js-submit-on-change" } %>
-    </div>
+<%= form_tag(admin_budget_budget_investments_path(budget: @budget), method: :get, enforce_utf8: false) do %>
+  <div class="small-12 medium-3 column">
+    <%= select_tag :administrator_id,
+                   options_for_select(admin_select_options, params[:administrator_id]),
+                   { prompt: t("admin.budget_investments.index.administrator_filter_all"),
+                     label: false,
+                     class: "js-submit-on-change" } %>
+  </div>
 
-    <div class="small-12 medium-3 column">
-      <%= select_tag :valuator_id,
-                     options_for_select(valuator_select_options, params[:valuator_id]),
-                     { prompt: t("admin.budget_investments.index.valuator_filter_all"),
-                       label: false,
-                       class: "js-submit-on-change" } %>
-    </div>
+  <div class="small-12 medium-3 column">
+    <%= select_tag :valuator_id,
+                   options_for_select(valuator_select_options, params[:valuator_id]),
+                   { prompt: t("admin.budget_investments.index.valuator_filter_all"),
+                     label: false,
+                     class: "js-submit-on-change" } %>
+  </div>
 
-    <div class="small-12 medium-3 column">
-      <%= select_tag :heading_id,
-                     options_for_select(budget_heading_select_options(@budget), params[:heading_id]),
-                     { prompt: t("admin.budget_investments.index.heading_filter_all"),
-                       label: false,
-                       class: "js-submit-on-change" } %>
-    </div>
+  <div class="small-12 medium-3 column">
+    <%= select_tag :heading_id,
+                   options_for_select(budget_heading_select_options(@budget), params[:heading_id]),
+                   { prompt: t("admin.budget_investments.index.heading_filter_all"),
+                     label: false,
+                     class: "js-submit-on-change" } %>
+  </div>
 
-    <div class="small-12 medium-3 column">
-      <%= select_tag :tag_name,
-                     options_for_select(investment_tags_select_options, params[:tag_name]),
-                     { prompt: t("admin.budget_investments.index.tags_filter_all"),
-                       label: false,
-                       class: "js-submit-on-change" } %>
-    </div>
-  <% end %>
-</div>
+  <div class="small-12 medium-3 column">
+    <%= select_tag :tag_name,
+                   options_for_select(investment_tags_select_options, params[:tag_name]),
+                   { prompt: t("admin.budget_investments.index.tags_filter_all"),
+                     label: false,
+                     class: "js-submit-on-change" } %>
+  </div>
+<% end %>
 
 <%= render "advanced_filters", i18n_namespace: "admin.budget_investments.index" %>
 
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index ea30543d9..98a4b7fb6 100644
--- a/config/locales/en/admin.yml
+++ b/config/locales/en/admin.yml
@@ -137,6 +137,7 @@ en:
         administrator_filter_all: All administrators
         valuator_filter_all: All valuators
         tags_filter_all: All tags
+        advanced_filters: Advanced filters
         filters:
           all: All
           without_admin: Without assigned admin
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index 36dfb6be6..03b945d5a 100644
--- a/config/locales/es/admin.yml
+++ b/config/locales/es/admin.yml
@@ -137,6 +137,7 @@ es:
         administrator_filter_all: Todos los administradores
         valuator_filter_all: Todos los evaluadores
         tags_filter_all: Todas las etiquetas
+        advanced_filters: Filtros avanzados
         filters:
           all: Todos
           without_admin: Sin administrador