]> BookStack Code Mirror - bookstack/commitdiff
Fixed firefox tri-layout grid issue and added tablet sticky sidebar
authorDan Brown <redacted>
Sun, 16 Jun 2019 11:46:23 +0000 (12:46 +0100)
committerDan Brown <redacted>
Sun, 16 Jun 2019 11:46:23 +0000 (12:46 +0100)
- 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
resources/assets/js/components/tri-layout.js
resources/assets/sass/_layout.scss

index b2c05ebc68b1e25faffca1f7467c4a6ffa566efd..2be1c1c48b8cc93f5ac147b64023cf910eabc3fa 100644 (file)
@@ -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);
             });
         }
     }
index 5cd49b74fa67ddcc3f0928919e88cc18f7599040..905ca03b1020d566859366d6e2ecc8e851edc784 100644 (file)
@@ -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;
     }
index d9fff3c41caeecad7118f7c4d1c46108c265e978..b282b12e272c45455b4123527236d24fe27bacd2 100644 (file)
@@ -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;