From 80f17010c0c9ca07a18e33481cea14f464673809 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 16 Dec 2020 14:57:38 +0100
Subject: [PATCH] Search page

---
 Client/WebServer/css/docs.css                 | 23 +++++-
 .../UI/Spaces/Docs-Space/DocsSpace.js         | 71 ++++++++++---------
 2 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index a63f2a6f0..7326a3c79 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -18,7 +18,7 @@ line-height: 150%;
 margin: 20 20 20 30px;
 }
 
-.docs-normal-font {
+.docs-font-normal {
 font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
 color: #111; 
 line-height: 150%;
@@ -465,9 +465,26 @@ border-spacing: 1px;
 
 /* Search Page */
 .docs-image-logo-search {
-width: 300 px;
+margin: auto;
+margin-top: 225px;
+margin-bottom: 25px;
 }
 
 .docs-search-box {
-  width: 500 px;
+  width: 700px;
+  height: 60px;
+  margin-top: 50px;
+  margin-bottom: 600px;
+  border-radius: 30px;
+  border: 1px solid #dedede;
 }
+
+.docs-search-input {
+  width: 600px;
+  height: 60px;
+  font: 400 25px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
+  color: #6b6b6b; 
+  line-height: 200%;
+  border: none;
+  outline: none;
+  }
\ No newline at end of file
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index d3ec88d16..fa35fa7c6 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -513,8 +513,9 @@ function newSuperalgosDocSpace() {
     }
 
     function renderSearchPage() {
-        HTML = HTML + '<div id="docs-main-title-div"><img src="Images/superalgos-logo.png" class="docs-image-logo-search">'
-        HTML = HTML + '<input class="docs-search-box"></input>' 
+        let HTML = ''
+        HTML = HTML + '<div id="docs-main-title-div"><center><img src="Images/superalgos-logo.png" class="docs-image-logo-search" width=400></center>'
+        HTML = HTML + '<center><div class="docs-font-normal docs-search-box"><input class="docs-search-input"></input></div></center>' 
         HTML = HTML + '</div>' 
         let docsSpaceDiv = document.getElementById('docs-space-div')
         docsSpaceDiv.innerHTML = HTML + addFooter()
@@ -614,7 +615,7 @@ function newSuperalgosDocSpace() {
                 HTML = HTML + '<div id="definitionImageDiv" class="docs-image-container"/>'
                 HTML = HTML + '</td>'
                 HTML = HTML + '<td>'
-                HTML = HTML + '<div id="definition-paragraph" class="docs-normal-font"><strong>' + addToolTips(nodeDocsDefinition.definition) + '</strong></div>'
+                HTML = HTML + '<div id="definition-paragraph" class="docs-font-normal"><strong>' + addToolTips(nodeDocsDefinition.definition) + '</strong></div>'
                 HTML = HTML + '</td>'
                 HTML = HTML + '</tr>'
                 HTML = HTML + '</table>'
@@ -1477,41 +1478,41 @@ function newSuperalgosDocSpace() {
                     // nothing to do here
                 }
             }
-
-            function addFooter() {
-                let HTML = ''
-
-                HTML = HTML + '<div class="docs-node-html-footer-container">' // Container Starts
-
-                HTML = HTML + '<hr class="docs-shaded"></hr>'
-                HTML = HTML + '<footer>'
-                HTML = HTML + '<div class="docs-footer-row">'
-                HTML = HTML + '<div class="docs-footer-body" style="text-align: left;">'
-
-                HTML = HTML + '<div onClick="UI.projects.superalgos.spaces.docsSpace.scrollToElement(\'docs-main-title-div\')" class="docs-plain-link"><kbd class=docs-kbd>BACK TO TOP ↑</kbd></div>'
-
-                HTML = HTML + '<ul>'
-                HTML = HTML + '<li><a href="https://superalgos.org/" target="_blank" class="docs-footer-link">Superalgos Project</a> — Learn more about the project.</li>'
-                HTML = HTML + '<li><a href="https://t.me/superalgoscommunity" rel="nofollow" target="_blank" class="docs-footer-link">Community Group</a> — Lets talk Superalgos!</li>'
-                HTML = HTML + '<li><a href="https://t.me/superalgossupport" rel="nofollow" target="_blank" class="docs-footer-link">Support Group</a> — Need help using the <code class="docs-code">master</code> branch?</li>'
-                HTML = HTML + '<li><a href="https://t.me/superalgosdevelop" rel="nofollow" target="_blank" class="docs-footer-link">Develop Group</a> — Come test the <code class="docs-code">develop</code> branch!</li>'
-                HTML = HTML + '<li><a href="https://t.me/superalgosuxui" rel="nofollow" target="_blank" class="docs-footer-link">UX/UI Design Group</a> — Help us improve the GIU!</li>'
-                HTML = HTML + '<li><a href="https://t.me/superalgos_es" rel="nofollow" target="_blank" class="docs-footer-link">Grupo en Español</a> — Hablemos en español!</li>'
-                HTML = HTML + '<li><a href="https://t.me/superalgos" rel="nofollow" target="_blank" class="docs-footer-link">Superalgos Announcements</a> — Be the first to know about new releases, hotfixes, and important issues.</li>'
-                HTML = HTML + '</ul>'
-                HTML = HTML + '<img src="Images/superalgos-logo.png" width="200 px">'
-
-                HTML = HTML + '</div>'
-                HTML = HTML + '</div>'
-                HTML = HTML + '</footer>'
-
-                HTML = HTML + '</div>' // Container Ends
-
-                return HTML
-            }
         }
     }
 
+    function addFooter() {
+        let HTML = ''
+
+        HTML = HTML + '<div class="docs-node-html-footer-container">' // Container Starts
+
+        HTML = HTML + '<hr class="docs-shaded"></hr>'
+        HTML = HTML + '<footer>'
+        HTML = HTML + '<div class="docs-footer-row">'
+        HTML = HTML + '<div class="docs-footer-body" style="text-align: left;">'
+
+        HTML = HTML + '<div onClick="UI.projects.superalgos.spaces.docsSpace.scrollToElement(\'docs-main-title-div\')" class="docs-plain-link"><kbd class=docs-kbd>BACK TO TOP ↑</kbd></div>'
+
+        HTML = HTML + '<ul>'
+        HTML = HTML + '<li><a href="https://superalgos.org/" target="_blank" class="docs-footer-link">Superalgos Project</a> — Learn more about the project.</li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgoscommunity" rel="nofollow" target="_blank" class="docs-footer-link">Community Group</a> — Lets talk Superalgos!</li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgossupport" rel="nofollow" target="_blank" class="docs-footer-link">Support Group</a> — Need help using the <code class="docs-code">master</code> branch?</li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgosdevelop" rel="nofollow" target="_blank" class="docs-footer-link">Develop Group</a> — Come test the <code class="docs-code">develop</code> branch!</li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgosuxui" rel="nofollow" target="_blank" class="docs-footer-link">UX/UI Design Group</a> — Help us improve the GIU!</li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgos_es" rel="nofollow" target="_blank" class="docs-footer-link">Grupo en Español</a> — Hablemos en español!</li>'
+        HTML = HTML + '<li><a href="https://t.me/superalgos" rel="nofollow" target="_blank" class="docs-footer-link">Superalgos Announcements</a> — Be the first to know about new releases, hotfixes, and important issues.</li>'
+        HTML = HTML + '</ul>'
+        HTML = HTML + '<img src="Images/superalgos-logo.png" width="200 px">'
+
+        HTML = HTML + '</div>'
+        HTML = HTML + '</div>'
+        HTML = HTML + '</footer>'
+
+        HTML = HTML + '</div>' // Container Ends
+
+        return HTML
+    }
+
     function parseGIF(text) {
         return '<img class="docs-gif" src="' + text + '">'
     }