Separate docs-nav into new component
Since same markup will be needed for desktop and mobile menus.
This commit is contained in:
		
							parent
							
								
									e01ab449cf
								
							
						
					
					
						commit
						958bfe6d25
					
				| @ -50,6 +50,7 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa | ||||
|   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl } from '@fortawesome/free-solid-svg-icons'; | ||||
| import { ApiDocsComponent } from './components/docs/api-docs.component'; | ||||
| import { DocsComponent } from './components/docs/docs.component'; | ||||
| import { ApiDocsNavComponent } from './components/docs/api-docs-nav.component'; | ||||
| import { CodeTemplateComponent } from './components/docs/code-template.component'; | ||||
| import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; | ||||
| import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component'; | ||||
| @ -101,6 +102,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; | ||||
|     SponsorComponent, | ||||
|     PushTransactionComponent, | ||||
|     DocsComponent, | ||||
|     ApiDocsNavComponent, | ||||
|   ], | ||||
|   imports: [ | ||||
|     BrowserModule.withServerTransition({ appId: 'serverApp' }), | ||||
|  | ||||
							
								
								
									
										63
									
								
								frontend/src/app/components/docs/api-docs-nav.component.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										63
									
								
								frontend/src/app/components/docs/api-docs-nav.component.html
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,63 @@ | ||||
| <p *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">General</p> | ||||
| <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-difficulty-adjustment">GET Difficulty Adjustment</a> | ||||
| 
 | ||||
| <p *ngIf="network.val === 'bisq'">Markets</p> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-currencies">GET Market Currencies</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-depth">GET Market Depth</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-hloc">GET Market HLOC</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-markets">GET Markets</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-offers">GET Market Offers</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-ticker">GET Market Ticker</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-trades">GET Market Trades</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-volumes">GET Market Volumes</a> | ||||
| 
 | ||||
| <p *ngIf="network.val === 'bisq'">General</p> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-stats">GET Stats</a> | ||||
| 
 | ||||
| <p>Addresses</p> | ||||
| <a [routerLink]="['./']" fragment="get-address">GET Address</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions">GET Address Transactions</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-chain">GET Address Transactions Chain</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-mempool">GET Address Transactions Mempool</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-utxo">GET Address UTXO</a> | ||||
| 
 | ||||
| <p *ngIf="network.val === 'liquid'">Assets</p> | ||||
| <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-assets">GET Assets</a> | ||||
| <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-transactions">GET Asset Transactions</a> | ||||
| <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-supply">GET Asset Supply</a> | ||||
| 
 | ||||
| <p>Blocks</p> | ||||
| <a [routerLink]="['./']" fragment="get-block">GET Block</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-header">GET Block Header</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-height">GET Block Height</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-raw">GET Block Raw</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-status">GET Block Status</a> | ||||
| <a [routerLink]="['./']" fragment="get-block-tip-height">GET Block Tip Height</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-tip-hash">GET Block Tip Hash</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-id">GET Block Transaction ID</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-ids">GET Block Transaction IDs</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transactions">GET Block Transactions</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a> | ||||
| 
 | ||||
| <p *ngIf="network.val !== 'bisq'">Fees</p> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-blocks-fees">GET Mempool Blocks Fees</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-recommended-fees">GET Recommended Fees</a> | ||||
| 
 | ||||
| <p *ngIf="network.val !== 'bisq'">Mempool</p> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool">GET Mempool</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-transaction-ids">GET Mempool Transaction IDs</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-recent">GET Mempool Recent</a> | ||||
| 
 | ||||
| <p>Transactions</p> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-cpfp">GET Children Pay for Parent</a> | ||||
| <a [routerLink]="['./']" fragment="get-transaction">GET Transaction</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-hex">GET Transaction Hex</a> | ||||
| <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-transaction-merkleblock-proof">GET Transaction Merkleblock Proof</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-merkle-proof">GET Transaction Merkle Proof</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspend">GET Transaction Outspend</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspends">GET Transaction Outspends</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-raw">GET Transaction Raw</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-status">GET Transaction Status</a> | ||||
| <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-transactions">GET Transactions</a> | ||||
| <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="post-transaction">POST Transaction</a> | ||||
							
								
								
									
										17
									
								
								frontend/src/app/components/docs/api-docs-nav.component.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										17
									
								
								frontend/src/app/components/docs/api-docs-nav.component.scss
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,17 @@ | ||||
| p { | ||||
|   color: #4a68b9; | ||||
|   font-weight: 700; | ||||
|   margin: 10px 0; | ||||
|   margin: 15px 0 10px 0; | ||||
| } | ||||
| 
 | ||||
| p:first-child { | ||||
|   margin-top: 0 | ||||
| } | ||||
| 
 | ||||
| a { | ||||
|   color: #fff; | ||||
|   text-decoration: none; | ||||
|   display: block; | ||||
|   margin: 5px 0; | ||||
| } | ||||
							
								
								
									
										17
									
								
								frontend/src/app/components/docs/api-docs-nav.component.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										17
									
								
								frontend/src/app/components/docs/api-docs-nav.component.ts
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,17 @@ | ||||
| import { Component, OnInit, Input } from '@angular/core'; | ||||
| 
 | ||||
| @Component({ | ||||
|   selector: 'app-api-docs-nav', | ||||
|   templateUrl: './api-docs-nav.component.html', | ||||
|   styleUrls: ['./api-docs-nav.component.scss'] | ||||
| }) | ||||
| export class ApiDocsNavComponent implements OnInit { | ||||
| 
 | ||||
|   @Input() network: any; | ||||
| 
 | ||||
|   constructor() { } | ||||
| 
 | ||||
|   ngOnInit(): void { | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| @ -4,71 +4,7 @@ | ||||
|     <div id="restAPI" *ngIf="restTabActivated"> | ||||
| 
 | ||||
|       <div class="doc-nav-desktop hide-on-mobile" [ngClass]="desktopDocsNavPosition"> | ||||
| 
 | ||||
|         <p *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">General</p> | ||||
|         <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-difficulty-adjustment">GET Difficulty Adjustment</a> | ||||
| 
 | ||||
|         <p *ngIf="network.val === 'bisq'">Markets</p> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-currencies">GET Market Currencies</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-depth">GET Market Depth</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-hloc">GET Market HLOC</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-markets">GET Markets</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-offers">GET Market Offers</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-ticker">GET Market Ticker</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-trades">GET Market Trades</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-volumes">GET Market Volumes</a> | ||||
| 
 | ||||
|         <p *ngIf="network.val === 'bisq'">General</p> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-stats">GET Stats</a> | ||||
| 
 | ||||
|         <p>Addresses</p> | ||||
|         <a [routerLink]="['./']" fragment="get-address">GET Address</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions">GET Address Transactions</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-chain">GET Address Transactions Chain</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-mempool">GET Address Transactions Mempool</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-utxo">GET Address UTXO</a> | ||||
| 
 | ||||
|         <p *ngIf="network.val === 'liquid'">Assets</p> | ||||
|         <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-assets">GET Assets</a> | ||||
|         <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-transactions">GET Asset Transactions</a> | ||||
|         <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-supply">GET Asset Supply</a> | ||||
| 
 | ||||
|         <p>Blocks</p> | ||||
|         <a [routerLink]="['./']" fragment="get-block">GET Block</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-header">GET Block Header</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-height">GET Block Height</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-raw">GET Block Raw</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-status">GET Block Status</a> | ||||
|         <a [routerLink]="['./']" fragment="get-block-tip-height">GET Block Tip Height</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-tip-hash">GET Block Tip Hash</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-id">GET Block Transaction ID</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-ids">GET Block Transaction IDs</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transactions">GET Block Transactions</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a> | ||||
| 
 | ||||
|         <p *ngIf="network.val !== 'bisq'">Fees</p> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-blocks-fees">GET Mempool Blocks Fees</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-recommended-fees">GET Recommended Fees</a> | ||||
| 
 | ||||
|         <p *ngIf="network.val !== 'bisq'">Mempool</p> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool">GET Mempool</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-transaction-ids">GET Mempool Transaction IDs</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-recent">GET Mempool Recent</a> | ||||
| 
 | ||||
|         <p>Transactions</p> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-cpfp">GET Children Pay for Parent</a> | ||||
|         <a [routerLink]="['./']" fragment="get-transaction">GET Transaction</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-hex">GET Transaction Hex</a> | ||||
|         <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-transaction-merkleblock-proof">GET Transaction Merkleblock Proof</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-merkle-proof">GET Transaction Merkle Proof</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspend">GET Transaction Outspend</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspends">GET Transaction Outspends</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-raw">GET Transaction Raw</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-status">GET Transaction Status</a> | ||||
|         <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-transactions">GET Transactions</a> | ||||
|         <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="post-transaction">POST Transaction</a> | ||||
| 
 | ||||
|         <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav> | ||||
|       </div> | ||||
| 
 | ||||
|       <div class="doc-content"> | ||||
| @ -80,7 +16,7 @@ | ||||
|           <div #collapse="ngbCollapse" [(ngbCollapse)]="mobileMenuOpen"> | ||||
|             <div class="card"> | ||||
|               <div class="card-body"> | ||||
|                 <p>Placeholder.</p> | ||||
|                 <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|  | ||||
| @ -102,23 +102,6 @@ li.nav-item { | ||||
|   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: calc(100% - 330px); | ||||
|   float: right; | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user