Topics TOC and more

Client/WebServer/css/docs.css

@@ -291,17 +291,53 @@ box-sizing: border-box;
 }
 
 .docs-callout {
+  background-color:white;
 padding: 20px;
 margin: 20px 0;
-border: 1px solid #eee;
+border: 1px solid rgba(188, 214, 67, .5);
 border-left-width: 5px;
 border-radius: 3px;
 border-left-color: #bcd643;
-font-weight: 500;
+font-weight: 550 !important;
 width: 100%;
 box-sizing: border-box;
 }
 
+.docs-topic-index {
+background-color:white;
+padding: 0 20 20 20px;
+margin: 20px 0;
+border: 1px solid rgba(49, 112, 143, .2);
+border-left-width: 5px;
+border-radius: 5px;
+border-left-color: #365558;
+width: 100%;
+box-sizing: border-box;
+}
+
+.docs-topic-index h3 {
+  font-size: 100%;
+  font-weight: 300;
+  margin: 0px;
+  padding: 0px;
+}
+
+.docs-topic-index p {
+  font-size: 100%;
+  padding: 0px;
+  margin: 2px 0;
+}
+
+.docs-topic-index a {
+  color: #365558;
+}
+
+.docs-topic-index a:hover {
+  text-decoration: underline;
+  cursor: pointer;
+  color: #0295aa;
+}
+
 .docs-summary {
 font-size:120%;
 color: #808080;
@@ -381,7 +417,7 @@ width: 100%;
 }
 
 .docs-footer-cell {
-  padding: 0 15px 40px 15px;
+  padding: 10px 15px 0px 15px;
   display: table-cell;
   width: 33%;
 }
@@ -402,6 +438,7 @@ width: 100%;
   background-color: transparent;
   color: e6eaea;
   padding: 10px;
+  margin: 0px;
 }
 
 #docs-footer button:hover {
@@ -703,21 +740,21 @@ width: 100%;
 .docs-search-results-header-tabs-container > label {
   display: inline-block; 
   vertical-align: bottom;
-  padding: 0 15px 5px 15px;
+  padding: 0 15px 3px 15px;
   color: #365558;
   font-size: 90%;
 }
 
 .docs-search-results-header-tabs-container > label:hover {
   color: #0295aa;
-  padding-bottom: 5px;
+  padding-bottom: 3px;
   cursor: pointer;
 }
 
 .docs-search-results-header-tabs-container > input:checked + label {
   color: #0295aa;
   padding-bottom: 2px;
-  border-bottom:  5px solid #0295aa;
+  border-bottom:  3px solid #0295aa;
 }
 
 /* Search Results Page Content */
@@ -798,15 +835,7 @@ a:active.docs-search-result-content-record-title {
   margin-top: 5px!important;
 }
 
-.docs-topic-index-link {
-  font-size: 80%;
-  color: #31708f;
-}
 
-a:hover.docs-topic-index-link {
-  text-decoration: underline;
-  cursor: pointer;
-}
 
 /* Command Results Page Content */
 .docs-command-result-content {

Projects/Superalgos/Schemas/Docs-Nodes/trading-strategy.json

@@ -13,7 +13,7 @@
             "text": "The definition of a strategy may be analyzed in three sections:"
         },
         {
-            "style": "Success",
+            "style": "Callout",
             "text": "A strategy is a set of actions occurring in stages"
         },
         {
@@ -41,7 +41,7 @@
             "text": "While stages are played in a sequence, upon execution there are overlaps. That is, a stage doesn't need to be closed for the next stage to be opened. The framework sets a clear separation of the concepts embodied in each stage to facilitate the process of defining and developing a trading system. But the truth is that, both at the conceptual level and during execution, the lines between stages are rather blurry."
         },
         {
-            "style": "Success",
+            "style": "Callout",
             "text": "designed to achieve a specific goal within a broader plan"
         },
         {
@@ -61,7 +61,7 @@
             "text": "In other words, the infrastructure provided by Superalgos enables the hyperspecialization of strategies. Do not aim to trade in all sorts of market situations with the same strategy. Instead, develop a strategy for each market situation you wish to trade."
         },
         {
-            "style": "Success",
+            "style": "Callout",
             "text": "via taking and managing positions"
         },
         {

Projects/Superalgos/Schemas/Docs-Nodes/tutorial.json

@@ -9,7 +9,7 @@
             "text": "Content"
         },
         {
-            "style": "Text",
+            "style": "Callout",
             "text": "Nodes in the hierarchy may be arranged freely, meaning that there may be as many tutorial topics and tutorial steps as desired. In general terms, all types of nodes behave similarly in the sense that each node, independently of the precise type, represents a tutorial step in and of itself. There are subtle differences to be covered where appropriate."
         },
         {

Projects/Superalgos/UI/Spaces/Docs-Space/DocumentPage.js

@@ -195,8 +195,11 @@ function newSuperalgosDocsDocumentPage() {
                 let key = 'auto-generated-index-paragraph-' + autoGeneratedParagraphIndex
                 let paragraph = {
                     style: "Title",
-                    text: "" + docsSchemaDocument.topic + " Topic Index"
+                    text: "<h3>" + docsSchemaDocument.topic + " TOC</H3>"
                 }
+
+                HTML = HTML = HTML + '<div class="docs-topic-index">' // Container for title and index
+
                 renderParagraph(paragraph, key)
                 autoGeneratedParagraphIndex++
 
@@ -236,8 +239,10 @@ function newSuperalgosDocsDocumentPage() {
                         text: "" + arrayItem.pageNumber + '. ' + arrayItem.type + ""
                     }
                     autoGeneratedParagraphIndex++
-                    HTML = HTML + '<p><a onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.objectBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + arrayItem.type.replace(/'/g, 'AMPERSAND') + '\')" class="docs-topic-index-link">' + paragraph.text + '</a></p>'
+                    HTML = HTML + '<p><a onClick="UI.projects.superalgos.spaces.docsSpace.navigateTo(\'' + UI.projects.superalgos.spaces.docsSpace.objectBeingRendered.project + '\', \'' + 'Topic' + '\', \'' + arrayItem.type.replace(/'/g, 'AMPERSAND') + '\')">' + paragraph.text + '</a></p>'
                 }
+
+                HTML = HTML = HTML + '</div>'  // END Container for title and index
             }
 
             function addContent() {