Skip to content

Commit d3717be

Browse files
Chasen Le Harachasenlehara
Chasen Le Hara
authored and
chasenlehara
committed
Make it so only the TOC area scrolls in the right sidebar
The Get Help section is now pinned to the bottom right of the sidebar. The TOC portion of the sidebar is its own independently-scrollable area. Fixes #530
1 parent 443d2f9 commit d3717be

File tree

4 files changed

+86
-74
lines changed

4 files changed

+86
-74
lines changed

‎static/canjs.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ function init() {
186186
var newToc = document.createElement("bit-toc");
187187
newToc.depth = getOutlineDepth();
188188
newToc.headingsContainerSelector = "body";
189-
newToc.scrollSelector = "#toc-sidebar";
189+
newToc.scrollSelector = "#toc-sidebar nav";
190190
newToc.highlight = function() {
191191
var articleRect = this.article.getBoundingClientRect();
192192
var buttons = this.buttons;
@@ -233,22 +233,22 @@ function init() {
233233
// Check to see if it’s in viewport
234234
var lastActiveOrCompletedRect = lastActiveOrCompleted.getBoundingClientRect();
235235
var sidebarElement = this.outlineScrollElement;
236-
var topInset = sidebarElement.getBoundingClientRect().top;// Main nav height
237-
var viewportHeight = window.innerHeight;
236+
var sidebarElementBoundingRect = sidebarElement.getBoundingClientRect();
237+
var topInset = sidebarElementBoundingRect.top;// Main nav height
238+
var visibleSidebarHeight = sidebarElementBoundingRect.height;// Not the entire height, just what’s visible in the viewport
238239
var lastActiveOrCompletedRectIsInViewport = (
239-
lastActiveOrCompletedRect.bottom <= viewportHeight &&
240+
lastActiveOrCompletedRect.bottom <= visibleSidebarHeight &&
240241
lastActiveOrCompletedRect.left >= 0 &&
241242
lastActiveOrCompletedRect.left <= window.innerWidth &&
242243
lastActiveOrCompletedRect.top >= topInset &&
243-
lastActiveOrCompletedRect.top <= viewportHeight
244+
lastActiveOrCompletedRect.top <= visibleSidebarHeight
244245
);
245246
if (lastActiveOrCompletedRectIsInViewport === false) {
246247
// Scroll the sidebar so the highlighted element is in the viewport
247-
var visibleSidebarHeight = sidebarElement.offsetHeight;// Not the entire height, just what’s visible in the viewport
248-
var amountScrolledDownSidebar = sidebarElement.scrollTop;
249-
var additionalScrollAmount = lastActiveOrCompletedRect.top - viewportHeight;
248+
var amountScrolledDownSidebar = tocContainer.scrollTop;
249+
var additionalScrollAmount = lastActiveOrCompletedRect.top - visibleSidebarHeight;
250250
var amountToScroll = topInset + (visibleSidebarHeight / 2) + additionalScrollAmount + amountScrolledDownSidebar;
251-
sidebarElement.scrollTop = amountToScroll;
251+
tocContainer.scrollTop = amountToScroll;
252252
}
253253
}
254254
};
@@ -271,7 +271,7 @@ function init() {
271271
tocContainer.appendChild(newToc);
272272

273273
// Show the “On this page” title
274-
var onThisPage = document.querySelector("#toc-sidebar h1");
274+
var onThisPage = document.querySelector("#toc-sidebar nav h1");
275275
onThisPage.classList.remove("hide");
276276

277277
// After the TOC loads, determine whether the “On this page” title should show
@@ -436,7 +436,7 @@ function navigate(href, updateLocation) {
436436

437437
// Scroll to the top of the page & TOC sidebar
438438
setPageScrollTop(0);
439-
$('#toc-sidebar').scrollTop(0);
439+
$('#toc-sidebar nav').scrollTop(0);
440440

441441
var $article = $content.find("article");
442442
var currentPage = $content.filter("#everything").attr("data-current-page");
@@ -527,7 +527,7 @@ function getOutlineDepth() {
527527
}
528528

529529
function hideTOCSidebarScrollbar() {
530-
var tocSidebar = document.querySelector("#toc-sidebar");
530+
var tocSidebar = document.querySelector("#toc-sidebar nav");
531531
if (tocSidebar.scrollHeight > tocSidebar.offsetHeight) {
532532
tocSidebar.classList.add("hide-scrollbar");
533533
} else {

‎static/layout.less‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@
2626
-ms-grid-row: 2;
2727
-ms-grid-column: 1;
2828
-ms-grid-column-span: 1;
29-
border-right: 3px solid #F4F4F4;
29+
border-right: 3px solid @light-gray-color;
3030
grid-area: nav-sidebar;
31+
scroll-behavior: smooth;
3132
@media screen and (max-width: @breakpoint) {
3233
width: @sidebar-width;
3334
}
@@ -45,14 +46,10 @@
4546
flex-grow: 1;
4647
}
4748
#toc-sidebar {
49+
display: grid;
4850
grid-area: toc-sidebar;
49-
@media (hover: hover) {
50-
&.hide-scrollbar:not(:hover) {
51-
margin-right: var(--scrollbar-width);
52-
overflow: hidden;
53-
}
54-
}
55-
51+
grid-template-rows: 1fr auto;
52+
padding: 0 @gutter*2 @gutter*2;
5653
}
5754
@media screen and (max-width: @breakpoint-sidebar-right){
5855
#toc-sidebar {
@@ -62,7 +59,6 @@
6259
#left, #toc-sidebar {
6360
height: calc(~"100vh - " @brand-height);// 53px header
6461
position: fixed;
65-
scroll-behavior: smooth;
6662
top: @brand-height;
6763
transition: min-width @transition-speed ease;
6864
@media screen and (min-width: @breakpoint){

‎static/toc.less‎

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
#toc-sidebar {
2-
padding: 35px @gutter*2 0;
32
p {
43
font-size: 14px;
54
line-height: 1.5;
@@ -20,7 +19,19 @@
2019
display: none;
2120
}
2221
}
22+
2323
nav {
24+
overflow: auto;
25+
padding: 35px 0 0;
26+
scroll-behavior: smooth;
27+
28+
@media (hover: hover) {
29+
&.hide-scrollbar:not(:hover) {
30+
margin-right: var(--scrollbar-width);
31+
overflow: hidden;
32+
}
33+
}
34+
2435
ul {
2536
position: relative;
2637
margin-top: 0;
@@ -99,50 +110,55 @@
99110
border-left: 2px solid transparent;
100111
}
101112
}
102-
.social-list {
103-
display: block;
104-
font-size: 14px;
105-
padding-bottom: @gutter*2;
106-
list-style: none;
107-
margin-top: 0;
108-
padding-left: 0;
113+
114+
.get-help {
115+
border-top: 3px solid @light-gray-color;
116+
padding: @gutter*2 0 0;
117+
118+
ul {
119+
display: block;
120+
font-size: 14px;
121+
list-style: none;
122+
margin: 0;
123+
padding-left: 0;
124+
}
109125
li {
110126
margin: @gutter/3 0;
111-
a {
112-
white-space: nowrap;
113-
&:before {
114-
display: inline-flex;
115-
vertical-align: middle;
116-
width: 30px;
117-
height: 30px;
118-
margin: 0 @gutter 0 0;
119-
content: '';
120-
background-repeat: no-repeat;
121-
}
122-
&.icon-slack:before {
123-
background-image: url(img/icon-slack-gray.svg);
124-
}
125-
&.icon-github:before {
126-
background-image: url(img/icon-github-gray.svg);
127-
}
128-
&.icon-twitter:before {
129-
background-image: url(img/icon-twitter-gray.svg);
130-
}
131-
&.icon-forums:before {
132-
background-image: url(img/icon-forums-gray.svg);
133-
}
134-
&.icon-blog:before {
135-
background-image: url(img/icon-rss-gray.svg);
136-
}
137-
&.icon-youtube:before {
138-
background-image: url(img/icon-youtube-gray.svg);
139-
}
140-
&.icon-meetup:before {
141-
background-image: url(img/icon-meetup-gray.svg);
142-
}
143-
&.icon-stackoverflow:before {
144-
background-image: url(img/icon-stackoverflow-gray.svg);
145-
}
127+
}
128+
a {
129+
white-space: nowrap;
130+
&:before {
131+
display: inline-flex;
132+
vertical-align: middle;
133+
width: 30px;
134+
height: 30px;
135+
margin: 0 @gutter 0 0;
136+
content: '';
137+
background-repeat: no-repeat;
138+
}
139+
&.icon-slack:before {
140+
background-image: url(img/icon-slack-gray.svg);
141+
}
142+
&.icon-github:before {
143+
background-image: url(img/icon-github-gray.svg);
144+
}
145+
&.icon-twitter:before {
146+
background-image: url(img/icon-twitter-gray.svg);
147+
}
148+
&.icon-forums:before {
149+
background-image: url(img/icon-forums-gray.svg);
150+
}
151+
&.icon-blog:before {
152+
background-image: url(img/icon-rss-gray.svg);
153+
}
154+
&.icon-youtube:before {
155+
background-image: url(img/icon-youtube-gray.svg);
156+
}
157+
&.icon-meetup:before {
158+
background-image: url(img/icon-meetup-gray.svg);
159+
}
160+
&.icon-stackoverflow:before {
161+
background-image: url(img/icon-stackoverflow-gray.svg);
146162
}
147163
}
148164
}

‎templates/content.mustache‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@
2323

2424
</div>
2525
<div id="toc-sidebar" class="column">
26-
<h1 class="hide">On this page</h1>
2726
<nav>
27+
<h1 class="hide">On this page</h1>
2828
</nav>
29-
30-
<h1>Get help</h1>
31-
32-
<ul class="social-list">
33-
<li><a href="https://www.bitovi.com/community/slack" target="_blank" class="icon-slack">Chat with us</a></li>
34-
<li><a href="https://github.com/canjs/canjs/issues/new" target="_blank" class="icon-github">File an issue</a></li>
35-
<li><a href="https://forums.bitovi.com/c/canjs" target="_blank" class="icon-forums">Ask questions</a></li>
36-
<li><a href="https://www.bitovi.com/blog/topic/canjs" target="_blank" class="icon-blog">Read latest news</a></li>
37-
</ul>
29+
<div class="get-help">
30+
<h1>Get help</h1>
31+
<ul>
32+
<li><a href="https://www.bitovi.com/community/slack" target="_blank" class="icon-slack">Chat with us</a></li>
33+
<li><a href="https://github.com/canjs/canjs/issues/new" target="_blank" class="icon-github">File an issue</a></li>
34+
<li><a href="https://forums.bitovi.com/c/canjs" target="_blank" class="icon-forums">Ask questions</a></li>
35+
<li><a href="https://www.bitovi.com/blog/topic/canjs" target="_blank" class="icon-blog">Read latest news</a></li>
36+
</ul>
37+
</div>
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)