From 6668fe02aaa00e7b89af6d22bc9ae2781c756f39 Mon Sep 17 00:00:00 2001
From: Andrew Manning <tamanning@zoho.com>
Date: Fri, 9 Dec 2016 22:18:23 -0500
Subject: Only display h1 headings in sticky side nav. Toggle display of
 detailed TOC at top of page. Introduce return to top button for small
 screens.

---
 Zotlabs/Module/Help.php           |  1 +
 doc/toc.html                      |  6 +++---
 view/theme/redbasic/css/style.css |  1 +
 view/tpl/help.tpl                 | 30 +++++++++++++++++++++++++-----
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/Zotlabs/Module/Help.php b/Zotlabs/Module/Help.php
index 27d94e405..9d6e421e5 100644
--- a/Zotlabs/Module/Help.php
+++ b/Zotlabs/Module/Help.php
@@ -80,6 +80,7 @@ class Help extends \Zotlabs\Web\Controller {
 
 		return replace_macros(get_markup_template('help.tpl'), array(
 			'$title' => t('$Projectname Documentation'),
+			'$tocHeading' => t('Contents'),
 			'$content' => $content
 		));
 	}
diff --git a/doc/toc.html b/doc/toc.html
index a2ebea318..4ef79bd10 100644
--- a/doc/toc.html
+++ b/doc/toc.html
@@ -420,11 +420,11 @@
                 tocUl.toc({content: "#doco-content", headings: "h1"});
                 tocUl.addClass('toc-content');
                 if( $(window).height() > 499) {
-                tocUl.sticky({topSpacing:$('nav').outerHeight(true), zIndex: 1000});
-            }
+					tocUl.sticky({topSpacing:$('nav').outerHeight(true), zIndex: 1000});
+				}
             }
         });
-        
+		        
     });
 
 </script>
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index ae4853ec6..af6b85323 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1788,6 +1788,7 @@ nav .badge.mail-update:hover {
 
 #expand-aside,
 #expand-tabs,
+#doco-return-to-top-btn,
 #context-help-btn {
 	color: $nav_active_icon_colour;
 	padding: 7px 10px;
diff --git a/view/tpl/help.tpl b/view/tpl/help.tpl
index 2faaa3853..3ec1c9d8c 100644
--- a/view/tpl/help.tpl
+++ b/view/tpl/help.tpl
@@ -3,9 +3,11 @@
 	<h2>{{$title}}</h2>
 	</div>
 	<div class="section-content-wrapper" id="doco-content">
-	<h1>Contents</h1>
-	<ul id="doco-top-toc"></ul>
-	<hr>
+		<h1 class="fakelink" id="doco-top-toc-heading"><span  onclick="docoTocToggle(); return false;">
+			<i class="fakelink fa fa-caret-right" id="doco-toc-toggle"></i>
+			{{$tocHeading}}
+		</span></h1>
+	<ul id="doco-top-toc" style="margin-bottom: 1.5em; display: none;"></ul>
 	{{$content}}
 	</div>
 </div>
@@ -16,7 +18,25 @@
 	$(document).ready(function () {
 
 		$('#doco-top-toc').toc({content: "#doco-content", headings: "h1,h2,h3,h4"});
-
+		$('.navbar-header').append('<button id="doco-return-to-top-btn">'); //.find('button');
+		var goTopBtn = $('#doco-return-to-top-btn');
+		goTopBtn.append('<i>').find('i').addClass('fa fa-arrow-circle-up');
+		//goTopBtn.attr('id', 'doco-return-to-top-btn');
+		goTopBtn.attr('type', 'button');
+		goTopBtn.attr('data-toggle', 'offcanvas');
+		goTopBtn.addClass('navbar-toggle');
+		goTopBtn.click(function() { $(window).scrollTop(0); });
 	});
+	
+	function docoTocToggle() {
+		if($('#doco-top-toc').is(':visible')) {
+			$('#doco-toc-toggle').removeClass('fa-caret-down').addClass('fa-caret-right');
+		} else {
+			$('#doco-toc-toggle').removeClass('fa-caret-right').addClass('fa-caret-down');
+		}
+		$('#doco-top-toc').toggle();
+		
+		return false;
+	}
 
-</script>
\ No newline at end of file
+</script>
-- 
cgit v1.2.3