Added tri-layout desktop sticky-scroll

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

@@ -18,7 +18,9 @@ class TriLayout {
     }
 
     updateLayout() {
-        const newLayout = (window.innerWidth <= 1000) ? 'mobile' : 'desktop';
+        let newLayout = 'tablet';
+        if (window.innerWidth <= 1000) newLayout =  'mobile';
+        if (window.innerWidth >= 1400) newLayout =  'desktop';
         if (newLayout === this.lastLayoutType) return;
 
         if (this.onDestroy) {
@@ -28,7 +30,7 @@ class TriLayout {
 
         if (newLayout === 'desktop') {
             this.setupDesktop();
-        } else {
+        } else if (newLayout === 'mobile') {
             this.setupMobile();
         }
 
@@ -50,7 +52,7 @@ class TriLayout {
     }
 
     setupDesktop() {
-        // TODO
+        //
     }
 
     /**

resources/assets/sass/_grid.scss

@@ -55,9 +55,10 @@ body.flexbox {
   display: grid;
   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-contents, .tri-layout-left-contents {
+    padding-right: $-xl;
+    padding-left: $-xl;
+  }
   .tri-layout-right {
     grid-area: c;
   }
@@ -85,18 +86,36 @@ body.flexbox {
                           "a b b";
     grid-template-columns: 1fr 3fr;
     grid-template-rows: max-content min-content;
+    padding-right: $-l;
     .content-wrap.card {
       padding: $-l $-l;
     }
   }
 }
+@include larger-than($xxl) {
+  .tri-layout-left-contents, .tri-layout-right-contents {
+    position: sticky;
+    top: $-m;
+    max-height: 100vh;
+    overflow-y: scroll;
+    overflow-x: visible;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
 @include smaller-than($l) {
   .tri-layout-container {
     grid-template-areas:  none;
     grid-template-columns: 10% 90%;
     grid-column-gap: 0;
-    padding-right: $-l;
-    padding-left: $-l;
+    .tri-layout-left-contents, .tri-layout-right-contents {
+      padding-left: $-m;
+      padding-right: $-m;
+    }
     .tri-layout-right, .tri-layout-left {
       opacity: 0.6;
       z-index: 0;

resources/views/tri-layout.blade.php

@@ -11,7 +11,9 @@
     <div class="tri-layout-container" tri-layout @yield('container-attrs') >
 
         <div class="tri-layout-left print-hidden " id="sidebar">
-            @yield('left')
+            <div class="tri-layout-left-contents">
+                @yield('left')
+            </div>
         </div>
 
         <div class="@yield('body-wrap-classes') tri-layout-middle">
@@ -19,7 +21,9 @@
         </div>
 
         <div class="tri-layout-right print-hidden">
-            @yield('right')
+            <div class="tri-layout-right-contents">
+                @yield('right')
+            </div>
         </div>
     </div>