Layout: Restructured tri-layout for sidebar control

Restructured tri-layout grid system, so the sidebars are contained in
their own child grid system, mimicking the parent grid, so we can treat
them as part of the same parent scroll container at smaller screen
sizes for consistent scroll/sticky behavior.

Tested on Firefox, Chromium, Gnome Web and Safari (MacOS).

For #4394
Changes made during review of #4562

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index ac0e96a901b96a16cef76f0f671373c44e915370..d157ffdc36d372bbb374ba9a5543f80da0584d6b 100644 (file)
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -354,48 +354,45 @@ body.flexbox {
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-areas: "a b c";
   grid-column-gap: $-xl;
-  .tri-layout-right {
-    grid-area: c;
-    min-width: 0;
-  }
-  .tri-layout-left {
-    grid-area: a;
-    min-width: 0;
-  }
-  .tri-layout-middle {
-    grid-area: b;
-    padding-top: $-m;
-    min-width: 0;
-  }
+  position: relative;
 }
-@include smaller-than($xxl) {
-  .tri-layout-container {
-    grid-template-areas:  "c b b"
-    "a b b"
-    ". b b";
-    grid-template-columns: 1fr 3fr;
-    grid-template-rows: min-content min-content 1fr;
-    padding-inline-end: $-l;
-  }
+.tri-layout-sides {
+  grid-column-start: a;
+  grid-column-end: c;
+  grid-row: 1;
+  min-width: 0;
+  z-index: 4;
 }
-@include between($xxl, $xxxl) {
-  .tri-layout-container {
-    grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
-    grid-column-gap: $-s;
-    margin-inline-start: $-m;
-    margin-inline-end: $-m;
-  }
+.tri-layout-sides-content {
+  display: grid;
+  grid-template-areas: "a b c";
+  grid-template-columns: 1fr 4fr 1fr;
+  height: 100%;
 }
-@include between($l, $xxl) {
-  .tri-layout-left {
-    position: sticky;
-    top: $-m;
-  }
-  .tri-layout-left-contents {
+.tri-layout-middle {
+  grid-area: b;
+  padding-top: $-m;
+  min-width: 0;
+  z-index: 5;
+}
+.tri-layout-right {
+  grid-area: c;
+  min-width: 0;
+}
+.tri-layout-left {
+  grid-area: a;
+  min-width: 0;
+}
+
+@include larger-than($xxl) {
+  .tri-layout-left-contents, .tri-layout-right-contents {
+    padding: $-xl $-m;
     position: sticky;
     top: 0;
     max-height: 100vh;
+    min-height: 50vh;
     overflow-y: scroll;
+    overflow-x: hidden;
     height: 100%;
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -403,10 +400,38 @@ body.flexbox {
       display: none;
     }
   }
+  .tri-layout-middle-contents {
+    max-width: 940px;
+    margin: 0 auto;
+  }
 }
-@include larger-than($xxl) {
-  .tri-layout-left-contents, .tri-layout-right-contents {
-    padding: $-xl $-m;
+@include between($xxl, $xxxl) {
+  .tri-layout-sides-content, .tri-layout-container {
+    grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
+  }
+  .tri-layout-container {
+    grid-column-gap: $-s;
+    margin-inline-start: $-m;
+    margin-inline-end: $-m;
+  }
+}
+@include smaller-than($xxl) {
+  .tri-layout-container {
+    grid-template-areas:  "a b b";
+    grid-template-columns: 1fr 3fr;
+    grid-template-rows: min-content min-content 1fr;
+    padding-inline-end: $-l;
+  }
+  .tri-layout-sides {
+    grid-column-start: a;
+    grid-column-end: a;
+  }
+  .tri-layout-sides-content {
+    display: block;
+  }
+}
+@include between($l, $xxl) {
+  .tri-layout-sides-content {
     position: sticky;
     top: 0;
     max-height: 100vh;
@@ -420,12 +445,22 @@ body.flexbox {
       display: none;
     }
   }
-  .tri-layout-middle-contents {
-    max-width: 940px;
-    margin: 0 auto;
+}
+@include larger-than($l) {
+  .tri-layout-mobile-tabs {
+    display: none;
+  }
+  .tri-layout-left-contents > *, .tri-layout-right-contents > * {
+    @include lightDark(opacity, 0.6, 0.75);
+    transition: opacity ease-in-out 120ms;
+    &:hover, &:focus-within {
+      opacity: 1 !important;
+    }
+    @media (prefers-contrast: more) {
+      opacity: 1 !important;
+    }
   }
 }
-
 @include smaller-than($l) {
   .tri-layout-container {
     grid-template-areas:  none;
@@ -433,18 +468,16 @@ body.flexbox {
     grid-column-gap: 0;
     padding-inline-end: $-xs;
     padding-inline-start: $-xs;
-    .tri-layout-left-contents, .tri-layout-right-contents {
+    .tri-layout-sides {
       padding-inline-start: $-m;
       padding-inline-end: $-m;
+      grid-column: 1/1;
     }
     .tri-layout-left > *, .tri-layout-right > * {
       display: none;
       pointer-events: none;
     }
     .tri-layout-left, .tri-layout-right {
-      grid-area: none;
-      grid-column: 1/1;
-      grid-row: 1;
       padding-top: 0 !important;
     }
     .tri-layout-middle {
@@ -470,21 +503,6 @@ body.flexbox {
     }
   }
 }
-@include larger-than($l) {
-  .tri-layout-mobile-tabs {
-    display: none;
-  }
-  .tri-layout-left-contents > *, .tri-layout-right-contents > * {
-    @include lightDark(opacity, 0.6, 0.75);
-    transition: opacity ease-in-out 120ms;
-    &:hover, &:focus-within {
-      opacity: 1 !important;
-    }
-    @media (prefers-contrast: more) {
-      opacity: 1 !important;
-    }
-  }
-}
 
 @include smaller-than($m) {
   .tri-layout-container {

diff --git a/resources/views/layouts/tri.blade.php b/resources/views/layouts/tri.blade.php
index 14016830d4e04825da507af558b395e8ef7e0980..c3cedf0fbc2a2106c91f954b3a8142cb16db53c2 100644 (file)
--- a/resources/views/layouts/tri.blade.php
+++ b/resources/views/layouts/tri.blade.php
@@ -27,10 +27,20 @@
 
     <div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
 
-        <div class="tri-layout-left print-hidden" id="sidebar">
-            <aside class="tri-layout-left-contents">
-                @yield('left')
-            </aside>
+        <div class="tri-layout-sides print-hidden">
+            <div class="tri-layout-sides-content">
+                <div class="tri-layout-right print-hidden">
+                    <aside class="tri-layout-right-contents">
+                        @yield('right')
+                    </aside>
+                </div>
+
+                <div class="tri-layout-left print-hidden" id="sidebar">
+                    <aside class="tri-layout-left-contents">
+                        @yield('left')
+                    </aside>
+                </div>
+            </div>
         </div>
 
         <div class="@yield('body-wrap-classes') tri-layout-middle">
@@ -38,12 +48,6 @@
                 @yield('body')
             </div>
         </div>
-
-        <div class="tri-layout-right print-hidden">
-            <aside class="tri-layout-right-contents">
-                @yield('right')
-            </aside>
-        </div>
     </div>
 
 @stop