From 0595f91222f1c4d2bb389802675c9c45da60d46c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 28 Dec 2020 15:59:52 +0100
Subject: [PATCH] Simplify advanced search layout width rules

This way, adding a new element is going to be easier.
---
 app/assets/stylesheets/advanced_search.scss   | 34 ++++++++++++--
 .../shared/advanced_search_component.html.erb | 44 +++++++++----------
 2 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/advanced_search.scss b/app/assets/stylesheets/advanced_search.scss
index 5e144e755..4ea3a5fd1 100644
--- a/app/assets/stylesheets/advanced_search.scss
+++ b/app/assets/stylesheets/advanced_search.scss
@@ -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;
-  }
 }
diff --git a/app/components/shared/advanced_search_component.html.erb b/app/components/shared/advanced_search_component.html.erb
index 0daf76477..a0f5006d8 100644
--- a/app/components/shared/advanced_search_component.html.erb
+++ b/app/components/shared/advanced_search_component.html.erb
@@ -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>