Merge pull request #1027 from hunicus/change-docs-layout

Revamp docs layout

frontend/cypress/integration/bisq/bisq.spec.ts

@@ -59,9 +59,8 @@ describe('Bisq', () => {
             cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(5) > a').click().then(() => {
-                cy.get('.card').should('have.length.at.least', 1);
+                cy.get('.section-header').should('have.length.at.least', 1);
-                cy.get('.card').first().click();
+                cy.get('.endpoint-container').should('have.length.at.least', 1);
-                cy.get('.card-body');
             });
         });
 

frontend/src/app/app.module.ts

@@ -48,9 +48,10 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook } from '@fortawesome/free-solid-svg-icons';
+  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';
@@ -59,6 +60,7 @@ import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { SponsorComponent } from './components/sponsor/sponsor.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
@@ -102,6 +104,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
     SponsorComponent,
     PushTransactionComponent,
     DocsComponent,
+    ApiDocsNavComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -111,6 +114,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
     BrowserAnimationsModule,
     InfiniteScrollModule,
     NgbTypeaheadModule,
+    NgbModule,
     FontAwesomeModule,
     SharedModule,
     NgxEchartsModule.forRoot({
@@ -161,5 +165,6 @@ export class AppModule {
     library.addIcons(faAngleRight);
     library.addIcons(faAngleLeft);
     library.addIcons(faBook);
+    library.addIcons(faListUl);
   }
 }

frontend/src/app/components/docs/api-docs-nav.component.html

@@ -0,0 +1,74 @@
+<ng-template [ngIf]="network.val !== 'bisq' && network.val !== 'liquid'">
+  <p>General</p>
+  <a [routerLink]="['./']" fragment="get-difficulty-adjustment" (click)="collapseItem.toggle()">GET Difficulty Adjustment</a>
+</ng-template>
+
+<ng-template [ngIf]="network.val === 'bisq'">
+  <p>Markets</p>
+  <a [routerLink]="['./']" fragment="get-market-currencies" (click)="collapseItem.toggle()">GET Market Currencies</a>
+  <a [routerLink]="['./']" fragment="get-market-depth" (click)="collapseItem.toggle()">GET Market Depth</a>
+  <a [routerLink]="['./']" fragment="get-market-hloc" (click)="collapseItem.toggle()">GET Market HLOC</a>
+  <a [routerLink]="['./']" fragment="get-markets" (click)="collapseItem.toggle()">GET Markets</a>
+  <a [routerLink]="['./']" fragment="get-market-offers" (click)="collapseItem.toggle()">GET Market Offers</a>
+  <a [routerLink]="['./']" fragment="get-market-ticker" (click)="collapseItem.toggle()">GET Market Ticker</a>
+  <a [routerLink]="['./']" fragment="get-market-trades" (click)="collapseItem.toggle()">GET Market Trades</a>
+  <a [routerLink]="['./']" fragment="get-market-volumes" (click)="collapseItem.toggle()">GET Market Volumes</a>
+</ng-template>
+
+<ng-template [ngIf]="network.val === 'bisq'">
+  <p>General</p>
+  <a [routerLink]="['./']" fragment="get-stats" (click)="collapseItem.toggle()">GET Stats</a>
+</ng-template>
+
+<p>Addresses</p>
+<a [routerLink]="['./']" fragment="get-address" (click)="collapseItem.toggle()">GET Address</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions" (click)="collapseItem.toggle()">GET Address Transactions</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-chain" (click)="collapseItem.toggle()">GET Address Transactions Chain</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-mempool" (click)="collapseItem.toggle()">GET Address Transactions Mempool</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-utxo" (click)="collapseItem.toggle()">GET Address UTXO</a>
+
+<ng-template [ngIf]="network.val === 'liquid'">
+  <p>Assets</p>
+  <a [routerLink]="['./']" fragment="get-assets" (click)="collapseItem.toggle()">GET Assets</a>
+  <a [routerLink]="['./']" fragment="get-asset-transactions" (click)="collapseItem.toggle()">GET Asset Transactions</a>
+  <a [routerLink]="['./']" fragment="get-asset-supply" (click)="collapseItem.toggle()">GET Asset Supply</a>
+</ng-template>
+
+<p>Blocks</p>
+<a [routerLink]="['./']" fragment="get-block" (click)="collapseItem.toggle()">GET Block</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-header" (click)="collapseItem.toggle()">GET Block Header</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-height" (click)="collapseItem.toggle()">GET Block Height</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-raw" (click)="collapseItem.toggle()">GET Block Raw</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-status" (click)="collapseItem.toggle()">GET Block Status</a>
+<a [routerLink]="['./']" fragment="get-block-tip-height" (click)="collapseItem.toggle()">GET Block Tip Height</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-tip-hash" (click)="collapseItem.toggle()">GET Block Tip Hash</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-id" (click)="collapseItem.toggle()">GET Block Transaction ID</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-ids" (click)="collapseItem.toggle()">GET Block Transaction IDs</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transactions" (click)="collapseItem.toggle()">GET Block Transactions</a>
+<a [routerLink]="['./']" fragment="get-blocks" (click)="collapseItem.toggle()">GET Blocks</a>
+
+<ng-template [ngIf]="network.val !== 'bisq'">
+  <p>Fees</p>
+  <a [routerLink]="['./']" fragment="get-mempool-blocks-fees" (click)="collapseItem.toggle()">GET Mempool Blocks Fees</a>
+  <a [routerLink]="['./']" fragment="get-recommended-fees" (click)="collapseItem.toggle()">GET Recommended Fees</a>
+</ng-template>
+
+<ng-template [ngIf]="network.val !== 'bisq'">
+  <p>Mempool</p>
+  <a [routerLink]="['./']" fragment="get-mempool" (click)="collapseItem.toggle()">GET Mempool</a>
+  <a [routerLink]="['./']" fragment="get-mempool-transaction-ids" (click)="collapseItem.toggle()">GET Mempool Transaction IDs</a>
+  <a [routerLink]="['./']" fragment="get-mempool-recent" (click)="collapseItem.toggle()">GET Mempool Recent</a>
+</ng-template>
+
+<p>Transactions</p>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-cpfp" (click)="collapseItem.toggle()">GET Children Pay for Parent</a>
+<a [routerLink]="['./']" fragment="get-transaction" (click)="collapseItem.toggle()">GET Transaction</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-hex" (click)="collapseItem.toggle()">GET Transaction Hex</a>
+<a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-transaction-merkleblock-proof" (click)="collapseItem.toggle()">GET Transaction Merkleblock Proof</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-merkle-proof" (click)="collapseItem.toggle()">GET Transaction Merkle Proof</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspend" (click)="collapseItem.toggle()">GET Transaction Outspend</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspends" (click)="collapseItem.toggle()">GET Transaction Outspends</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-raw" (click)="collapseItem.toggle()">GET Transaction Raw</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-status" (click)="collapseItem.toggle()">GET Transaction Status</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-transactions" (click)="collapseItem.toggle()">GET Transactions</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="post-transaction" (click)="collapseItem.toggle()">POST Transaction</a>

frontend/src/app/components/docs/api-docs-nav.component.scss

@@ -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;
+}

frontend/src/app/components/docs/api-docs-nav.component.ts

@@ -0,0 +1,18 @@
+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;
+  @Input() collapseItem: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/docs/api-docs.component.scss

@@ -22,6 +22,10 @@ li.nav-item {
   }
 }
 
+.no-bottom-space {
+  margin-bottom: 0;
+}
+
 .nav-tabs .nav-link.active {
   border-bottom: 1px solid #fff;
   @media (min-width: 676px){
@@ -72,10 +76,131 @@ li.nav-item {
   padding: 15px;
 }
 
-#restAPI .api-category {
+#doc-nav-desktop {
-  margin: 30px 0;
+  width: 300px;
 }
 
-.api-category h4 {
+#doc-nav-desktop.relative {
-  margin-bottom: 15px;
+  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-content {
+  width: calc(100% - 330px);
+  float: right;
+}
+
+.endpoint-container:before {
+	display: block;
+ 	content: " ";
+  height: 1px;
+  margin-top: -1px;
+  visibility: hidden;
+}
+
+.endpoint-container .section-header {
+  display: block;
+  background-color: #2d3348;
+  color: #1bd8f4;
+  padding: 1rem 1.3rem 1rem 1.3rem;
+  font-weight: bold;
+  border-radius: 0.25rem;
+  margin: 20px 0 20px 0;
+  font-size: 24px;
+  position: relative;
+}
+.endpoint-container .section-header:hover {
+  text-decoration: none;
+}
+
+.endpoint-container .section-header span {
+  color: #fff;
+  background-color: #653b9c;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 400;
+  padding: 8px 10px;
+  letter-spacing: 1px;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  float: right;
+}
+
+#doc-nav-mobile {
+  position: fixed;
+  top: 20px;
+  width: calc(100% - 60px);
+  z-index: 100;
+}
+
+#doc-nav-mobile > div {
+  background-color: #2d3348;
+  z-index: 100;
+  border-radius: 0 0 0.5rem 0.5rem;
+  height: 55vh;
+  overflow-y: auto;
+}
+
+#doc-nav-mobile button {
+  width: 100%;
+  background-color: #105fb0;
+  color: #fff;
+  border-color: #105fb0;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+@media (max-width: 992px) {
+
+  .hide-on-mobile {
+    display: none;
+  }
+
+  .doc-content {
+    width: 100%;
+  }
+
+  .endpoint-container .section-header {
+    margin: 40px 0 70px 0;
+  }
+
+  .endpoint-container .section-header span {
+    float: none;
+    position: absolute;
+    top: unset;
+    left: 0;
+    bottom: -50px;
+  }
+
+  .endpoint-container:before {
+    height: 30px;
+    margin-top: -12px;
+  }
+
+}
+
+@media (min-width: 992px) {
+  .hide-on-desktop {
+    display: none;
+  }
 }

frontend/src/app/components/docs/api-docs.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
 import { Env, StateService } from 'src/app/services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
@@ -17,12 +17,26 @@ export class ApiDocsComponent implements OnInit {
   code: any;
   baseNetworkUrl = '';
   @Input() restTabActivated: Boolean;
+  @ViewChild( "mobileFixedApiNav", { static: false } ) mobileFixedApiNav: ElementRef;
+  desktopDocsNavPosition = "relative";
+  showFloatingDocsNav = false;
+  mobileMenuOpen = true;
 
   constructor(
     private stateService: StateService,
     private seoService: SeoService,
   ) { }
 
+  ngAfterViewInit() {
+    const that = this;
+    setTimeout( () => {
+      window.addEventListener('scroll', function() {
+        that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
+        that.showFloatingDocsNav = ( window.pageYOffset > ( that.mobileFixedApiNav.nativeElement.offsetHeight + 188 ) ) ? true : false;
+      });
+    }, 1 );
+  }
+
   ngOnInit(): void {
     this.env = this.stateService.env;
     this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);

frontend/src/app/components/docs/docs.component.html

@@ -27,5 +27,13 @@
 
     <div id="main-tab-content" [ngbNavOutlet]="nav" class="mt-2"></div>
 
+    <br>
+
+    <div id="footer" class="text-center">
+      <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+      |
+      <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
+    </div>
+
   </div>
 </div>

frontend/src/app/components/docs/docs.component.scss

@@ -1,4 +1,9 @@
 #main-tab-content {
   text-align: left;
   padding-top: 10px;
+  scroll-behavior: smooth;
+}
+
+#footer {
+  clear: both;
 }