Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
354912a1 1 parent eacff3a9

Made book-navigation sidebar on pages sticky

Inline Side-by-side
Showing 13 changed files with 77 additions and 33 deletions
...@@ -13,7 +13,7 @@ window.setupPageShow = module.exports = function (pageId) { ...@@ -13,7 +13,7 @@ window.setupPageShow = module.exports = function (pageId) {
13 var isSelection = false; 13 var isSelection = false;
14 14
15 // Select all contents on input click 15 // Select all contents on input click
16 - $pointer.on('click', 'input', function(e) { 16 + $pointer.on('click', 'input', function (e) {
17 $(this).select(); 17 $(this).select();
18 e.stopPropagation(); 18 e.stopPropagation();
19 }); 19 });
...@@ -30,6 +30,7 @@ window.setupPageShow = module.exports = function (pageId) { ...@@ -30,6 +30,7 @@ window.setupPageShow = module.exports = function (pageId) {
30 30
31 // Show pointer when selecting a single block of tagged content 31 // Show pointer when selecting a single block of tagged content
32 $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) { 32 $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
33 + e.stopPropagation();
33 var selection = window.getSelection(); 34 var selection = window.getSelection();
34 if (selection.toString().length === 0) return; 35 if (selection.toString().length === 0) return;
35 36
...@@ -47,8 +48,6 @@ window.setupPageShow = module.exports = function (pageId) { ...@@ -47,8 +48,6 @@ window.setupPageShow = module.exports = function (pageId) {
47 var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100; 48 var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
48 $pointerInner.css('left', pointerLeftOffsetPercent + '%'); 49 $pointerInner.css('left', pointerLeftOffsetPercent + '%');
49 50
50 - e.stopPropagation();
51 -
52 isSelection = true; 51 isSelection = true;
53 setTimeout(() => { 52 setTimeout(() => {
54 isSelection = false; 53 isSelection = false;
...@@ -72,19 +71,43 @@ window.setupPageShow = module.exports = function (pageId) { ...@@ -72,19 +71,43 @@ window.setupPageShow = module.exports = function (pageId) {
72 goToText(text); 71 goToText(text);
73 } 72 }
74 73
75 - // Get current tree's width 74 + // Make the book-tree sidebar stick in view on scroll
76 - var bookTreeWidth = $(".book-tree").width(); 75 + var $window = $(window);
77 - // Get header height 76 + var $bookTree = $(".book-tree");
78 - var headerHeight = $("#header").height() + $(".faded-small").height(); 77 + // Check the page is scrollable and the content is taller than the tree
79 - $(window).scroll(function () { 78 + var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
80 - if($(window).scrollTop() > headerHeight){ 79 + // Get current tree's width and header height
81 - // Begin to scroll 80 + var headerHeight = $("#header").height() + $(".toolbar").height();
82 - $(".book-tree").width(bookTreeWidth); 81 + var isFixed = $window.scrollTop() > headerHeight;
83 - $(".book-tree").css("position", "fixed"); 82 + var bookTreeWidth = $bookTree.width();
84 - $(".book-tree").css("top", 0); 83 + // Function to fix the tree as a sidebar
85 - } else { 84 + function stickTree() {
86 - // Lock it back in place 85 + $bookTree.width(bookTreeWidth + 48 + 15);
87 - $(".book-tree").css("position", "relative"); 86 + $bookTree.addClass("fixed");
88 - } 87 + isFixed = true;
89 - }) 88 + }
89 + // Function to un-fix the tree back into position
90 + function unstickTree() {
91 + $bookTree.css('width', 'auto');
92 + $bookTree.removeClass("fixed");
93 + isFixed = false;
94 + }
95 + // Checks if the tree stickiness state should change
96 + function checkTreeStickiness(skipCheck) {
97 + var shouldBeFixed = $window.scrollTop() > headerHeight;
98 + if (shouldBeFixed && (!isFixed || skipCheck)) {
99 + stickTree();
100 + } else if (!shouldBeFixed && (isFixed || skipCheck)) {
101 + unstickTree();
102 + }
103 + }
104 + // If the page is scrollable and the window is wide enough listen to scroll events
105 + // and evaluate tree stickiness.
106 + if (pageScrollable && $window.width() > 1000) {
107 + $window.scroll(function() {
108 + checkTreeStickiness(false);
109 + });
110 + checkTreeStickiness(true);
111 + }
112 +
90 }; 113 };
......
...@@ -209,7 +209,7 @@ form.search-box { ...@@ -209,7 +209,7 @@ form.search-box {
209 .faded-small { 209 .faded-small {
210 color: #000; 210 color: #000;
211 font-size: 0.9em; 211 font-size: 0.9em;
212 - background-color: rgba(21, 101, 192, 0.15); 212 + background-color: $primary-faded;
213 } 213 }
214 214
215 .breadcrumbs .text-button, .action-buttons .text-button { 215 .breadcrumbs .text-button, .action-buttons .text-button {
......
...@@ -95,7 +95,27 @@ ...@@ -95,7 +95,27 @@
95 95
96 // Sidebar list 96 // Sidebar list
97 .book-tree { 97 .book-tree {
98 - margin-top: $-xl; 98 + padding: $-xl 0 0 0;
99 + position: relative;
100 + right: 0;
101 + top: 0;
102 + transition: ease-in-out 240ms;
103 + transition-property: right, border;
104 + border-left: 0px solid #FFF;
105 + &.fixed {
106 + position: fixed;
107 + top: 0;
108 + padding-left: $-l;
109 + padding-right: $-l + 15;
110 + width: 30%;
111 + right: -15px;
112 + height: 100%;
113 + overflow-y: scroll;
114 + -ms-overflow-style: none;
115 + //background-color: $primary-faded;
116 + border-left: 1px solid #DDD;
117 + &::-webkit-scrollbar { width: 0 !important }
118 + }
99 } 119 }
100 .book-tree h4 { 120 .book-tree h4 {
101 padding: $-m $-s 0 $-s; 121 padding: $-m $-s 0 $-s;
...@@ -111,10 +131,8 @@ ...@@ -111,10 +131,8 @@
111 li a { 131 li a {
112 display: block; 132 display: block;
113 border-bottom: none; 133 border-bottom: none;
114 - padding-left: $-s;
115 padding: $-xs 0 $-xs $-s; 134 padding: $-xs 0 $-xs $-s;
116 &:hover { 135 &:hover {
117 - background-color: rgba(255, 255, 255, 0.2);
118 text-decoration: none; 136 text-decoration: none;
119 } 137 }
120 } 138 }
...@@ -165,6 +183,7 @@ ...@@ -165,6 +183,7 @@
165 } 183 }
166 .sub-menu { 184 .sub-menu {
167 display: none; 185 display: none;
186 + padding-left: 0;
168 } 187 }
169 .sub-menu.open { 188 .sub-menu.open {
170 display: block; 189 display: block;
......
...@@ -38,6 +38,7 @@ $primary-dark: #0288D1; ...@@ -38,6 +38,7 @@ $primary-dark: #0288D1;
38 $secondary: #e27b41; 38 $secondary: #e27b41;
39 $positive: #52A256; 39 $positive: #52A256;
40 $negative: #E84F4F; 40 $negative: #E84F4F;
41 +$primary-faded: rgba(21, 101, 192, 0.15);
41 42
42 // Item Colors 43 // Item Colors
43 $color-book: #009688; 44 $color-book: #009688;
......
...@@ -134,7 +134,7 @@ $btt-size: 40px; ...@@ -134,7 +134,7 @@ $btt-size: 40px;
134 background-color: rgba($primary, 0.4); 134 background-color: rgba($primary, 0.4);
135 position: fixed; 135 position: fixed;
136 bottom: $-m; 136 bottom: $-m;
137 - right: $-m; 137 + right: $-l;
138 padding: $-xs $-s; 138 padding: $-xs $-s;
139 cursor: pointer; 139 cursor: pointer;
140 color: #FFF; 140 color: #FFF;
...@@ -144,6 +144,7 @@ $btt-size: 40px; ...@@ -144,6 +144,7 @@ $btt-size: 40px;
144 transition: all ease-in-out 180ms; 144 transition: all ease-in-out 180ms;
145 opacity: 0; 145 opacity: 0;
146 z-index: 999; 146 z-index: 999;
147 + overflow: hidden;
147 &:hover { 148 &:hover {
148 width: $btt-size*3.4; 149 width: $btt-size*3.4;
149 background-color: rgba($primary, 1); 150 background-color: rgba($primary, 1);
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="faded-small"> 5 + <div class="faded-small toolbar">
6 <div class="container"> 6 <div class="container">
7 <div class="row"> 7 <div class="row">
8 <div class="col-xs-1"></div> 8 <div class="col-xs-1"></div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="faded-small" ng-non-bindable> 5 + <div class="faded-small toolbar" ng-non-bindable>
6 <div class="container"> 6 <div class="container">
7 <div class="row"> 7 <div class="row">
8 <div class="col-md-12"> 8 <div class="col-md-12">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="faded-small" ng-non-bindable> 5 + <div class="faded-small toolbar" ng-non-bindable>
6 <div class="container"> 6 <div class="container">
7 <div class="row"> 7 <div class="row">
8 <div class="col-md-4 faded"> 8 <div class="col-md-4 faded">
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <div class="page-editor flex-fill flex" ng-non-bindable> 4 <div class="page-editor flex-fill flex" ng-non-bindable>
5 5
6 {{ csrf_field() }} 6 {{ csrf_field() }}
7 - <div class="faded-small"> 7 + <div class="faded-small toolbar">
8 <div class="container"> 8 <div class="container">
9 <div class="row"> 9 <div class="row">
10 <div class="col-sm-4 faded"> 10 <div class="col-sm-4 faded">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="faded-small"> 5 + <div class="faded-small toolbar">
6 <div class="container"> 6 <div class="container">
7 <div class="row"> 7 <div class="row">
8 <div class="col-md-6 faded"> 8 <div class="col-md-6 faded">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 - <div class="faded-small"> 5 + <div class="faded-small toolbar">
6 <div class="container"> 6 <div class="container">
7 <div class="row"> 7 <div class="row">
8 <div class="col-sm-6 faded"> 8 <div class="col-sm-6 faded">
......
1 1
2 -<div class="faded-small"> 2 +<div class="faded-small toolbar">
3 <div class="container"> 3 <div class="container">
4 <div class="row"> 4 <div class="row">
5 <div class="col-md-12 setting-nav"> 5 <div class="col-md-12 setting-nav">
......
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
3 3
4 @section('content') 4 @section('content')
5 5
6 - <div class="faded-small"> 6 + <div class="faded-small toolbar">
7 <div class="container"> 7 <div class="container">
8 <div class="row"> 8 <div class="row">
9 - <div class="col-md-6"></div> 9 + <div class="col-sm-6"></div>
10 - <div class="col-md-6 faded"> 10 + <div class="col-sm-6 faded">
11 <div class="action-buttons"> 11 <div class="action-buttons">
12 <a href="/users/{{$user->id}}/delete" class="text-neg text-button"><i class="zmdi zmdi-delete"></i>Delete User</a> 12 <a href="/users/{{$user->id}}/delete" class="text-neg text-button"><i class="zmdi zmdi-delete"></i>Delete User</a>
13 </div> 13 </div>
......