From 04de443e5837ee9a82b771bcd6f53ee3c1aaa218 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 13 Dec 2020 16:17:10 +0100
Subject: [PATCH] Table Style

---
 Client/WebServer/css/docs.css                 | 37 +++++++++++++++++++
 .../UI/Spaces/Docs-Space/DocsSpace.js         | 33 +++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index ca5eab277..94f6901eb 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -395,4 +395,41 @@ outline: none;
 font-size: 125%;
 vertical-align: middle;
 min-height: 80px;
+}
+
+/* Info Tables */
+.docs-info-table {
+background-color: transparent;
+max-width: 100%;
+margin-bottom: 20px;
+margin-top: 20px;
+border: 1px solid #dedede;
+border-spacing: 0px;
+}
+
+.docs-info-table > thead > tr > th,
+.docs-info-table > tbody > tr > th,
+.docs-info-table > tfoot > tr > th,
+.docs-info-table > thead > tr > td,
+.docs-info-table > tbody > tr > td,
+.docs-info-table > tfoot > tr > td {
+padding: 8px;
+line-height: 150%;
+vertical-align: top;
+}
+
+.docs-info-table > thead > tr > th {
+vertical-align: middle;
+text-transform: none;
+background-color: #333;
+color: white;
+text-align: left;
+}
+
+.docs-info-table > tbody > tr > td {
+border-top: 1px solid #dedede;
+}
+
+.docs-info-table-alt-bg td {
+background-color: #f9f9f9;
 }
\ 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 660bd152a..a47cb0b09 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -523,6 +523,39 @@ function newSuperalgosDocSpace() {
                 HTML = HTML + '</table>'
             }
 
+
+            HTML = HTML + '<table class="docs-info-table">'
+            HTML = HTML + '<thead>'
+            HTML = HTML + '<tr>'
+            HTML = HTML + '<th>Support Properties</th>'
+            HTML = HTML + '<th>Possible Values of (i)</th>'
+            HTML = HTML + '<th>Comments</th>'
+            HTML = HTML + '</tr>'
+            HTML = HTML + '</thead>'
+            HTML = HTML + '<tbody>'
+            HTML = HTML + '<tr>'
+            HTML = HTML + '<td>support(i)Rate</td>'
+            HTML = HTML + '<td>1 to 5</td>'
+            HTML = HTML + '<td>The reference rate of the level.</td>'
+            HTML = HTML + '</tr>'
+            HTML = HTML + '<tr class="docs-info-table-alt-bg">'
+            HTML = HTML + '<td>support(i)Period</td>'
+            HTML = HTML + '<td>1 to 5</td>'
+            HTML = HTML + '<td>The number of periods the level has been in existence.</td>'
+            HTML = HTML + '</tr>'
+            HTML = HTML + '<tr>'
+            HTML = HTML + '<td>support(i)Bounce1</td>'
+            HTML = HTML + '<td>1 to 5</td>'
+            HTML = HTML + '<td>The number of bounces for zone 1, the one rendered on-screen.</td>'
+            HTML = HTML + '</tr>'
+            HTML = HTML + '<tr class="docs-info-table-alt-bg">'
+            HTML = HTML + '<td>support(i)Bounce2</td>'
+            HTML = HTML + '<td>1 to 3</td>'
+            HTML = HTML + '<td>The number of bounces for zone 2, only available for the first three levels. Zone 2 is two times bigger than zone 1.</td>'
+            HTML = HTML + '</tr>'
+            HTML = HTML + '</tbody>'
+            HTML = HTML + '</table>'
+
             HTML = HTML + '<div id="docs-content">'
 
             let paragraphIndex = 0