From 354912a1dfa4ff3b778a0425827af307cb918186 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Thu, 11 Feb 2016 22:23:19 +0000 Subject: [PATCH] Made book-navigation sidebar on pages sticky --- resources/assets/js/pages/page-show.js | 59 ++++++++++++++++------- resources/assets/sass/_header.scss | 2 +- resources/assets/sass/_lists.scss | 25 ++++++++-- resources/assets/sass/_variables.scss | 1 + resources/assets/sass/styles.scss | 3 +- resources/views/books/index.blade.php | 2 +- resources/views/books/show.blade.php | 2 +- resources/views/chapters/show.blade.php | 2 +- resources/views/pages/form.blade.php | 2 +- resources/views/pages/revisions.blade.php | 2 +- resources/views/pages/show.blade.php | 2 +- resources/views/settings/navbar.blade.php | 2 +- resources/views/users/edit.blade.php | 6 +-- 13 files changed, 77 insertions(+), 33 deletions(-) diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js index 59938bbbc..3ddece1b8 100644 --- a/resources/assets/js/pages/page-show.js +++ b/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 - 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); + } + }; diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss index de1f3d1d0..2f06532c0 100644 --- a/resources/assets/sass/_header.scss +++ b/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 { diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 748694635..da34c8f61 100644 --- a/resources/assets/sass/_lists.scss +++ b/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; diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index 7677b2fa4..874515bfd 100644 --- a/resources/assets/sass/_variables.scss +++ b/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; diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index b81e43296..6b1c1400d 100644 --- a/resources/assets/sass/styles.scss +++ b/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); diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php index 536d1f105..9fa483735 100644 --- a/resources/views/books/index.blade.php +++ b/resources/views/books/index.blade.php @@ -2,7 +2,7 @@ @section('content') -
+
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php index 083c8e958..db89bed9e 100644 --- a/resources/views/books/show.blade.php +++ b/resources/views/books/show.blade.php @@ -2,7 +2,7 @@ @section('content') -
+
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php index 73057cf6d..7033093e5 100644 --- a/resources/views/chapters/show.blade.php +++ b/resources/views/chapters/show.blade.php @@ -2,7 +2,7 @@ @section('content') -
+
diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php index 6a1ca7f96..f1f54d97f 100644 --- a/resources/views/pages/form.blade.php +++ b/resources/views/pages/form.blade.php @@ -4,7 +4,7 @@
{{ csrf_field() }} -
+
diff --git a/resources/views/pages/revisions.blade.php b/resources/views/pages/revisions.blade.php index cc597816f..e3782ef6e 100644 --- a/resources/views/pages/revisions.blade.php +++ b/resources/views/pages/revisions.blade.php @@ -2,7 +2,7 @@ @section('content') -
+
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php index 8a5bffca4..004a240d0 100644 --- a/resources/views/pages/show.blade.php +++ b/resources/views/pages/show.blade.php @@ -2,7 +2,7 @@ @section('content') -
+
diff --git a/resources/views/settings/navbar.blade.php b/resources/views/settings/navbar.blade.php index f25836493..49239b73c 100644 --- a/resources/views/settings/navbar.blade.php +++ b/resources/views/settings/navbar.blade.php @@ -1,5 +1,5 @@ -
+
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php index 59457eb15..d1cabe290 100644 --- a/resources/views/users/edit.blade.php +++ b/resources/views/users/edit.blade.php @@ -3,11 +3,11 @@ @section('content') -
+
-
-
+
+
Delete User