From f2e32b44b10524ebe362058795748bfc24835cf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 18 Oct 2019 20:38:32 +0200
Subject: [PATCH 1/3] Fix blank space in admin content

In some situations where JavaScript makes content disappear, the height
of the element calculated by foundation's equalizer isn't recalculated,
leaving blank space at the bottom of the page. I've seen cases where a
blank vertical space of 2000 pixels is on the page.

Using flexbox solves the problem, since CSS takes care of everything.
---
 app/assets/stylesheets/admin.scss | 26 ++++++++++++++++++++++----
 app/views/admin/_menu.html.erb    |  2 +-
 app/views/layouts/admin.html.erb  |  7 +++----
 app/views/officing/_menu.html.erb |  2 +-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 082985e0c..c7e7f1fdf 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -291,7 +291,29 @@ $sidebar-active: #f4fcd0;
     margin-right: rem-calc(12);
   }
 
+  .side-menu-and-admin-content {
+    display: flex;
+
+    @include breakpoint(small only) {
+      flex-direction: column;
+    }
+  }
+
+  .side-menu {
+    flex: 25%;
+    min-width: 250px;
+
+    > :last-child {
+      height: 100%;
+
+      .admin-sidebar {
+        height: 100%;
+      }
+    }
+  }
+
   .admin-content {
+    flex: 75%;
 
     .proposal-form {
       padding-top: 0;
@@ -431,10 +453,6 @@ code {
   background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%);
   border-right: 1px solid $border;
 
-  @include breakpoint(medium) {
-    min-height: rem-calc(1100);
-  }
-
   ul {
     list-style-type: none;
     margin-bottom: 0;
diff --git a/app/views/admin/_menu.html.erb b/app/views/admin/_menu.html.erb
index 45ad2d7d4..16e860b1f 100644
--- a/app/views/admin/_menu.html.erb
+++ b/app/views/admin/_menu.html.erb
@@ -1,4 +1,4 @@
-<div class="admin-sidebar" data-equalizer-watch>
+<div class="admin-sidebar">
   <ul id="admin_menu" data-accordion-menu data-multi-open="false">
     <% if feature?(:proposals) %>
       <li class="section-title">
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 50f74a80c..71c0125d7 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -19,9 +19,8 @@
         <div class="off-canvas-content" data-off-canvas-content>
           <%= render "layouts/admin_header" %>
 
-          <div class="no-margin-top row expanded collapse" data-equalizer>
-            <div class="small-12 medium-3 column" data-equalizer-watch>
-
+          <div class="side-menu-and-admin-content no-margin-top">
+            <div class="side-menu">
               <div class="show-for-small-only">
                 <button type="button" class="button hollow expanded" data-toggle="offCanvas"><%= t("admin.menu.admin") %></button>
               </div>
@@ -31,7 +30,7 @@
               </div>
             </div>
 
-            <div class="admin-content small-12 medium-9 column" data-equalizer-watch>
+            <div class="admin-content">
               <%= render "layouts/flash" %>
               <%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %>
               <%= yield %>
diff --git a/app/views/officing/_menu.html.erb b/app/views/officing/_menu.html.erb
index 00c9c39d2..b9733e834 100644
--- a/app/views/officing/_menu.html.erb
+++ b/app/views/officing/_menu.html.erb
@@ -1,4 +1,4 @@
-<div class="admin-sidebar" data-equalizer-watch>
+<div class="admin-sidebar">
   <ul id="officing_menu">
     <% if vote_collection_shift? %>
       <li class="<%= "js-vote-collection" %>

From 91d4624443dda4785235ab0da777f8522c54e164 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Oct 2019 19:09:38 +0200
Subject: [PATCH 2/3] Simplify admin side menu layout

We can move the button to toggle the menu to the main content, and
everything will look the same way while we'll need one div less.
---
 app/assets/stylesheets/admin.scss | 10 +---------
 app/views/layouts/admin.html.erb  | 12 +++++-------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index c7e7f1fdf..a5689d700 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -293,22 +293,14 @@ $sidebar-active: #f4fcd0;
 
   .side-menu-and-admin-content {
     display: flex;
-
-    @include breakpoint(small only) {
-      flex-direction: column;
-    }
   }
 
   .side-menu {
     flex: 25%;
     min-width: 250px;
 
-    > :last-child {
+    .admin-sidebar {
       height: 100%;
-
-      .admin-sidebar {
-        height: 100%;
-      }
     }
   }
 
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 71c0125d7..82df3db8d 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -20,17 +20,15 @@
           <%= render "layouts/admin_header" %>
 
           <div class="side-menu-and-admin-content no-margin-top">
-            <div class="side-menu">
+            <div id="side_menu" class="side-menu hide-for-small-only">
+              <%= side_menu %>
+            </div>
+
+            <div class="admin-content">
               <div class="show-for-small-only">
                 <button type="button" class="button hollow expanded" data-toggle="offCanvas"><%= t("admin.menu.admin") %></button>
               </div>
 
-              <div id="side_menu" class="hide-for-small-only">
-                <%= side_menu %>
-              </div>
-            </div>
-
-            <div class="admin-content">
               <%= render "layouts/flash" %>
               <%= render "layouts/officing_booth" if controller.class.parent == Officing && session[:booth_id].present? %>
               <%= yield %>

From 42106e6601f4690b06dd581b40c99ddbeab4e69e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Oct 2019 15:23:02 +0200
Subject: [PATCH 3/3] Fix double scroll bar in admin content

We were using `overflow: scroll` as a workaround with a problem we had
with the equalizer. But now we never need an extra vertical scroll bar,
and we only need an extra horizontal scroll bar on small screens.

Since the dashboard was using the class `admin-content` as well, we need
to apply to the dashboard the same changes we've done in the admin
section. I've extracted them into a mixin.
---
 app/assets/stylesheets/admin.scss     | 18 +---------------
 app/assets/stylesheets/dashboard.scss |  8 +++----
 app/assets/stylesheets/mixins.scss    | 31 +++++++++++++++++++++++----
 app/views/layouts/admin.html.erb      |  2 +-
 app/views/layouts/dashboard.html.erb  | 18 +++++++---------
 5 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index a5689d700..b986816e6 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -292,21 +292,10 @@ $sidebar-active: #f4fcd0;
   }
 
   .side-menu-and-admin-content {
-    display: flex;
-  }
-
-  .side-menu {
-    flex: 25%;
-    min-width: 250px;
-
-    .admin-sidebar {
-      height: 100%;
-    }
+    @include side-menu-and-content;
   }
 
   .admin-content {
-    flex: 75%;
-
     .proposal-form {
       padding-top: 0;
     }
@@ -325,11 +314,6 @@ $sidebar-active: #f4fcd0;
   display: none;
 }
 
-.admin-content {
-  overflow: scroll;
-  padding: $line-height !important;
-}
-
 @include breakpoint(medium) {
 
   tr {
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index b7f9e5e16..7de561c42 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -16,6 +16,10 @@
 // 01. Dashboard global
 // --------------------
 
+.dashboard-menu-and-content {
+  @include side-menu-and-content;
+}
+
 .proposal-title {
   display: inline-block;
 
@@ -288,10 +292,6 @@
   background: #fbfbfb;
   border-right: 1px solid $border;
 
-  @include breakpoint(medium) {
-    min-height: $line-height * 45;
-  }
-
   [class^="icon-"] {
     color: $text;
     display: inline-block;
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index e1f293c13..b5fb4b9f3 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -1,8 +1,9 @@
 // Table of Contents
 //
 // 01. Logo
-// 02. Orbit bullets
-// 03. Direct uploads
+// 02. Side menu and content
+// 03. Orbit bullets
+// 04. Direct uploads
 // ------------------
 
 // 01. Logo
@@ -21,7 +22,29 @@
   }
 }
 
-// 02. Orbit bullet
+// 02. Side menu and content
+// -------------------------
+
+@mixin side-menu-and-content {
+  display: flex;
+
+  > :first-child {
+    flex: 25%;
+    min-width: 250px;
+
+    > :first-child {
+      height: 100%;
+    }
+  }
+
+  > :last-child {
+    flex: 75%;
+    overflow-x: auto;
+    padding: $line-height !important;
+  }
+}
+
+// 03. Orbit bullet
 // ----------------
 
 @mixin orbit-bullets {
@@ -49,7 +72,7 @@
   }
 }
 
-// 03. Direct uploads
+// 04. Direct uploads
 // ------------------
 
 @mixin direct-uploads {
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 82df3db8d..e5d132669 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -20,7 +20,7 @@
           <%= render "layouts/admin_header" %>
 
           <div class="side-menu-and-admin-content no-margin-top">
-            <div id="side_menu" class="side-menu hide-for-small-only">
+            <div id="side_menu" class="hide-for-small-only">
               <%= side_menu %>
             </div>
 
diff --git a/app/views/layouts/dashboard.html.erb b/app/views/layouts/dashboard.html.erb
index 9d01ca19c..898298a50 100644
--- a/app/views/layouts/dashboard.html.erb
+++ b/app/views/layouts/dashboard.html.erb
@@ -29,7 +29,7 @@
       <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
         <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
           <div class="show-for-small-only">
-            <div class="dashboard-sidebar" data-equalizer-watch>
+            <div class="dashboard-sidebar">
               <%= render "dashboard/menu" %>
             </div>
           </div>
@@ -38,22 +38,20 @@
         <div class="off-canvas-content" data-off-canvas-content>
           <%= render "layouts/header", with_subnavigation: false %>
 
-          <div class="no-margin-top row expanded collapse" data-equalizer>
-            <div class="small-12 medium-3 column" data-equalizer-watch>
+          <div class="dashboard-menu-and-content no-margin-top">
+            <div id="side_menu" class="hide-for-small-only">
+              <div class="dashboard-sidebar">
+                <%= render "dashboard/menu" %>
+              </div>
+            </div>
 
+            <div class="admin-content">
               <div class="show-for-small-only">
                 <button type="button" class="button hollow expanded" data-toggle="offCanvas">
                   <%= t("admin.menu.admin") %>
                 </button>
               </div>
 
-              <div id="side_menu" class="hide-for-small-only">
-                <div class="dashboard-sidebar" data-equalizer-watch>
-                  <%= render "dashboard/menu" %>
-                </div>
-              </div>
-            </div>
-            <div class="admin-content small-12 medium-9 column" data-equalizer-watch>
               <%= render "layouts/flash" %>
               <%= render "layouts/dashboard/proposal_totals" %>
               <%= render "layouts/dashboard/proposal_header" %>