Made book-navigation sidebar on pages sticky

resources/assets/js/pages/page-show.js

@@ -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
+    // Make the book-tree sidebar stick in view on scroll
-    var bookTreeWidth = $(".book-tree").width();
+    var $window = $(window);
-    // Get header height
+    var $bookTree = $(".book-tree");
-    var headerHeight = $("#header").height() + $(".faded-small").height();
+    // Check the page is scrollable and the content is taller than the tree
-    $(window).scroll(function () {
+    var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
-      if($(window).scrollTop() > headerHeight){
+    // Get current tree's width and header height
-        // Begin to scroll
+    var headerHeight = $("#header").height() + $(".toolbar").height();
-        $(".book-tree").width(bookTreeWidth);
+    var isFixed = $window.scrollTop() > headerHeight;
-        $(".book-tree").css("position", "fixed");
+    var bookTreeWidth = $bookTree.width();
-        $(".book-tree").css("top", 0);
+    // Function to fix the tree as a sidebar
-      } else {
+    function stickTree() {
-        // Lock it back in place
+        $bookTree.width(bookTreeWidth + 48 + 15);
-        $(".book-tree").css("position", "relative");
+        $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);
+    }
+
 };

resources/assets/sass/_header.scss

@@ -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 {

resources/assets/sass/_lists.scss

@@ -95,7 +95,27 @@
 
 // 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;
@@ -111,10 +131,8 @@
   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;
     }
   }
@@ -165,6 +183,7 @@
   }
   .sub-menu {
     display: none;
+    padding-left: 0;
   }
   .sub-menu.open {
     display: block;

resources/assets/sass/_variables.scss

@@ -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;

resources/assets/sass/styles.scss

@@ -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);

resources/views/books/index.blade.php

@@ -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>

resources/views/books/show.blade.php

@@ -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">

resources/views/chapters/show.blade.php

@@ -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">

resources/views/pages/form.blade.php

@@ -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">

resources/views/pages/revisions.blade.php

@@ -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">

resources/views/pages/show.blade.php

@@ -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">

resources/views/settings/navbar.blade.php

@@ -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">

resources/views/users/edit.blade.php

@@ -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-sm-6"></div>
-                <div class="col-md-6 faded">
+                <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>