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