From a4eff3aa190dc374dfcaab023a4bad1b330e5e97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 7 Jul 2021 23:08:32 +0200
Subject: [PATCH] Simplify subnavigation layout

Using `flex` instead of a fixed width for the navigation, the elements
take all the available space when the search form isn't present. That
wasn't the case before and produced a strange effect on medium-sized
screens.

This way we also align the search to the right.
---
 app/assets/stylesheets/layout.scss       | 20 +++++++++++---------
 app/views/layouts/_header.html.erb       | 19 +++++++------------
 app/views/shared/_subnavigation.html.erb |  2 +-
 spec/system/budgets/investments_spec.rb  |  2 +-
 spec/system/debates_spec.rb              |  6 +++---
 spec/system/proposals_spec.rb            |  8 ++++----
 6 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 74cbddf3c..4cdc650f5 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -692,21 +692,18 @@ body > header,
 
 .subnavigation {
   @include full-width-background;
-
-  @include breakpoint(small only) {
-    @include grid-row-nest;
-  }
+  @include grid-column-gutter;
+  display: flex;
+  flex-direction: column;
 
   @include breakpoint(medium) {
     background: $body-background;
     color: $text;
+    flex-direction: row;
     padding-bottom: 0;
-  }
 
-  .search-form-header {
-
-    @include breakpoint(small only) {
-      padding-left: rem-calc(map-get($grid-column-gutter, small) / 2);
+    > :first-child {
+      flex-grow: 1;
     }
   }
 
@@ -790,6 +787,11 @@ body > header,
   }
 }
 
+.subnavigation-with-top-links {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .top-bar-right {
 
   .is-active {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index b95335e96..1e101fa36 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -33,25 +33,20 @@
         </ul>
 
         <div class="show-for-small-only">
-          <div class="subnavigation row">
+          <div class="subnavigation subnavigation-with-top-links">
             <%= render "shared/subnavigation" %>
-            <div class="small-12 column">
-              <%= render "shared/top_links" %>
-            </div>
+            <%= render "shared/top_links" %>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div id="navigation_bar" class="subnavigation expanded">
-    <div class="row">
-      <div class="hide-for-small-only">
-        <%= render "shared/subnavigation" %>
-      </div>
-      <div class="small-12 medium-3 column">
-        <%= yield :header_addon %>
-      </div>
+  <div id="navigation_bar" class="subnavigation">
+    <div class="hide-for-small-only">
+      <%= render "shared/subnavigation" %>
     </div>
+
+    <%= yield :header_addon %>
   </div>
 </header>
diff --git a/app/views/shared/_subnavigation.html.erb b/app/views/shared/_subnavigation.html.erb
index d29d23c9c..1c81f389a 100644
--- a/app/views/shared/_subnavigation.html.erb
+++ b/app/views/shared/_subnavigation.html.erb
@@ -1,4 +1,4 @@
-<nav class="small-12 medium-9 column">
+<nav>
   <ul>
     <%= raw content_block("subnavigation_left") %>
 
diff --git a/spec/system/budgets/investments_spec.rb b/spec/system/budgets/investments_spec.rb
index ea9075c93..60b056d95 100644
--- a/spec/system/budgets/investments_spec.rb
+++ b/spec/system/budgets/investments_spec.rb
@@ -181,7 +181,7 @@ describe "Budget Investments" do
 
       visit budget_investments_path(budget, heading_id: heading.id)
 
-      within(".expanded #search_form") do
+      within "#search_form" do
         fill_in "search", with: "Schwifty"
         click_button "Search"
       end
diff --git a/spec/system/debates_spec.rb b/spec/system/debates_spec.rb
index 217af3655..15e471559 100644
--- a/spec/system/debates_spec.rb
+++ b/spec/system/debates_spec.rb
@@ -536,7 +536,7 @@ describe "Debates" do
 
         visit debates_path
 
-        within(".expanded #search_form") do
+        within "#search_form" do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -553,7 +553,7 @@ describe "Debates" do
       scenario "Maintain search criteria" do
         visit debates_path
 
-        within(".expanded #search_form") do
+        within "#search_form" do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -629,7 +629,7 @@ describe "Debates" do
       create(:debate, title: "Abcdefghi")
 
       visit debates_path
-      within(".expanded #search_form") do
+      within "#search_form" do
         fill_in "search", with: "Abcdefghi"
         click_button "Search"
       end
diff --git a/spec/system/proposals_spec.rb b/spec/system/proposals_spec.rb
index 172adfe5d..6a4c8437b 100644
--- a/spec/system/proposals_spec.rb
+++ b/spec/system/proposals_spec.rb
@@ -1119,7 +1119,7 @@ describe "Proposals" do
 
         visit proposals_path
 
-        within(".expanded #search_form") do
+        within "#search_form" do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -1139,7 +1139,7 @@ describe "Proposals" do
 
         visit proposals_path
 
-        within(".expanded #search_form") do
+        within "#search_form" do
           fill_in "search", with: proposal1.code
           click_button "Search"
         end
@@ -1155,7 +1155,7 @@ describe "Proposals" do
       scenario "Maintain search criteria" do
         visit proposals_path
 
-        within(".expanded #search_form") do
+        within "#search_form" do
           fill_in "search", with: "Schwifty"
           click_button "Search"
         end
@@ -1236,7 +1236,7 @@ describe "Proposals" do
       create(:proposal, title: "Abcdefghi")
 
       visit proposals_path
-      within(".expanded #search_form") do
+      within "#search_form" do
         fill_in "search", with: "Abcdefghi"
         click_button "Search"
       end