Fix for sidebar

dpgmediamagazines · Jul 10, 2017 · 57e0b21 · 57e0b21
1 parent 2aa30f2
commit 57e0b21
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 56 deletions.
diff --git a/arctic/static/arctic/src/assets/scss/partials/_offcanvas.scss b/arctic/static/arctic/src/assets/scss/partials/_offcanvas.scss
@@ -3,7 +3,7 @@
  * --------------------------------------------------
  */
 
-$sidebar-width: 15em;
+$sidebar-width: 200px;
 
 
 @each $bp in map-keys($grid-breakpoints) {
@@ -18,66 +18,30 @@ $sidebar-width: 15em;
     }
   }
 }
+.row-offcanvas {
+    &.active {
+        #sidebar {
+            transform:translateX($sidebar-width);
+        }
 
-
-@include media-breakpoint-down(sm) {
-  .row-offcanvas {
-    position: relative;
-    -webkit-transition: all .25s ease-out;
-         -o-transition: all .25s ease-out;
-            transition: all .25s ease-out;
-  }
-
-  .row-offcanvas-right {
-    right: 0;
-  }
-
-  .row-offcanvas-left {
-    left: 0;
-  }
-
-  .row-offcanvas-right
-  .sidebar-offcanvas {
-    right: -100%; /* 12 columns */
-  }
-
-  .row-offcanvas-right.active
-  .sidebar-offcanvas {
-    right: -$sidebar-width; /* 6 columns */
-  }
-
-  .row-offcanvas-left
-  .sidebar-offcanvas {
-    left: -100%; /* 12 columns */
-  }
-
-  .row-offcanvas-left.active
-  .sidebar-offcanvas {
-    left: -$sidebar-width; /* 6 columns */
-  }
-
-  .row-offcanvas-right.active {
-    right: $sidebar-width; /* 6 columns */
-  }
-
-  .row-offcanvas-left.active {
-    left: $sidebar-width; /* 6 columns */
-  }
-
-  .sidebar-offcanvas {
-    position: absolute;
-    top: 0;
-    width: $sidebar-width; /* 6 columns */
-  }
+        .content-offcanvas {
+            transform:translateX($sidebar-width);
+        }
+    }
 }
 
-
 #sidebar {
+    position: fixed;
     max-width: $sidebar-width;
-    min-width: $sidebar-width;
     min-height: 100vh;
     background-color: $sidebar-background;
     color: $sidebar-color;
+    left: #{-$sidebar-width};
+    transition: transform .4s ease;
+
+    @include media-breakpoint-up(lg) {
+        left: 0;
+    }
 }
 
 @mixin active-menu-item {
@@ -169,3 +133,12 @@ $sidebar-width: 15em;
         padding-top: 0.5em;
     }
 }
+
+.content-offcanvas {
+    min-height: 100vh;
+    transition: transform .4s ease;
+
+    @include media-breakpoint-up(lg) {
+        margin-left: $sidebar-width;
+    }
+}
diff --git a/arctic/templates/arctic/base.html b/arctic/templates/arctic/base.html
@@ -17,11 +17,11 @@
                 <div class="col sidebar-offcanvas" id="sidebar">
                     {% include "arctic/partials/menu.html" %}
                 </div>
-                <div class="col">
+                <div class="col content-offcanvas">
                     {% block header %}
                     <header>
                         <h3 class="header__title">
-                            <span class="hidden-md-up">
+                            <span class="hidden-lg-up">
                                 <a href="#" class="menu-button" id="menu-button">
                                     <span class="burger-icon"></span>
                                 </a>

diff --git a/arctic/templates/arctic/partials/form_fields.html b/arctic/templates/arctic/partials/form_fields.html
@@ -6,7 +6,7 @@
                 <div class="form-block">
                     {% if layout_item.fieldset.title or layout_item.fieldset.description %}
                         <div class="arctic-card__form-header {% if layout_item.fieldset.collapsible %} js--collapse-toggle{% endif %}">
-                            <i class="fa fa-angle-up collapse-control {% if layout_item.fieldset.collapsible %} collapsed {% endif %}" data-toggle="collapse" data-target="#js--collapse-form-{{forloop.counter}}" aria-expanded="false" aria-controls="js--collapse-form"></i>
+                            <i class="fa fa-angle-down collapse-control {% if layout_item.fieldset.collapsible %} collapsed {% endif %}" data-toggle="collapse" data-target="#js--collapse-form-{{forloop.counter}}" aria-expanded="false" aria-controls="js--collapse-form"></i>
                     {% endif %}
                         {% if layout_item.fieldset.title %}
                             <h6 class="arctic-card__title">{{ layout_item.fieldset.title }}</h6>