Add links and styling to fixed desktop docs nav

This commit is contained in:
hunicus 2021-12-15 22:55:29 -05:00
parent 3ae46e6ba1
commit 1a8fd23b05
No known key found for this signature in database
GPG Key ID: 24837C51B6D81FD9
2 changed files with 101 additions and 3 deletions

View File

@ -4,7 +4,71 @@
<div id="restAPI" *ngIf="restTabActivated">
<div class="doc-nav-desktop" [ngClass]="docsNavPosition">
Placeholder.
<p *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">General</p>
<a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" href="#">GET Difficulty Adjustment</a>
<p *ngIf="network.val === 'bisq'">Markets</p>
<a *ngIf="network.val === 'bisq'" href="#">GET Market Currencies</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Market Depth</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Market HLOC</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Markets</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Market Offers</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Market Ticker</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Market Trades</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Market Volumes</a>
<p *ngIf="network.val === 'bisq'">General</p>
<a *ngIf="network.val === 'bisq'" href="#">GET Stats</a>
<p>Addresses</p>
<a href="#">GET Address</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Address Transactions</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Address Transactions Chain</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Address Transactions Mempool</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Address UTXO</a>
<p *ngIf="network.val === 'liquid'">Assets</p>
<a *ngIf="network.val === 'liquid'" href="#">GET Assets</a>
<a *ngIf="network.val === 'liquid'" href="#">GET Asset Transactions</a>
<a *ngIf="network.val === 'liquid'" href="#">GET Asset Supply</a>
<p>Blocks</p>
<a href="#">GET Block</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Header</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Height</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Raw</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Status</a>
<a href="#">GET Block Tip Height</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Tip Hash</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Transaction ID</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Transaction IDs</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Block Transactions</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Blocks</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Blocks</a>
<p *ngIf="network.val !== 'bisq'">Fees</p>
<a *ngIf="network.val !== 'bisq'" href="#">GET Mempool Blocks Fees</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Recommended Fees</a>
<p *ngIf="network.val !== 'bisq'">Mempool</p>
<a *ngIf="network.val !== 'bisq'" href="#">GET Mempool</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Mempool Transaction IDs</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Mempool Recent</a>
<p>Transactions</p>
<a *ngIf="network.val !== 'bisq'" href="#">GET Children Pay for Parent</a>
<a href="#">GET Transaction</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Hex</a>
<a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" href="#">GET Transaction Merkleblock Proof</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Merkle Proof</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Outspend</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Outspends</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Raw</a>
<a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Status</a>
<a *ngIf="network.val === 'bisq'" href="#">GET Transactions</a>
<a *ngIf="network.val !== 'bisq'" href="#">POST Transaction</a>
</div>
<div class="doc-content">

View File

@ -73,27 +73,61 @@ li.nav-item {
}
.doc-nav-desktop {
width: 25%;
width: 300px;
}
.doc-nav-desktop.relative {
float: left;
overflow: hidden;
}
.doc-nav-desktop.fixed {
float: unset;
position: fixed;
top: 20px;
overflow-y: auto;
height: calc(100vh - 50px);
scrollbar-color: #2d3348 #11131f;
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
background: #11131f;
}
::-webkit-scrollbar-thumb {
background-color: #2d3348;
border-radius: 5px;
border: none;
}
.doc-nav-desktop p {
color: #4a68b9;
font-weight: 700;
margin: 10px 0;
margin: 15px 0 10px 0;
}
.doc-nav-desktop p:first-child {
margin-top: 0
}
.doc-nav-desktop a {
color: #fff;
text-decoration: none;
display: block;
margin: 5px 0;
}
.doc-content {
width: 75%;
width: calc(100% - 330px);
float: right;
}
@media (max-width: 992px){
.doc-nav-desktop {
display: none;
height: auto;
}
.doc-content {