Tabs dynamics - WIP
This commit is contained in:
Julian Molina committed
1 parent
b351571b2e
commit
c0dfea2993
2 files changed
+214
-19
No files matched your search
+141
-16
@@ -480,28 +480,153 @@ 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";
|
||||
width: 95%;
|
||||
height: 45px;
|
||||
margin: 0 20px;
|
||||
font-size: 100%;
|
||||
color: #6b6b6b;
|
||||
line-height: 200%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Search Results Page */
|
||||
.docs-image-logo-search-results {
|
||||
margin: auto;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
margin-left: 25px;
|
||||
|
||||
/* Search Results Page Header*/
|
||||
|
||||
.docs-search-results-header {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.docs-image-logo-search-results {
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.docs-search-results-box {
|
||||
width: 700px;
|
||||
height: 60px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 100px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
height: 45px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #dedede;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.docs-search-results-header-tabs-container {
|
||||
display: table;
|
||||
padding-left: 240px;
|
||||
margin-top: 20px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.docs-search-results-header-tabs-container > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docs-search-results-header-tabs-container > label {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
padding: 0 15px 5px 15px;
|
||||
color: #333;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.docs-search-results-header-tabs-container > label:hover {
|
||||
color: #e44d40;
|
||||
padding-bottom: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.docs-search-results-header-tabs-container > input:checked + label {
|
||||
color: #e44d40;
|
||||
padding-bottom: 2px;
|
||||
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 > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docs-search-result-content-record-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.docs-search-result-content-record-container > p {
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.docs-search-result-content-record-project-category {
|
||||
font-size: 90%;
|
||||
color: #31708f;
|
||||
}
|
||||
|
||||
.docs-search-result-content-record-title {
|
||||
font-size: 120%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a:link.docs-search-result-content-record-title {
|
||||
text-decoration: none;
|
||||
color: #e44d40;
|
||||
}
|
||||
|
||||
a:visited.docs-search-result-content-record-title {
|
||||
text-decoration: none;
|
||||
color: #fd6a33;
|
||||
}
|
||||
|
||||
a:hover.docs-search-result-content-record-title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active.docs-search-result-content-record-title {
|
||||
text-decoration: none;
|
||||
color: #fd6a33;
|
||||
}
|
||||
|
||||
.docs-search-result-content-record-extract {
|
||||
font-size: 100%;
|
||||
color: #333;
|
||||
margin-top: 5px!important;
|
||||
}
|
||||
|
||||
@@ -526,12 +526,82 @@ function newSuperalgosDocSpace() {
|
||||
|
||||
function renderSearchResultsPage() {
|
||||
let HTML = ''
|
||||
HTML = HTML + '<div id="docs-search-results-div">'
|
||||
HTML = HTML + '<img src="Images/superalgos-logo.png" class="docs-image-logo-search-results" width=200>'
|
||||
HTML = HTML + '<div class="docs-font-normal docs-search-results-box">'
|
||||
|
||||
// Header
|
||||
|
||||
HTML = HTML + '<section id="docs-search-results-div" class="docs-node-html-page-container">'
|
||||
HTML = HTML + '<div class="docs-search-results-header">'
|
||||
HTML = HTML + '<div class="docs-image-logo-search-results"><img src="Images/superalgos-logo.png" width=200></div>'
|
||||
HTML = HTML + '<div class="docs-search-results-box">'
|
||||
HTML = HTML + '<input class="docs-search-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></input>'
|
||||
HTML = HTML + '</div>'
|
||||
HTML = HTML + '</div>'
|
||||
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>'
|
||||
|
||||
// Results
|
||||
|
||||
// All Tab
|
||||
|
||||
HTML = HTML + '<div class="docs-search-result-content">'
|
||||
HTML = HTML + '<div id="docs-search-result-content-all">'
|
||||
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 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>'
|
||||
HTML = HTML + '</div>'
|
||||
|
||||
|
||||
|
||||
HTML = HTML + '</section>'
|
||||
let docsSpaceDiv = document.getElementById('docs-space-div')
|
||||
docsSpaceDiv.innerHTML = HTML + addFooter()
|
||||
detectEnterOnSearchBox()
|
||||
|
||||
Reference in new issue
Block a user