Fixed firefox tri-layout grid issue and added tablet sticky sidebar

- Fixed issue with original left-sidebar content being placed halfway
down the page.
- Added sticky sidebar to mid-size tablet layout, only for original left
sidebar items.

Fixes #1434.

resources/assets/js/components/page-display.js

@@ -23,8 +23,11 @@ class PageDisplay {
         const sidebarPageNav = document.querySelector('.sidebar-page-nav');
         if (sidebarPageNav) {
             DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
+                event.preventDefault();
                 window.components['tri-layout'][0].showContent();
-                this.goToText(child.getAttribute('href').substr(1));
+                const contentId = child.getAttribute('href').substr(1);
+                this.goToText(contentId);
+                window.history.pushState(null, null, '#' + contentId);
             });
         }
     }

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

@@ -74,14 +74,14 @@ class TriLayout {
      * Used by the page-display component.
      */
     showContent() {
-        this.showTab('content');
+        this.showTab('content', false);
     }
 
     /**
      * Show the given tab
      * @param tabName
      */
-    showTab(tabName) {
+    showTab(tabName, scroll = true) {
         this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
 
         // Set tab status
@@ -96,12 +96,14 @@ class TriLayout {
         this.elem.classList.toggle('show-info', showInfo);
 
         // Set the scroll position from cache
+        if (scroll) {
             const pageHeader = document.querySelector('header');
             const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
             document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
             setTimeout(() => {
                 document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
             }, 50);
+        }
 
         this.lastTabShown = tabName;
     }

resources/assets/sass/_layout.scss

@@ -219,12 +219,19 @@ body.flexbox {
 @include smaller-than($xxl) {
   .tri-layout-container {
     grid-template-areas:  "c b b"
-    "a b b";
+    "a b b"
+    ". b b";
     grid-template-columns: 1fr 3fr;
-    grid-template-rows: max-content min-content;
+    grid-template-rows: min-content min-content 1fr;
     padding-right: $-l;
   }
 }
+@include between($l, $xxl) {
+  .tri-layout-left {
+    position: sticky;
+    top: $-m;
+  }
+}
 @include larger-than($xxl) {
   .tri-layout-left-contents, .tri-layout-right-contents {
     padding: $-m;