From 086b14e81643417fe5752335fa4ddeed24d030c6 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Fri, 17 Dec 2021 07:00:48 -0500
Subject: [PATCH] Add various ux improvements for mobile doc menu

---
 .../clipboard/clipboard.component.html        |  2 +-
 .../docs/api-docs-nav.component.html          | 92 +++++++++----------
 .../components/docs/api-docs-nav.component.ts |  1 +
 .../components/docs/api-docs.component.html   | 12 ++-
 .../components/docs/api-docs.component.scss   | 40 ++++----
 .../app/components/docs/api-docs.component.ts |  6 +-
 .../app/components/docs/docs.component.scss   |  1 +
 7 files changed, 80 insertions(+), 74 deletions(-)

diff --git a/frontend/src/app/components/clipboard/clipboard.component.html b/frontend/src/app/components/clipboard/clipboard.component.html
index 1150074ac..1a92cc9c9 100644
--- a/frontend/src/app/components/clipboard/clipboard.component.html
+++ b/frontend/src/app/components/clipboard/clipboard.component.html
@@ -1,5 +1,5 @@
 <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
-  <button #btn class="btn btn-sm btn-link pt-0" style="line-height: 0.9;" [attr.data-clipboard-text]="text"> 
+  <button #btn class="btn btn-sm btn-link pt-0" style="line-height: 0.9;" [attr.data-clipboard-text]="text">
     <img src="./resources/clippy.svg" width="13">
   </button>
 </span>
diff --git a/frontend/src/app/components/docs/api-docs-nav.component.html b/frontend/src/app/components/docs/api-docs-nav.component.html
index 2103dd776..43de4d1df 100644
--- a/frontend/src/app/components/docs/api-docs-nav.component.html
+++ b/frontend/src/app/components/docs/api-docs-nav.component.html
@@ -1,63 +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>
+<a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-difficulty-adjustment" (click)="collapseItem.toggle()">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>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-currencies" (click)="collapseItem.toggle()">GET Market Currencies</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-depth" (click)="collapseItem.toggle()">GET Market Depth</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-hloc" (click)="collapseItem.toggle()">GET Market HLOC</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-markets" (click)="collapseItem.toggle()">GET Markets</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-offers" (click)="collapseItem.toggle()">GET Market Offers</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-ticker" (click)="collapseItem.toggle()">GET Market Ticker</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-trades" (click)="collapseItem.toggle()">GET Market Trades</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-volumes" (click)="collapseItem.toggle()">GET Market Volumes</a>
 
 <p *ngIf="network.val === 'bisq'">General</p>
-<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-stats">GET Stats</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-stats" (click)="collapseItem.toggle()">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>
+<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>
 
 <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>
+<a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-assets" (click)="collapseItem.toggle()">GET Assets</a>
+<a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-transactions" (click)="collapseItem.toggle()">GET Asset Transactions</a>
+<a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-supply" (click)="collapseItem.toggle()">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>
+<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 *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-blocks" (click)="collapseItem.toggle()">GET Blocks</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-blocks" (click)="collapseItem.toggle()">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>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-blocks-fees" (click)="collapseItem.toggle()">GET Mempool Blocks Fees</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-recommended-fees" (click)="collapseItem.toggle()">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>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool" (click)="collapseItem.toggle()">GET Mempool</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-transaction-ids" (click)="collapseItem.toggle()">GET Mempool Transaction IDs</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-recent" (click)="collapseItem.toggle()">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>
+<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>
diff --git a/frontend/src/app/components/docs/api-docs-nav.component.ts b/frontend/src/app/components/docs/api-docs-nav.component.ts
index 860e1d7ad..967b355f3 100644
--- a/frontend/src/app/components/docs/api-docs-nav.component.ts
+++ b/frontend/src/app/components/docs/api-docs-nav.component.ts
@@ -8,6 +8,7 @@ import { Component, OnInit, Input } from '@angular/core';
 export class ApiDocsNavComponent implements OnInit {
 
   @Input() network: any;
+  @Input() collapseItem: any;
 
   constructor() { }
 
diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html
index b661dc494..1b0f2a66b 100644
--- a/frontend/src/app/components/docs/api-docs.component.html
+++ b/frontend/src/app/components/docs/api-docs.component.html
@@ -3,25 +3,27 @@
 
     <div id="restAPI" *ngIf="restTabActivated">
 
-      <div class="doc-nav-desktop hide-on-mobile" [ngClass]="desktopDocsNavPosition">
+      <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
         <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
       </div>
 
       <div class="doc-content">
 
-        <p class="hide-on-mobile">Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
+        <p class="hide-on-mobile no-bottom-space">Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
 
-        <div class="doc-nav-mobile hide-on-desktop" [ngClass]="mobileDocsNavPosition">
-          <button id="doc-nav-mobile-toggle" type="button" class="btn btn-outline-primary" [ngClass]="mobileDocsNavPosition" (click)="collapse.toggle()" [attr.aria-expanded]="mobileMenuOpen" aria-controls="collapseExample"><fa-icon [icon]="['fas', 'list-ul']" [fixedWidth]="true"></fa-icon> {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} REST API Overview</button>
+        <div id="doc-nav-mobile" class="hide-on-desktop" *ngIf="showFloatingDocsNav">
+          <button type="button" class="btn btn-outline-primary" (click)="collapse.toggle()" [attr.aria-expanded]="mobileMenuOpen" aria-controls="collapseExample"><fa-icon [icon]="['fas', 'list-ul']" [fixedWidth]="true"></fa-icon> {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} REST API Overview</button>
           <div #collapse="ngbCollapse" [(ngbCollapse)]="mobileMenuOpen">
             <div class="card">
               <div class="card-body">
-                <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
+                <app-api-docs-nav [collapseItem]="collapse" [network]="{ val: network$ | async }"></app-api-docs-nav>
               </div>
             </div>
           </div>
         </div>
 
+        <div id="mobile-top-doc-nav" class="hide-on-desktop"><app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav></div>
+
         <div class="api-category" *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">
 
           <div class="endpoint-container" id="get-difficulty-adjustment">
diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss
index 2d5a8447d..d03608e92 100644
--- a/frontend/src/app/components/docs/api-docs.component.scss
+++ b/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,16 +76,16 @@ li.nav-item {
   padding: 15px;
 }
 
-.doc-nav-desktop {
+#doc-nav-desktop {
   width: 300px;
 }
 
-.doc-nav-desktop.relative {
+#doc-nav-desktop.relative {
   float: left;
   overflow: hidden;
 }
 
-.doc-nav-desktop.fixed {
+#doc-nav-desktop.fixed {
   float: unset;
   position: fixed;
   top: 20px;
@@ -122,13 +126,10 @@ li.nav-item {
   padding: 1rem 1.3rem 1rem 1.3rem;
   font-weight: bold;
   border-radius: 0.25rem;
-  margin: 40px 0 20px 0;
+  margin: 20px 0 20px 0;
   font-size: 24px;
   position: relative;
 }
-.endpoint-container .section-header:first-child {
-  margin-top: 20px;
-}
 .endpoint-container .section-header:hover {
   text-decoration: none;
 }
@@ -146,32 +147,27 @@ li.nav-item {
   float: right;
 }
 
-.doc-nav-mobile.relative {
-
-}
-
-.doc-nav-mobile.relative {
-  position: relative;
-}
-
-.doc-nav-mobile.fixed {
+#doc-nav-mobile {
   position: fixed;
   top: 20px;
   width: calc(100% - 60px);
   z-index: 100;
 }
 
-.doc-nav-mobile > div {
+#doc-nav-mobile > div {
   background-color: #2d3348;
   z-index: 100;
-  border-radius: 0.25rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+  height: 55vh;
+  overflow-y: auto;
 }
 
-#doc-nav-mobile-toggle {
+#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) {
@@ -195,6 +191,12 @@ li.nav-item {
     left: 0;
     bottom: -50px;
   }
+
+  .endpoint-container:before {
+    height: 30px;
+    margin-top: -12px;
+  }
+
 }
 
 @media (min-width: 992px) {
diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts
index 4b5f985a8..c209a2771 100644
--- a/frontend/src/app/components/docs/api-docs.component.ts
+++ b/frontend/src/app/components/docs/api-docs.component.ts
@@ -18,7 +18,7 @@ export class ApiDocsComponent implements OnInit {
   baseNetworkUrl = '';
   @Input() restTabActivated: Boolean;
   desktopDocsNavPosition = "relative";
-  mobileDocsNavPosition = "relative";
+  showFloatingDocsNav = false;
   mobileMenuOpen = true;
 
   constructor(
@@ -39,10 +39,10 @@ export class ApiDocsComponent implements OnInit {
     );
 
     //to toggle fixed menu for desktop navigation
-    let that = this;
+    const that = this;
     window.addEventListener('scroll', function() {
       that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
-      that.mobileDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
+      that.showFloatingDocsNav = ( window.pageYOffset > 1425 ) ? true : false;
     });
 
     if (document.location.port !== '') {
diff --git a/frontend/src/app/components/docs/docs.component.scss b/frontend/src/app/components/docs/docs.component.scss
index 0f4b879eb..6398c5602 100644
--- a/frontend/src/app/components/docs/docs.component.scss
+++ b/frontend/src/app/components/docs/docs.component.scss
@@ -1,6 +1,7 @@
 #main-tab-content {
   text-align: left;
   padding-top: 10px;
+  scroll-behavior: smooth;
 }
 
 #footer {