mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
Made book-navigation sidebar on pages sticky
This commit is contained in:
Dan Brown
parent
eacff3a9f0
commit
354912a1df
@ -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);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user