archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-11 03:20:39 +00:00
Code Issues 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
resources
assets
js/components
page-display.js
sass
_lists.scss
views/pages
show.blade.php

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

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

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

@ -16,36 +16,60 @@
}
.sidebar-page-nav {
$nav-indent: $-s;
$nav-indent: $-m;
list-style: none;
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 {
padding-left: $-s;
margin-bottom: 4px;
font-size: 0.95em;
position: relative;
}
.h1 {
margin-left: -2px;
padding-left: $nav-indent;
}
.h2 {
margin-left: -2px;
padding-left: $nav-indent;
}
.h3 {
margin-left: $nav-indent;
padding-left: $nav-indent * 2;
}
.h4 {
margin-left: $nav-indent*2;
padding-left: $nav-indent * 2.5;
}
.h5 {
margin-left: $nav-indent*3;
padding-left: $nav-indent*3;
}
.h6 {
margin-left: $nav-indent*4;
padding-left: $nav-indent*3.5;
}
.current-heading {
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

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

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