template: Add table of contents to the page sidebar.

Also, when we have a large enough margin let's fix it to the top right
so it is always visible
This commit is contained in:
Andy Williams 2017-11-20 10:03:25 +00:00
parent a8805c626e
commit d108a64283
2 changed files with 50 additions and 30 deletions

View File

@ -43,11 +43,6 @@ h1, h2, h3, h4, h5, h6,
padding: 15px 0;
}
.bs-sidebar {
padding-top: 15px;
position: fixed;
}
.bs-sidenav {
margin-top: 30px;
margin-bottom: 30px;
@ -58,26 +53,45 @@ h1, h2, h3, h4, h5, h6,
border-radius: 4px;
}
.bs-sidebar .nav > li > a {
display: block;
padding: 5px 20px;
#dokuwiki__aside h4 {
margin-bottom: 0;
padding-left: 10px;
}
.bs-sidebar .nav li a:visited {
#dokuwiki__aside ul {
list-style: none;
padding-left: 0;
margin-bottom: 10px;
}
#dokuwiki__aside ul ul {
padding-left: 20px;
}
#dokuwiki__aside .nav li a {
display: block;
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#dokuwiki__aside .nav li a:visited {
border-bottom: none;
border-bottom-color: #202020;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
#dokuwiki__aside .nav li a:hover,
#dokuwiki__aside .nav li a:focus {
border-bottom: none;
background-color: #202020;
border-right: 1px solid #505050;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
#dokuwiki__aside .nav > .active > a,
#dokuwiki__aside .nav > .active:hover > a,
#dokuwiki__aside .nav > .active:focus > a {
font-weight: bold;
background-color: transparent;
border-right: 1px;
@ -85,14 +99,12 @@ h1, h2, h3, h4, h5, h6,
.bs-sidebar .nav .nav {
display: none;
margin-bottom: 8px;
}
.bs-sidebar .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
}
.bs-sidebar .nav > .active > ul {
@ -119,9 +131,17 @@ h1, h2, h3, h4, h5, h6,
background-color: #282828;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-left: 15px solid #303030;
border-bottom: 15px solid #303030;
min-width: 250px;
width: 280px;
}
@media (min-width: 1700px) {
#dokuwiki__aside {
position: fixed;
right: 0;
}
}
#dokuwiki__aside a:visited {
@ -162,7 +182,7 @@ h1, h2, h3, h4, h5, h6,
background-color: #202020;
}
.nav > li > a {
.nav li a {
padding-left: 6px;
padding-right: 6px;
text-shadow: none;

View File

@ -86,17 +86,7 @@ $showSidebar = $hasSidebar && ($ACT=='show');
<!-- ********** SIDE BAR for TOCIFY ********** -->
<div class="row">
<?php /* when in Show Mode we render the TOC, if not, use full width for content */
if ($showTOC) { ?>
<!-- Make side bar 3 "md's" wide -->
<div class="col-md-3">
<?php _tpl_toc_to_twitter_bootstrap(); ?>
</div>
<div class="col-md-8" id="dokuwiki__content">
<?php } else { ?>
<div class="col-md-11" id="dokuwiki__content">
<?php } ?>
<?php if($showSidebar): ?>
<!-- ********** ASIDE ********** -->
@ -107,11 +97,21 @@ $showSidebar = $hasSidebar && ($ACT=='show');
<?php tpl_includeFile('sidebarheader.html') ?>
<?php tpl_include_page($conf['sidebar'], true, true) ?>
<?php tpl_includeFile('sidebarfooter.html') ?>
</div></div>
<?php /* when in Show Mode we render the TOC */
if ($showTOC) { ?>
<h3 class="toggle">Page Contents</h3>
<div class="content">
<?php _tpl_toc_to_twitter_bootstrap(); ?>
<div class="nav"><ul><li>
<a href="#top">Top of Page</a>
</li></ul></div>
</div>
</div></div><!-- /aside -->
<?php } ?>
</div><!-- /aside -->
<?php endif; ?>
<div class="page">
<div class="page">
<?php tpl_flush(); ?>
<?php tpl_content(false); ?>
<div class="clearer"></div>