Merge pull request #4005 from consul/off_canvas

Simplify code related to the admin menu
consuldemocracy · Sep 21, 2020 · 93cf9e2 · 93cf9e2
2 parents 20b814d + fc3a761
commit 93cf9e2
Show file tree

Hide file tree

Showing 14 changed files with 468 additions and 554 deletions.
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
@@ -291,10 +291,6 @@ $sidebar-active: #f4fcd0;
     margin-right: rem-calc(12);
   }
 
-  .side-menu-and-admin-content {
-    @include side-menu-and-content;
-  }
-
   .admin-content {
     .proposal-form {
       padding-top: 0;
@@ -652,7 +648,7 @@ code {
   border-radius: rem-calc(3);
   font-size: rem-calc(16);
   font-weight: normal;
-  margin: $line-height;
+  margin-bottom: $line-height;
   padding: $line-height / 2;
 
   strong {

diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
@@ -16,10 +16,6 @@
 // 01. Dashboard global
 // --------------------
 
-.dashboard-menu-and-content {
-  @include side-menu-and-content;
-}
-
 .proposal-title {
   display: inline-block;
 

diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -31,7 +31,6 @@
 @include foundation-responsive-embed;
 @include foundation-label;
 @include foundation-media-object;
-@include foundation-off-canvas;
 @include foundation-orbit;
 @include foundation-pagination;
 @include foundation-progress-bar;

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -436,10 +436,6 @@ a {
   display: table-cell;
 }
 
-.off-canvas-content {
-  box-shadow: none;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -449,6 +445,66 @@ a {
   margin-top: 0;
 }
 
+.menu-and-content {
+  $side-menu-min-width: 250px;
+
+  @include breakpoint(medium) {
+    display: flex;
+
+    > nav {
+      flex: 25%;
+      min-width: $side-menu-min-width;
+
+      + * {
+        flex: 75%;
+        padding: $line-height !important;
+      }
+    }
+
+    [for="show_menu"] {
+      display: none;
+    }
+  }
+
+  @include breakpoint(small only) {
+    > nav {
+      height: 100%;
+      left: -$side-menu-min-width;
+      overflow-y: auto;
+      position: fixed;
+      top: 0;
+      transition: left 0.5s ease;
+      width: $side-menu-min-width;
+      z-index: 12;
+
+      + * {
+        padding: $line-height !important;
+      }
+    }
+
+    [name="show_menu"]:checked + nav,
+    > nav:focus-within {
+      left: 0;
+
+      + * {
+        overflow-x: hidden;
+
+        [for="show_menu"]::after {
+          @include reveal-overlay;
+          content: "";
+          cursor: pointer;
+          display: block;
+          z-index: 11;
+        }
+      }
+    }
+  }
+
+  [name="show_menu"] {
+    display: none;
+  }
+}
+
 // 02. Header
 // ----------
 

diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
@@ -1,9 +1,8 @@
 // Table of Contents
 //
 // 01. Logo
-// 02. Side menu and content
-// 03. Orbit bullets
-// 04. Direct uploads
+// 02. Orbit bullets
+// 03. Direct uploads
 // ------------------
 
 // 01. Logo
@@ -22,30 +21,8 @@
   }
 }
 
-// 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
-// ----------------
+// 02. Orbit bullets
+// -----------------
 
 @mixin orbit-bullets {
   @include disable-mouse-outline;
@@ -72,7 +49,7 @@
   }
 }
 
-// 04. Direct uploads
+// 03. Direct uploads
 // ------------------
 
 @mixin direct-uploads {

diff --git a/app/helpers/admin_helper.rb b/app/helpers/admin_helper.rb
@@ -1,12 +1,4 @@
 module AdminHelper
-  def side_menu
-    if namespace == "moderation/budgets"
-      render "/moderation/menu"
-    else
-      render "/#{namespace}/menu"
-    end
-  end
-
   def namespaced_root_path
     "/#{namespace}"
   end