Added responsive functionality to tri-layout view.

resources/assets/js/components/index.js

@@ -20,6 +20,7 @@ import shelfSort from "./shelf-sort";
 import homepageControl from "./homepage-control";
 import headerMobileToggle from "./header-mobile-toggle";
 import listSortControl from "./list-sort-control";
+import triLayout from "./tri-layout";
 
 
 const componentMapping = {
@@ -45,6 +46,7 @@ const componentMapping = {
     'homepage-control': homepageControl,
     'header-mobile-toggle': headerMobileToggle,
     'list-sort-control': listSortControl,
+    'tri-layout': triLayout,
 };
 
 window.components = {};

resources/assets/js/components/tri-layout.js

@@ -0,0 +1,81 @@
+
+class TriLayout {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.middle = elem.querySelector('.tri-layout-middle');
+        this.right = elem.querySelector('.tri-layout-right');
+        this.left = elem.querySelector('.tri-layout-left');
+
+        this.lastLayoutType = 'none';
+        this.onDestroy = null;
+
+
+        this.updateLayout();
+        window.addEventListener('resize', event => {
+            this.updateLayout();
+        });
+    }
+
+    updateLayout() {
+        const newLayout = (window.innerWidth <= 1000) ? 'mobile' : 'desktop';
+        if (newLayout === this.lastLayoutType) return;
+
+        if (this.onDestroy) {
+            this.onDestroy();
+            this.onDestroy = null;
+        }
+
+        if (newLayout === 'desktop') {
+            this.setupDesktop();
+        } else {
+            this.setupMobile();
+        }
+
+        this.lastLayoutType = newLayout;
+    }
+
+    setupMobile() {
+        const mobileSidebarClickBound = this.mobileSidebarClick.bind(this);
+        const mobileContentClickBound = this.mobileContentClick.bind(this);
+        this.left.addEventListener('click', mobileSidebarClickBound);
+        this.right.addEventListener('click', mobileSidebarClickBound);
+        this.middle.addEventListener('click', mobileContentClickBound);
+
+        this.onDestroy = () => {
+            this.left.removeEventListener('click', mobileSidebarClickBound);
+            this.right.removeEventListener('click', mobileSidebarClickBound);
+            this.middle.removeEventListener('click', mobileContentClickBound);
+        }
+    }
+
+    setupDesktop() {
+        // TODO
+    }
+
+    /**
+     * Slide the main content back into view if clicked and
+     * currently slid out of view.
+     * @param event
+     */
+    mobileContentClick(event) {
+        this.elem.classList.remove('mobile-open');
+    }
+
+    /**
+     * On sidebar click, Show the content by sliding the main content out.
+     * @param event
+     */
+    mobileSidebarClick(event) {
+        if (this.elem.classList.contains('mobile-open')) {
+            this.elem.classList.remove('mobile-open');
+        } else {
+            event.preventDefault();
+            event.stopPropagation();
+            this.elem.classList.add('mobile-open');
+        }
+    }
+
+}
+
+export default TriLayout;

resources/assets/sass/_grid.scss

@@ -50,107 +50,83 @@ body.flexbox {
   flex: 1;
 }
 
-.flex.sidebar {
-  flex: 1;
-  background-color: #F2F2F2;
-  max-width: 420px;
-  min-height: 90vh;
-  section {
-    margin: $-m;
-  }
-}
-.flex.sidebar + .flex {
-  flex: 3;
-  max-width: 100%;
-}
-.flex.sidebar + .flex .content-wrap {
-  padding: $-l $-xxl;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: $-xl;
-  overflow: auto;
-  &.thin {
-    width: 940px;
-    max-width: 100%;
-  }
-}
-.flex.sidebar .sidebar-toggle {
-  display: none;
-}
 
-@include smaller-than($xl) {
+.tri-layout-container {
-  body.sidebar-layout {
+  display: grid;
-    padding-left: 30px;
+  grid-template-columns: 1fr minmax(auto, 940px) 1fr;
+  grid-template-areas: "a b c";
+  grid-column-gap: $-xl;
+  padding-right: $-xl;
+  padding-left: $-xl;
+  .tri-layout-right {
+    grid-area: c;
   }
-  .flex.sidebar {
+  .tri-layout-left {
-    position: fixed;
+    grid-area: a;
-    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;
-    display: flex;
-    flex-direction: column;
   }
-  .flex.sidebar.open {
+  .tri-layout-middle {
-    box-shadow: 1px 2px 2px 1px rgba(0,0,0,.10);
+    grid-area: b;
-    transform: translate3d(0, 0, 0);
+  }
-    .sidebar-toggle i {
+  .content-wrap.card {
-      transform: rotate(180deg);
+    padding: $-l $-xxl;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: $-xl;
+    overflow: auto;
+    &.thin {
+      width: 940px;
+      max-width: 100%;
     }
   }
-  .flex.sidebar .sidebar-toggle {
-    display: block;
-    position: absolute;
-    opacity: 0.9;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 30px;
-    fill: #666;
-    font-size: 20px;
-    vertical-align: middle;
-    text-align: center;
-    border: 1px solid #DDD;
-    border-top: 1px solid #BBB;
-    padding-top: $-m;
-    cursor: pointer;
-    svg {
-      opacity: 0.5;
-      transition: all ease-in-out 120ms;
-      margin: 0;
-    }
-    &:hover i {
-      opacity: 1;
-    }
-  }
-  .sidebar .scroll-body {
-    flex: 1;
-    overflow-y: scroll;
-  }
-  #sidebar .scroll-body.fixed {
-    width: auto !important;
-  }
 }
-
+@include smaller-than($xxl) {
-@include larger-than($xl) {
+  .tri-layout-container {
-  #sidebar .scroll-body.fixed {
+    grid-template-areas:  "c b b"
-    z-index: 5;
+                          "a b b";
-    position: fixed;
+    grid-template-columns: 1fr 3fr;
-    top: 0;
+    grid-template-rows: max-content min-content;
-    padding-top: $-m;
+    .content-wrap.card {
-    width: 30%;
+      padding: $-l $-l;
-    left: 0;
+    }
-    height: 100%;
+  }
-    overflow-y: auto;
+}
-    -ms-overflow-style: none;
+@include smaller-than($l) {
-    //background-color: $primary-faded;
+  .tri-layout-container {
-    border-left: 1px solid #DDD;
+    grid-template-areas:  none;
-    &::-webkit-scrollbar { width: 0 !important }
+    grid-template-columns: 10% 90%;
+    grid-column-gap: 0;
+    padding-right: $-l;
+    padding-left: $-l;
+    .tri-layout-right, .tri-layout-left {
+      opacity: 0.6;
+      z-index: 0;
+    }
+    .tri-layout-left > *, .tri-layout-right > * {
+      pointer-events: none;
+    }
+    .tri-layout-right, .tri-layout-left, .tri-layout-middle {
+      grid-area: none;
+      grid-column: 1/3;
+      grid-row: 1;
+    }
+    .tri-layout-middle {
+      grid-row: 1/3;
+      grid-column: 2/3;
+      z-index: 1;
+      transition: transform ease-in-out 240ms;
+    }
+    .tri-layout-left {
+      grid-row: 2;
+    }
+    &.mobile-open {
+      overflow: hidden;
+      .tri-layout-middle {
+        transform: translateX(90%);
+      }
+      .tri-layout-right  > *, .tri-layout-left > * {
+        pointer-events: auto;
+      }
+    }
   }
 }
 
@@ -168,7 +144,7 @@ div[class^="col-"] img {
 }
 
 .container {
-  max-width: $max-width;
+  max-width: $xxl;
   margin-left: auto;
   margin-right: auto;
   padding-left: $-m;
@@ -953,7 +929,7 @@ div[class^="col-"] img {
   grid-column-gap: $-m;
   grid-row-gap: 0;
   &.contained {
-    max-width: $max-width;
+    max-width: $xxl;
     padding-left: $-m;
     padding-right: $-m;
     margin-left: auto;

resources/assets/sass/_lists.scss

@@ -304,6 +304,9 @@ ul.pagination {
   background-size: cover;
   background-position: 50% 50%;
   border-radius: 3px;
+  @include smaller-than($m) {
+    width: 80px;
+  }
 }
 
 .entity-list.compact {

resources/assets/sass/_variables.scss

@@ -1,10 +1,8 @@
 // Variables
 ///////////////
 
-// Sizes
-$max-width: 1400px;
-
 // Screen breakpoints
+$xxl: 1400px;
 $xl: 1100px;
 $ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
 $l: 1000px;

resources/views/books/index.blade.php

@@ -33,7 +33,7 @@
 
 @section('right')
 
-    <div class="actions mb-xl px-xl">
+    <div class="actions mb-xl">
         <h5>Actions</h5>
         <div class="icon-list text-primary">
             @if($currentUser->can('book-create-all'))

resources/views/tri-layout.blade.php

@@ -8,24 +8,19 @@
         @yield('toolbar')
     </div>
 
-    <div class="flex-fill flex" @yield('container-attrs') >
+    <div class="tri-layout-container" tri-layout @yield('container-attrs') >
 
-        <div sidebar class="sidebar flex print-hidden tri-layout-left" id="sidebar">
+        <div class="tri-layout-left print-hidden " id="sidebar">
-            <div class="sidebar-toggle primary-background-light">@icon('caret-right-circle')
+            @yield('left')
-            </div>
-            <div class="scroll-body px-xl">
-                @yield('left')
-            </div>
         </div>
 
-        <div class="flex @yield('body-wrap-classes')">
+        <div class="@yield('body-wrap-classes') tri-layout-middle">
             @yield('body')
         </div>
 
-        <div class="flex tri-layout-right">
+        <div class="tri-layout-right print-hidden">
             @yield('right')
         </div>
     </div>
 
-
 @stop