From d108a64283409b73747b9b84088141fc3c1e2e18 Mon Sep 17 00:00:00 2001
From: Andy Williams <andy@andywilliams.me>
Date: Mon, 20 Nov 2017 10:03:25 +0000
Subject: [PATCH] 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
---
 public_html/lib/tpl/e/css/modifications.css | 56 ++++++++++++++-------
 public_html/lib/tpl/e/main.php              | 24 ++++-----
 2 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/public_html/lib/tpl/e/css/modifications.css b/public_html/lib/tpl/e/css/modifications.css
index 8f150950..984aa528 100644
--- a/public_html/lib/tpl/e/css/modifications.css
+++ b/public_html/lib/tpl/e/css/modifications.css
@@ -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;
diff --git a/public_html/lib/tpl/e/main.php b/public_html/lib/tpl/e/main.php
index 2f1fd48c..4d3b0575 100644
--- a/public_html/lib/tpl/e/main.php
+++ b/public_html/lib/tpl/e/main.php
@@ -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>