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

ssddanbrown · ssddanbrown · commit bf1371d04c01 · 2019-06-16T12:46:23.000+01:00
- 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 BookStackApp#1434.
diff --git a/resources/assets/js/components/page-display.js b/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);
             });
         }
     }
diff --git a/resources/assets/js/components/tri-layout.js b/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
-        const pageHeader = document.querySelector('header');
-        const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
-        document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
-        setTimeout(() => {
+        if (scroll) {
+            const pageHeader = document.querySelector('header');
+            const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
             document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
-        }, 50);
+            setTimeout(() => {
+                document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
+            }, 50);
+        }
 
         this.lastTabShown = tabName;
     }
diff --git a/resources/assets/sass/_layout.scss b/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;

Original file line number	Diff line number	Diff line change
`@@ -23,8 +23,11 @@ class PageDisplay {`
`23`	`23`	`const sidebarPageNav = document.querySelector('.sidebar-page-nav');`
`24`	`24`	`if (sidebarPageNav) {`
`25`	`25`	`DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {`
	`26`	`+ event.preventDefault();`
`26`	`27`	`window.components['tri-layout'][0].showContent();`
`27`		`- this.goToText(child.getAttribute('href').substr(1));`
	`28`	`+ const contentId = child.getAttribute('href').substr(1);`
	`29`	`+ this.goToText(contentId);`
	`30`	`+ window.history.pushState(null, null, '#' + contentId);`
`28`	`31`	`});`
`29`	`32`	`}`
`30`	`33`	`}`