]> BookStack Code Mirror - bookstack/commitdiff
Made book-navigation sidebar on pages sticky
authorDan Brown <redacted>
Thu, 11 Feb 2016 22:23:19 +0000 (22:23 +0000)
committerDan Brown <redacted>
Thu, 11 Feb 2016 22:23:19 +0000 (22:23 +0000)
13 files changed:
resources/assets/js/pages/page-show.js
resources/assets/sass/_header.scss
resources/assets/sass/_lists.scss
resources/assets/sass/_variables.scss
resources/assets/sass/styles.scss
resources/views/books/index.blade.php
resources/views/books/show.blade.php
resources/views/chapters/show.blade.php
resources/views/pages/form.blade.php
resources/views/pages/revisions.blade.php
resources/views/pages/show.blade.php
resources/views/settings/navbar.blade.php
resources/views/users/edit.blade.php

index 59938bbbc526bebf4252189644f97ac7959a6b26..3ddece1b8dfbb182d39f907c927f7b4a9970e00f 100644 (file)
@@ -13,7 +13,7 @@ window.setupPageShow = module.exports = function (pageId) {
     var isSelection = false;
 
     // Select all contents on input click
-    $pointer.on('click', 'input', function(e) {
+    $pointer.on('click', 'input', function (e) {
         $(this).select();
         e.stopPropagation();
     });
@@ -30,6 +30,7 @@ window.setupPageShow = module.exports = function (pageId) {
 
     // Show pointer when selecting a single block of tagged content
     $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
+        e.stopPropagation();
         var selection = window.getSelection();
         if (selection.toString().length === 0) return;
 
@@ -47,8 +48,6 @@ window.setupPageShow = module.exports = function (pageId) {
         var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
         $pointerInner.css('left', pointerLeftOffsetPercent + '%');
 
-        e.stopPropagation();
-
         isSelection = true;
         setTimeout(() => {
             isSelection = false;
@@ -72,19 +71,43 @@ window.setupPageShow = module.exports = function (pageId) {
         goToText(text);
     }
 
-    // Get current tree's width
-    var bookTreeWidth = $(".book-tree").width();
-    // Get header height
-    var headerHeight = $("#header").height() + $(".faded-small").height();
-    $(window).scroll(function () {
-      if($(window).scrollTop() > headerHeight){
-        // Begin to scroll
-        $(".book-tree").width(bookTreeWidth);
-        $(".book-tree").css("position", "fixed");
-        $(".book-tree").css("top", 0);
-      } else {
-        // Lock it back in place
-        $(".book-tree").css("position", "relative");
-      }
-    })
+    // Make the book-tree sidebar stick in view on scroll
+    var $window = $(window);
+    var $bookTree = $(".book-tree");
+    // Check the page is scrollable and the content is taller than the tree
+    var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
+    // Get current tree's width and header height
+    var headerHeight = $("#header").height() + $(".toolbar").height();
+    var isFixed = $window.scrollTop() > headerHeight;
+    var bookTreeWidth = $bookTree.width();
+    // Function to fix the tree as a sidebar
+    function stickTree() {
+        $bookTree.width(bookTreeWidth + 48 + 15);
+        $bookTree.addClass("fixed");
+        isFixed = true;
+    }
+    // Function to un-fix the tree back into position
+    function unstickTree() {
+        $bookTree.css('width', 'auto');
+        $bookTree.removeClass("fixed");
+        isFixed = false;
+    }
+    // Checks if the tree stickiness state should change
+    function checkTreeStickiness(skipCheck) {
+        var shouldBeFixed = $window.scrollTop() > headerHeight;
+        if (shouldBeFixed && (!isFixed || skipCheck)) {
+            stickTree();
+        } else if (!shouldBeFixed && (isFixed || skipCheck)) {
+            unstickTree();
+        }
+    }
+    // If the page is scrollable and the window is wide enough listen to scroll events
+    // and evaluate tree stickiness.
+    if (pageScrollable && $window.width() > 1000) {
+        $window.scroll(function() {
+            checkTreeStickiness(false);
+        });
+        checkTreeStickiness(true);
+    }
+
 };
index de1f3d1d0622c66d7f1a0ddbd3b73850f0c2b492..2f06532c0a3d7bbd8ce6cee24914a222b7773dd0 100644 (file)
@@ -209,7 +209,7 @@ form.search-box {
 .faded-small {
   color: #000;
   font-size: 0.9em;
-  background-color: rgba(21, 101, 192, 0.15);
+  background-color: $primary-faded;
 }
 
 .breadcrumbs .text-button, .action-buttons .text-button {
index 748694635ee1f49a650f5c5aec4757346919f2e2..da34c8f61b4ef900d2a3839e37fb1c8bc336bc62 100644 (file)
 
 // Sidebar list
 .book-tree {
-  margin-top: $-xl;
+  padding: $-xl 0 0 0;
+  position: relative;
+  right: 0;
+  top: 0;
+  transition: ease-in-out 240ms;
+  transition-property: right, border;
+  border-left: 0px solid #FFF;
+  &.fixed {
+    position: fixed;
+    top: 0;
+    padding-left: $-l;
+    padding-right: $-l + 15;
+    width: 30%;
+    right: -15px;
+    height: 100%;
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+    //background-color: $primary-faded;
+    border-left: 1px solid #DDD;
+    &::-webkit-scrollbar { width: 0 !important }
+  }
 }
 .book-tree h4 {
   padding: $-m $-s 0 $-s;
   li a {
     display: block;
     border-bottom: none;
-    padding-left: $-s;
     padding: $-xs 0 $-xs $-s;
     &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
       text-decoration: none;
     }
   }
   }
   .sub-menu {
     display: none;
+    padding-left: 0;
   }
   .sub-menu.open {
     display: block;
index 7677b2fa41b3cc8a9163c3e1ec4aa0ff73f259fd..874515bfdf318207f7a8cf76b93d49f700aa880e 100644 (file)
@@ -38,6 +38,7 @@ $primary-dark: #0288D1;
 $secondary: #e27b41;
 $positive: #52A256;
 $negative: #E84F4F;
+$primary-faded: rgba(21, 101, 192, 0.15);
 
 // Item Colors
 $color-book: #009688;
index b81e43296204f17fc5463e5bdf20e985881f9b18..6b1c1400d557ad4c95d8d1aee7ffa7d31572d5eb 100644 (file)
@@ -134,7 +134,7 @@ $btt-size: 40px;
   background-color: rgba($primary, 0.4);
   position: fixed;
   bottom: $-m;
-  right: $-m;
+  right: $-l;
   padding: $-xs $-s;
   cursor: pointer;
   color: #FFF;
@@ -144,6 +144,7 @@ $btt-size: 40px;
   transition: all ease-in-out 180ms;
   opacity: 0;
   z-index: 999;
+  overflow: hidden;
   &:hover {
     width: $btt-size*3.4;
     background-color: rgba($primary, 1);
index 536d1f105ec295b2e5addb3a3cbd23aeef21069f..9fa48373558b259753a8855bd54069f39684654a 100644 (file)
@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="faded-small">
+    <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
                 <div class="col-xs-1"></div>
index 083c8e9585126e0d1ee7d80cf8e20311de43dd1e..db89bed9ece04eb2a6840b20f34a5402b04603a0 100644 (file)
@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="faded-small" ng-non-bindable>
+    <div class="faded-small toolbar" ng-non-bindable>
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
index 73057cf6d5fac21140b7e18dc3fde9be7bd93a11..7033093e5675c863f47db6d92343ad2c48fb9d77 100644 (file)
@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="faded-small" ng-non-bindable>
+    <div class="faded-small toolbar" ng-non-bindable>
         <div class="container">
             <div class="row">
                 <div class="col-md-4 faded">
index 6a1ca7f963d32eb606e1a808d29d65d2075be667..f1f54d97ffe8d029b227e686faf60d3566ac5bde 100644 (file)
@@ -4,7 +4,7 @@
 <div class="page-editor flex-fill flex" ng-non-bindable>
 
     {{ csrf_field() }}
-    <div class="faded-small">
+    <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
                 <div class="col-sm-4 faded">
index cc597816fc2565a60fa746265bd101de615de750..e3782ef6edc0e0188cf3ab91162ef96b401b8da7 100644 (file)
@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="faded-small">
+    <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
                 <div class="col-md-6 faded">
index 8a5bffca448e60de7f92f33b5d301fc9f25fd8db..004a240d0290bdbc8e4272e67d0a6593c9ead29c 100644 (file)
@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="faded-small">
+    <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
                 <div class="col-sm-6 faded">
index f2583649359d4bfe1a32990b0bfdc9986d47c2aa..49239b73cec067fd1c8c179d2380cef89bf056c5 100644 (file)
@@ -1,5 +1,5 @@
 
-<div class="faded-small">
+<div class="faded-small toolbar">
     <div class="container">
         <div class="row">
             <div class="col-md-12 setting-nav">
index 59457eb15752de06d431e957a10599f4982e5b9f..d1cabe2909c2aadf10ddb495f44e394fbc658a5c 100644 (file)
@@ -3,11 +3,11 @@
 
 @section('content')
 
-    <div class="faded-small">
+    <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
-                <div class="col-md-6"></div>
-                <div class="col-md-6 faded">
+                <div class="col-sm-6"></div>
+                <div class="col-sm-6 faded">
                     <div class="action-buttons">
                         <a href="/users/{{$user->id}}/delete" class="text-neg text-button"><i class="zmdi zmdi-delete"></i>Delete User</a>
                     </div>