Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-08-28 05:02:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated design of page navigation box

Browse Source
This commit is contained in:
Dan Brown 2019-02-16 15:39:11 +00:00
parent b00b319e83
commit 352cbbd074
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/assets/js/components/page-display.js
View File

@ -208,8 +208,8 @@ class PageDisplay {
let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts); let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
// observe each heading // observe each heading
for (let i = 0; i !== headings.length; ++i) { for (let heading of headings) {
pageNavObserver.observe(headings[i]); pageNavObserver.observe(heading);
} }
} }
@ -221,14 +221,9 @@ class PageDisplay {
} }
function toggleAnchorHighlighting(elementId, shouldHighlight) { function toggleAnchorHighlighting(elementId, shouldHighlight) {
let anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]'); const anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]');
for (let i = 0; i < anchorsToHighlight.length; i++) { for (let anchor of anchorsToHighlight) {
// Change below to use classList.toggle when IE support is dropped. anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
if (shouldHighlight) {
anchorsToHighlight[i].classList.add('current-heading');
} else {
anchorsToHighlight[i].classList.remove('current-heading');
}
} }
} }
} }

42
resources/assets/sass/_lists.scss
View File

@ -16,36 +16,60 @@
} }
.sidebar-page-nav { .sidebar-page-nav {
$nav-indent: $-s; $nav-indent: $-m;
list-style: none; list-style: none;
margin: $-s 0 $-m 2px; margin: $-s 0 $-m 2px;
border-left: 2px dotted #BBB; position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
width: 2px;
top: 5px;
bottom: 5px;
z-index: 0;
}
li { li {
padding-left: $-s;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 0.95em; font-size: 0.95em;
position: relative;
} }
.h1 { .h1 {
margin-left: -2px; padding-left: $nav-indent;
} }
.h2 { .h2 {
margin-left: -2px; padding-left: $nav-indent;
} }
.h3 { .h3 {
margin-left: $nav-indent; padding-left: $nav-indent * 2;
} }
.h4 { .h4 {
margin-left: $nav-indent*2; padding-left: $nav-indent * 2.5;
} }
.h5 { .h5 {
margin-left: $nav-indent*3; padding-left: $nav-indent*3;
} }
.h6 { .h6 {
margin-left: $nav-indent*4; padding-left: $nav-indent*3.5;
} }
.current-heading { .current-heading {
font-weight: bold; font-weight: bold;
} }
li:not(.current-heading) .sidebar-page-nav-bullet {
background-color: #BBB !important;
}
.sidebar-page-nav-bullet {
width: 6px;
height: 6px;
position: absolute;
left: -2px;
top: 30%;
border-radius: 50%;
box-shadow: 0 0 0 6px #F2F2F2;
z-index: 1;
}
} }
// Sidebar list // Sidebar list

1
resources/views/pages/show.blade.php
View File

@ -64,6 +64,7 @@
@foreach($pageNav as $navItem) @foreach($pageNav as $navItem)
<li class="page-nav-item h{{ $navItem['level'] }}"> <li class="page-nav-item h{{ $navItem['level'] }}">
<a href="{{ $navItem['link'] }}">{{ $navItem['text'] }}</a> <a href="{{ $navItem['link'] }}">{{ $navItem['text'] }}</a>
<div class="primary-background sidebar-page-nav-bullet"></div>
</li> </li>
@endforeach @endforeach
</div> </div>