From 031067745b9e95a39639f9ff165d71331370bf0b Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Fri, 6 Oct 2023 11:57:55 +0100
Subject: [PATCH] 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
---
 resources/sass/_layout.scss           | 150 ++++++++++++++------------
 resources/views/layouts/tri.blade.php |  24 +++--
 2 files changed, 98 insertions(+), 76 deletions(-)

diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index ac0e96a90..d157ffdc3 100644
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -354,56 +354,36 @@ 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 {
-    position: sticky;
-    top: 0;
-    max-height: 100vh;
-    overflow-y: scroll;
-    height: 100%;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
+.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;
@@ -425,7 +405,62 @@ body.flexbox {
     margin: 0 auto;
   }
 }
-
+@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;
+    min-height: 50vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 100%;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+@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 14016830d..c3cedf0fb 100644
--- 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