From 13a51515e7235b09437e294850c73abda1e7294d Mon Sep 17 00:00:00 2001
From: Julian Molina <julian@nomadinception.com>
Date: Sun, 10 Jan 2021 18:53:05 +0100
Subject: [PATCH] New topic navigation layout

---
 Client/WebServer/css/docs.css                   | 17 ++++++++---------
 .../UI/Spaces/Docs-Space/DocumentPage.js        | 14 ++++++++------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index 24a243d7d..631100e43 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -314,7 +314,7 @@ box-sizing: border-box;
 
 .docs-topic-index {
 background-color:white;
-padding: 30 20px;
+padding: 40 20px;
 margin: 40px 0;
 border: 1px solid rgba(49, 112, 143, .2);
 border-left-width: 5px;
@@ -332,9 +332,9 @@ box-sizing: border-box;
 }
 
 .docs-topic-index h3 {
-  font-size: 140%;
+  font-size: 150%;
   font-weight: 300;
-  margin: 20px 0;
+  margin: 35px 0 25 0;
   padding: 0px;
 }
 
@@ -428,7 +428,7 @@ width: 100%;
   display: table;
   width: 100%;
   vertical-align: middle;
-  margin: 35px 0;
+  margin: 0;
   /* 
   border-top: 1px solid rgba(54, 85, 88, .3);
   margin: 60px 0 0 0;
@@ -439,10 +439,9 @@ width: 100%;
 .docs-topic-navigation div {
   display: table-cell;
   width: 50%;
-  height: 10px;
   max-width: 50%;
   text-align: center;
-  vertical-align: middle;
+  vertical-align: top;
   padding: 10px;
   /* 
     height: 40px;
@@ -454,11 +453,11 @@ width: 100%;
   border: 0px;
   color: #e6eaea; 
   background-color: #365558;
-  padding: 5px;
-  margin: 0 0 0 10px;
+  padding: 10px;
+  margin: 0 0 10 10px;
   font-size: 100%;
   line-height: 150%;
-  width: 100%;
+  width: 150px;
   height:100%;
 }
 
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
index bb629bd2e..d4d884af2 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js
@@ -171,15 +171,19 @@ function newSuperalgosDocsDocumentPage() {
 
                 HTML = HTML = HTML + '<div class="docs-topic-index">' // Container for Topic Navigation including buttons, title and index
 
-                /* Topic Title */
+                /* Topic Title 
+
                 titleLabel = thisObject.docsSchemaDocument.topic + ' Topic Navigation'
                 HTML = HTML + '<div id="docs-main-title-div" class="docs-title-table"><div class="docs-table-cell"><h2 class="docs-h2" id="' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.type.toLowerCase().replace(' ', '-') + '" > ' + titleLabel + '</h2></div><div id="projectImageDiv" class="docs-image-container"/></div></div>'
 
+                */
                 generateTopicPreviousAndNextPageNavigation()
 
                 /* TOC*/
 
-                HTML = HTML + '<h3 class="docs-h3"> Table of Contents</h3>'
+                HTML = HTML + '<h3 class="docs-h3">' + thisObject.docsSchemaDocument.topic + ' Table of Contents</h3>'
+
+                HTML = HTML + '<p style="margin-bottom: 15px;">You just read page <strong>' + thisObject.docsSchemaDocument.pageNumber + '</strong> in the series.</p>'
 
                 generateTopicMultiPageIndex()
 
@@ -307,15 +311,13 @@ function newSuperalgosDocsDocumentPage() {
                         previousPage = orderedTopicPageIndexArray[i - 1]
                         nextPage = orderedTopicPageIndexArray[i + 1]
 
-                        HTML = HTML + '<p>You just read page <strong>' + thisObject.docsSchemaDocument.pageNumber + '</strong> in the series. Click the buttons below for the previous and next pages...</p>'
-
                         HTML = HTML + '<div class="docs-topic-navigation"><div>'
                         if (previousPage !== undefined) {
-                            HTML = HTML + '<span" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + previousPage.type.replace(/'/g, 'AMPERSAND') + '\')"><button>' + previousPage.type + '</button></span><br/>&#8592;'
+                            HTML = HTML + '<span" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + previousPage.type.replace(/'/g, 'AMPERSAND') + '\')"><button> &#8592; Previous </button></span><br/>'+ previousPage.type
                         }
                         HTML = HTML + '</div><div>'
                         if (nextPage !== undefined) {
-                            HTML = HTML + '<span" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + nextPage.type.replace(/'/g, 'AMPERSAND') + '\')"><button>' + nextPage.type + '</button></span><br/>&#8594;'
+                            HTML = HTML + '<span" onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.currentDocumentBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + nextPage.type.replace(/'/g, 'AMPERSAND') + '\')"><button> Next &#8594;</button></span><br/>' + nextPage.type
                         }
                         HTML = HTML + '</div></div>'
                         return