Made book-navigation sidebar on pages sticky

This commit is contained in:
Dan Brown 2016-02-11 22:23:19 +00:00
parent eacff3a9f0
commit 354912a1df
13 changed files with 77 additions and 33 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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