Made new sidebar layout responsive

diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
index a324ab0c907bdd494798d29499bc5d15763f6c5c..f8025ac3d97ecb60e56ed4eab47b7ce66fb80cde 100644 (file)
--- a/resources/assets/js/components/index.js
+++ b/resources/assets/js/components/index.js
@@ -8,6 +8,7 @@ let componentMapping = {
     'expand-toggle': require('./expand-toggle'),
     'entity-selector-popup': require('./entity-selector-popup'),
     'entity-selector': require('./entity-selector'),
+    'sidebar': require('./sidebar'),
 };
 
 window.components = {};

diff --git a/resources/assets/js/components/sidebar.js b/resources/assets/js/components/sidebar.js
new file mode 100644 (file)
index 0000000..fc80161
--- /dev/null
+++ b/resources/assets/js/components/sidebar.js
@@ -0,0 +1,16 @@
+
+class Sidebar {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.toggleElem = elem.querySelector('.sidebar-toggle');
+        this.toggleElem.addEventListener('click', this.toggle.bind(this));
+    }
+
+    toggle(show = true) {
+        this.elem.classList.toggle('open');
+    }
+
+}
+
+module.exports = Sidebar;
\ No newline at end of file

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index c804b9aa8ac422f5573b6dff6d5073b3c68562b9..c5b850507b044cb9ed75b77a2e2b4fca8de03aa9 100644 (file)
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -204,21 +204,4 @@
   background-color: #F8F8F8;
   padding: $-m;
   border: 1px solid #DDD;
-}
-
-#sidebar .scroll-body {
-  &.fixed {
-    z-index: 5;
-    position: fixed;
-    top: 0;
-    padding-right: $-m;
-    width: 30%;
-    left: 0;
-    height: 100%;
-    overflow-y: scroll;
-    -ms-overflow-style: none;
-    //background-color: $primary-faded;
-    border-left: 1px solid #DDD;
-    &::-webkit-scrollbar { width: 0 !important }
-  }
 }
\ No newline at end of file

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 6bff97cb32fa876ccb591a1a4b9aa67a370178fe..d24ffcfafe2fd5de789caf01891bd59e2a885ac8 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -58,9 +58,85 @@ body.flexbox {
 .flex.sidebar + .flex.content {
   flex: 3;
   background-color: #FFFFFF;
+  padding: 0 $-l;
   border-left: 1px solid #DDD;
+  max-width: 100%;
+}
+.flex.sidebar .sidebar-toggle {
+  display: none;
+}
+
+@include smaller-than($xl) {
+  body.sidebar-layout {
+    padding-left: 30px;
+  }
+  .flex.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    padding-right: 30px;
+    width: 360px;
+    box-shadow: none;
+    transform: translate3d(-330px, 0, 0);
+    transition: transform ease-in-out 120ms;
+  }
+  .flex.sidebar.open {
+    box-shadow: 1px 2px 2px 1px rgba(0,0,0,.10);
+    transform: translate3d(0, 0, 0);
+    .sidebar-toggle i {
+      transform: rotate(180deg);
+    }
+  }
+  .flex.sidebar .sidebar-toggle {
+    display: block;
+    position: absolute;
+    opacity: 0.9;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 30px;
+    color: #666;
+    font-size: 20px;
+    vertical-align: middle;
+    text-align: center;
+    border: 1px solid #DDD;
+    border-top: 1px solid #BBB;
+    padding-top: $-m;
+    cursor: pointer;
+    i {
+      opacity: 0.5;
+      transition: all ease-in-out 120ms;
+      padding: 0;
+    }
+    &:hover i {
+      opacity: 1;
+    }
+  }
+  #sidebar .scroll-body.fixed {
+    width: auto !important;
+  }
 }
 
+@include larger-than($xl) {
+  #sidebar .scroll-body.fixed {
+    z-index: 5;
+    position: fixed;
+    top: 0;
+    padding-right: $-m;
+    width: 30%;
+    left: 0;
+    height: 100%;
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+    //background-color: $primary-faded;
+    border-left: 1px solid #DDD;
+    &::-webkit-scrollbar { width: 0 !important }
+  }
+}
+
+
 /** Rules for all columns */
 div[class^="col-"] img {
   max-width: 100%;

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 3e92ce828f5bab9d5337d3ab36ee950b2abebaf1..b9d9d68ef86151efad339b16d3dfa09621f0c540 100644 (file)
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -85,7 +85,7 @@ header {
 }
 header .search-box {
   display: inline-block;
-  margin-top: $-s;
+  margin-top: 10px;
   input {
     background-color: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.3);

diff --git a/resources/views/sidebar-layout.blade.php b/resources/views/sidebar-layout.blade.php
index 0880f881d19bc7a7a89790187fd3918a478b13d3..592dbc463bb2c101d043146c817d23c257c42dc4 100644 (file)
--- a/resources/views/sidebar-layout.blade.php
+++ b/resources/views/sidebar-layout.blade.php
@@ -1,5 +1,7 @@
 @extends('base')
 
+@section('body-class', 'sidebar-layout')
+
 @section('content')
 
     <div class="toolbar-container">
@@ -15,7 +17,9 @@
 
     <div class="flex-fill flex" @yield('container-attrs') >
 
-        <div class="sidebar flex print-hidden" id="sidebar">
+        <div sidebar class="sidebar flex print-hidden" id="sidebar">
+            <div class="sidebar-toggle primary-background-light"><i class="zmdi zmdi-caret-right-circle"></i>
+            </div>
             <div class="scroll-body">
                 @yield('sidebar')
             </div>