From 587eb612e3c56639efbbeb7e5dfabecd003efa63 Mon Sep 17 00:00:00 2001
From: Julian Molina <julian@nomadinception.com>
Date: Wed, 16 Dec 2020 22:06:07 +0100
Subject: [PATCH] Search results html + css v1

---
 Client/WebServer/css/docs.css                 | 53 ++++++-------------
 .../UI/Spaces/Docs-Space/DocsSpace.js         | 47 ++++++++++------
 2 files changed, 46 insertions(+), 54 deletions(-)

diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index f88f7c8ba..5aaa94269 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -516,14 +516,9 @@ width: 100%;
   display: table;
   padding-left: 240px;
   margin-top: 20px;
-  border-bottom: 1px solid #dedede;
 }
 
 
-
-
-
-
 .docs-search-results-header-tabs-container > input {
   display: none;
 }
@@ -548,45 +543,29 @@ width: 100%;
   border-bottom:  3px solid #e44d40;
 }
 
-#docs-search-result-tab-all:checked ~ .docs-search-result-content #docs-search-result-content-all,
-#docs-search-result-tab-nodes:checked ~ .docs-search-result-content #docs-search-result-content-nodes,
-#docs-search-result-tab-concepts:checked ~ .docs-search-result-content #docs-search-result-content-concepts,
-#docs-search-result-tab-topics:checked ~ .docs-search-result-content #docs-search-result-content-topics,
-#docs-search-result-tab-projects:checked ~ .docs-search-result-content #docs-search-result-content-projects,
-#docs-search-result-tab-code:checked ~ .docs-search-result-content #docs-search-result-content-code,
-#docs-search-result-tab-configs:checked ~ .docs-search-result-content #docs-search-result-content-configs {
-  display: block;
-}
-
-
-
-
-
-
-.docs-search-results-header-tab {
-  display: table-cell;
-  vertical-align: bottom;
-  padding: 0 15px 5px 15px;
-  color: #333;
-  font-size: 90%;
-}
-
-.docs-search-results-header-tab-selected {
-  color: #e44d40;
-  padding-bottom: 2px;
-  border-bottom:  3px solid #e44d40;
-}
-
 /* Search Results Page Content */
 
-
-
-/* Search Results Page Record */
+.docs-search-result-content {
+border-top: 1px solid #dedede;
+margin-left: -240px;
+}
 
 .docs-search-result-content > div {
   display: none;
 }
 
+#tab1:checked ~ .docs-search-result-content #content1,
+#tab2:checked ~ .docs-search-result-content #content2,
+#tab3:checked ~ .docs-search-result-content #content3,
+#tab4:checked ~ .docs-search-result-content #content4,
+#tab5:checked ~ .docs-search-result-content #content5,
+#tab6:checked ~ .docs-search-result-content #content6,
+#tab7:checked ~ .docs-search-result-content #content7 {
+  display: block;
+}
+
+/* Search Results Page Record */
+
 .docs-search-result-content-record-container {
   margin: 20px 0;
 }
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index 7bff44453..b7e87284e 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -527,7 +527,7 @@ function newSuperalgosDocSpace() {
     function renderSearchResultsPage() {
         let HTML = ''
 
-        // Header
+        // Logo & Search Box
 
         HTML = HTML + '<section id="docs-search-results-div" class="docs-node-html-page-container">'
         HTML = HTML + '<div class="docs-search-results-header">'
@@ -536,72 +536,85 @@ function newSuperalgosDocSpace() {
         HTML = HTML + '<input class="docs-search-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></input>'
         HTML = HTML + '</div>'
         HTML = HTML + '</div>'
+
+        // Tabs
+
         HTML = HTML + '<div class="docs-search-results-header-tabs-container">'
-        HTML = HTML + '<input id="docs-search-result-tab-all" type="radio" name="docs-results-tabs" checked=""><label for="docs-search-results-header-tab-all">All</label>'
-        HTML = HTML + '<input id="docs-search-result-tab-nodes" type="radio" name="docs-results-tabs"><label for="docs-search-results-header-tab-nodes">Nodes</label>'
-        HTML = HTML + '<input id="docs-search-result-tab-concepts" type="radio" name="docs-results-tabs"><label for="docs-search-results-header-tab-concepts">Concepts</label>'
-        HTML = HTML + '<input id="docs-search-result-tab-topics" type="radio" name="docs-results-tabs"><label for="docs-search-results-header-tab-topics">Topics</label>'
-        HTML = HTML + '<input id="docs-search-result-tab-projects" type="radio" name="docs-results-tabs"><label for="docs-search-results-header-tab-projects">Projects</label>'
-        HTML = HTML + '<input id="docs-search-result-tab-code" type="radio" name="docs-results-tabs"><label for="docs-search-results-header-tab-code">Code</label>'
-        HTML = HTML + '<input id="docs-search-result-tab-configs" type="radio" name="docs-results-tabs"><label for="docs-search-results-header-tab-configs">Configs</label>'
-        HTML = HTML + '</div>'
+        HTML = HTML + '<input id="tab1" type="radio" name="tabs" checked=""><label for="tab1">All</label>'
+        HTML = HTML + '<input id="tab2" type="radio" name="tabs"><label for="tab2">Nodes</label>'
+        HTML = HTML + '<input id="tab3" type="radio" name="tabs"><label for="tab3">Concepts</label>'
+        HTML = HTML + '<input id="tab4" type="radio" name="tabs"><label for="tab4">Topics</label>'
+        HTML = HTML + '<input id="tab5" type="radio" name="tabs"><label for="tab5">Projects</label>'
+        HTML = HTML + '<input id="tab6" type="radio" name="tabs"><label for="tab6">Code</label>'
+        HTML = HTML + '<input id="tab7" type="radio" name="tabs"><label for="tab7">Configs</label>'
 
         // Results
 
+        HTML = HTML + '<div class="docs-search-result-content">'
+
         // All Tab
 
-        HTML = HTML + '<div class="docs-search-result-content">'
-        HTML = HTML + '<div id="docs-search-result-content-all">'
+        HTML = HTML + '<div id="content1">'
+
         HTML = HTML + '<div class="docs-search-result-content-record-container">'
         HTML = HTML + '<p class="docs-search-result-content-record-project-category">Superalgos > Node</p>'
         HTML = HTML + '<p><a class="docs-search-result-content-record-title" href="data-storage.html">Data Storage</a></p>'
         HTML = HTML + '<p class="docs-search-result-content-record-extract">The data storage node holds the definitions as to what data is stored in the corresponding network node.</p>'
         HTML = HTML + '</div>'
+
         HTML = HTML + '<div class="docs-search-result-content-record-container">'
         HTML = HTML + '<p class="docs-search-result-content-record-project-category">Superalgos > Node</p>'
         HTML = HTML + '<p><a class="docs-search-result-content-record-title" href="data-mines-data.html">Data Mines Data</a></p>'
         HTML = HTML + '<p class="docs-search-result-content-record-extract">Session independent data refers to data generated by sensors and indicators, not related to trading sessions.</p>'
         HTML = HTML + '</div>'
-        HTML = HTML + '</div>'
+
         HTML = HTML + '<div class="docs-search-result-content-record-container">'
         HTML = HTML + '<p class="docs-search-result-content-record-project-category">Superalgos > Node</p>'
         HTML = HTML + '<p><a class="docs-search-result-content-record-title" href="trading-mines-data.html">Trading Mines Data</a></p>'
         HTML = HTML + '<p class="docs-search-result-content-record-extract">Session-based data refers to data that is generated as a consequence of running a trading session, that is, data the trading bot instance generates while running backtesting, paper trading, forward testing, or live trading sessions.</p>'
         HTML = HTML + '</div>'
+
         HTML = HTML + '<div class="docs-search-result-content-record-container">'
         HTML = HTML + '<p class="docs-search-result-content-record-project-category">Ethereum > Topic</p>'
         HTML = HTML + '<p><a class="docs-search-result-content-record-title" href="blockchain-data-mining.html">Blockchain Data Mining</a></p>'
         HTML = HTML + '<p class="docs-search-result-content-record-extract">Mining data from the Ethereum blockchain requires running an Ethereum node. Superalgos interfaces with the Ethereum blockchaing via...</p>'
         HTML = HTML + '</div>'
-        HTML = HTML + '</div>'
+
         HTML = HTML + '</div>'
 
         // Nodes Tab
 
-        HTML = HTML + '<div class="docs-search-result-content">'
-        HTML = HTML + '<div id="docs-search-result-content-nodes">'
+        HTML = HTML + '<div id="content2">'
+
         HTML = HTML + '<div class="docs-search-result-content-record-container">'
         HTML = HTML + '<p class="docs-search-result-content-record-project-category">Superalgos > Node</p>'
         HTML = HTML + '<p><a class="docs-search-result-content-record-title" href="data-storage.html">Data Storage</a></p>'
         HTML = HTML + '<p class="docs-search-result-content-record-extract">The data storage node holds the definitions as to what data is stored in the corresponding network node.</p>'
         HTML = HTML + '</div>'
+
         HTML = HTML + '<div class="docs-search-result-content-record-container">'
         HTML = HTML + '<p class="docs-search-result-content-record-project-category">Superalgos > Node</p>'
         HTML = HTML + '<p><a class="docs-search-result-content-record-title" href="data-mines-data.html">Data Mines Data</a></p>'
         HTML = HTML + '<p class="docs-search-result-content-record-extract">Session independent data refers to data generated by sensors and indicators, not related to trading sessions.</p>'
         HTML = HTML + '</div>'
-        HTML = HTML + '</div>'
+
         HTML = HTML + '<div class="docs-search-result-content-record-container">'
         HTML = HTML + '<p class="docs-search-result-content-record-project-category">Superalgos > Node</p>'
         HTML = HTML + '<p><a class="docs-search-result-content-record-title" href="trading-mines-data.html">Trading Mines Data</a></p>'
         HTML = HTML + '<p class="docs-search-result-content-record-extract">Session-based data refers to data that is generated as a consequence of running a trading session, that is, data the trading bot instance generates while running backtesting, paper trading, forward testing, or live trading sessions.</p>'
         HTML = HTML + '</div>'
+
+        HTML = HTML + '</div>'
+
+        // End Content
+
         HTML = HTML + '</div>'
         HTML = HTML + '</div>'
 
-
+        // End Section
 
         HTML = HTML + '</section>'
+
         let docsSpaceDiv = document.getElementById('docs-space-div')
         docsSpaceDiv.innerHTML = HTML + addFooter()
         detectEnterOnSearchBox()