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] 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" %>