diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js index c12528975..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,4 +71,43 @@ window.setupPageShow = module.exports = function (pageId) { goToText(text); } -}; \ No newline at end of file + // 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/lang/en/activities.php b/resources/lang/en/activities.php index 7a3bcd760..8356d8302 100644 --- a/resources/lang/en/activities.php +++ b/resources/lang/en/activities.php @@ -13,7 +13,7 @@ return [ 'page_update' => 'updated page', 'page_update_notification' => 'Page Successfully Updated', 'page_delete' => 'deleted page', - 'page_delete_notification' => 'Page Successfully Created', + 'page_delete_notification' => 'Page Successfully Deleted', 'page_restore' => 'restored page', 'page_restore_notification' => 'Page Successfully Restored', @@ -35,4 +35,4 @@ return [ 'book_sort' => 'sorted book', 'book_sort_notification' => 'Book Successfully Re-sorted', -]; \ No newline at end of file +]; 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') -