mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-24 19:25:27 +00:00
Made book-navigation sidebar on pages sticky
This commit is contained in:
parent
eacff3a9f0
commit
354912a1df
@ -13,7 +13,7 @@ window.setupPageShow = module.exports = function (pageId) {
|
|||||||
var isSelection = false;
|
var isSelection = false;
|
||||||
|
|
||||||
// Select all contents on input click
|
// Select all contents on input click
|
||||||
$pointer.on('click', 'input', function(e) {
|
$pointer.on('click', 'input', function (e) {
|
||||||
$(this).select();
|
$(this).select();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
});
|
});
|
||||||
@ -30,6 +30,7 @@ window.setupPageShow = module.exports = function (pageId) {
|
|||||||
|
|
||||||
// Show pointer when selecting a single block of tagged content
|
// Show pointer when selecting a single block of tagged content
|
||||||
$('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
|
$('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
var selection = window.getSelection();
|
var selection = window.getSelection();
|
||||||
if (selection.toString().length === 0) return;
|
if (selection.toString().length === 0) return;
|
||||||
|
|
||||||
@ -47,8 +48,6 @@ window.setupPageShow = module.exports = function (pageId) {
|
|||||||
var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
|
var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
|
||||||
$pointerInner.css('left', pointerLeftOffsetPercent + '%');
|
$pointerInner.css('left', pointerLeftOffsetPercent + '%');
|
||||||
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
isSelection = true;
|
isSelection = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
isSelection = false;
|
isSelection = false;
|
||||||
@ -72,19 +71,43 @@ window.setupPageShow = module.exports = function (pageId) {
|
|||||||
goToText(text);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@ -209,7 +209,7 @@ form.search-box {
|
|||||||
.faded-small {
|
.faded-small {
|
||||||
color: #000;
|
color: #000;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
background-color: rgba(21, 101, 192, 0.15);
|
background-color: $primary-faded;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumbs .text-button, .action-buttons .text-button {
|
.breadcrumbs .text-button, .action-buttons .text-button {
|
||||||
|
@ -95,7 +95,27 @@
|
|||||||
|
|
||||||
// Sidebar list
|
// Sidebar list
|
||||||
.book-tree {
|
.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 {
|
.book-tree h4 {
|
||||||
padding: $-m $-s 0 $-s;
|
padding: $-m $-s 0 $-s;
|
||||||
@ -111,10 +131,8 @@
|
|||||||
li a {
|
li a {
|
||||||
display: block;
|
display: block;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
padding-left: $-s;
|
|
||||||
padding: $-xs 0 $-xs $-s;
|
padding: $-xs 0 $-xs $-s;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -165,6 +183,7 @@
|
|||||||
}
|
}
|
||||||
.sub-menu {
|
.sub-menu {
|
||||||
display: none;
|
display: none;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.sub-menu.open {
|
.sub-menu.open {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -38,6 +38,7 @@ $primary-dark: #0288D1;
|
|||||||
$secondary: #e27b41;
|
$secondary: #e27b41;
|
||||||
$positive: #52A256;
|
$positive: #52A256;
|
||||||
$negative: #E84F4F;
|
$negative: #E84F4F;
|
||||||
|
$primary-faded: rgba(21, 101, 192, 0.15);
|
||||||
|
|
||||||
// Item Colors
|
// Item Colors
|
||||||
$color-book: #009688;
|
$color-book: #009688;
|
||||||
|
@ -134,7 +134,7 @@ $btt-size: 40px;
|
|||||||
background-color: rgba($primary, 0.4);
|
background-color: rgba($primary, 0.4);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: $-m;
|
bottom: $-m;
|
||||||
right: $-m;
|
right: $-l;
|
||||||
padding: $-xs $-s;
|
padding: $-xs $-s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
@ -144,6 +144,7 @@ $btt-size: 40px;
|
|||||||
transition: all ease-in-out 180ms;
|
transition: all ease-in-out 180ms;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
overflow: hidden;
|
||||||
&:hover {
|
&:hover {
|
||||||
width: $btt-size*3.4;
|
width: $btt-size*3.4;
|
||||||
background-color: rgba($primary, 1);
|
background-color: rgba($primary, 1);
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="faded-small">
|
<div class="faded-small toolbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-1"></div>
|
<div class="col-xs-1"></div>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="faded-small" ng-non-bindable>
|
<div class="faded-small toolbar" ng-non-bindable>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="faded-small" ng-non-bindable>
|
<div class="faded-small toolbar" ng-non-bindable>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4 faded">
|
<div class="col-md-4 faded">
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<div class="page-editor flex-fill flex" ng-non-bindable>
|
<div class="page-editor flex-fill flex" ng-non-bindable>
|
||||||
|
|
||||||
{{ csrf_field() }}
|
{{ csrf_field() }}
|
||||||
<div class="faded-small">
|
<div class="faded-small toolbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-4 faded">
|
<div class="col-sm-4 faded">
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="faded-small">
|
<div class="faded-small toolbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 faded">
|
<div class="col-md-6 faded">
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="faded-small">
|
<div class="faded-small toolbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6 faded">
|
<div class="col-sm-6 faded">
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
<div class="faded-small">
|
<div class="faded-small toolbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12 setting-nav">
|
<div class="col-md-12 setting-nav">
|
||||||
|
@ -3,11 +3,11 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="faded-small">
|
<div class="faded-small toolbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<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">
|
<div class="action-buttons">
|
||||||
<a href="/users/{{$user->id}}/delete" class="text-neg text-button"><i class="zmdi zmdi-delete"></i>Delete User</a>
|
<a href="/users/{{$user->id}}/delete" class="text-neg text-button"><i class="zmdi zmdi-delete"></i>Delete User</a>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user