From 838725a862f3780b6d5244546d71b038e2a3721e Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Sat, 12 Mar 2022 15:21:50 -0500
Subject: [PATCH] Implement custom accordion for mobile docs

---
 .../components/docs/api-docs.component.html   | 77 ++++++++++---------
 .../components/docs/api-docs.component.scss   | 41 +++++++---
 .../app/components/docs/api-docs.component.ts | 27 +++++++
 3 files changed, 99 insertions(+), 46 deletions(-)

diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html
index bd7c6d809..88a48f975 100644
--- a/frontend/src/app/components/docs/api-docs.component.html
+++ b/frontend/src/app/components/docs/api-docs.component.html
@@ -12,50 +12,53 @@
         <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 *ngFor="let item of restDocs">
+          <h3 *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</h3>
           <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
             <a class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
-            <div class="endpoint">
-              <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-              <ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_link_example" #bisq_link_example>
-                <a [href]="wrapUrl(network.val, item.codeExample.bisq)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
+            <div class="endpoint-content">
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_link_example" #bisq_link_example>
+                  <a [href]="wrapUrl(network.val, item.codeExample.bisq)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
+                </ng-container>
+                <ng-template #liquid_link_example>
+                  <ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_link_example">
+                    <a [href]="wrapUrl(network.val, item.codeExample.liquid)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
+                  </ng-container>
+                </ng-template>
+                <ng-template #default_link_example>
+                  <ng-container *ngIf="item.httpRequestMethod === 'GET'">
+                    <a [href]="wrapUrl(network.val, item.codeExample.default)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
+                  </ng-container>
+                </ng-template>
+                <div *ngIf="item.httpRequestMethod === 'POST'">{{ item.httpRequestMethod }} {{ item.urlString }}</div>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <ng-container *ngIf="network.val === 'bisq' && item.description.hasOwnProperty('bisq');else liquid_description" #bisq_description>
+                  <div [innerHTML]="item.description.bisq" i18n></div>
+                </ng-container>
+                <ng-template #liquid_description>
+                  <ng-container *ngIf="network.val === 'liquid' && item.description.hasOwnProperty('liquid');else default_description">
+                    <div [innerHTML]="item.description.liquid" i18n></div>
+                  </ng-container>
+                </ng-template>
+                <ng-template #default_description>
+                  <div [innerHTML]="item.description.default" i18n></div>
+                </ng-template>
+              </div>
+              <ng-container *ngIf="network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_code_example" #bisq_code_example>
+                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.bisq" [network]="network.val" ></app-code-template>
               </ng-container>
-              <ng-template #liquid_link_example>
-                <ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_link_example">
-                  <a [href]="wrapUrl(network.val, item.codeExample.liquid)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
+              <ng-template #liquid_code_example>
+                <ng-container *ngIf="network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_code_example">
+                  <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.liquid" [network]="network.val" ></app-code-template>
                 </ng-container>
               </ng-template>
-              <ng-template #default_link_example>
-                <ng-container *ngIf="item.httpRequestMethod === 'GET'">
-                  <a [href]="wrapUrl(network.val, item.codeExample.default)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
-                </ng-container>
-              </ng-template>
-              <div *ngIf="item.httpRequestMethod === 'POST'">{{ item.httpRequestMethod }} {{ item.urlString }}</div>
-            </div>
-            <div class="description">
-              <div class="subtitle" i18n>Description</div>
-              <ng-container *ngIf="network.val === 'bisq' && item.description.hasOwnProperty('bisq');else liquid_description" #bisq_description>
-                <div [innerHTML]="item.description.bisq" i18n></div>
-              </ng-container>
-              <ng-template #liquid_description>
-                <ng-container *ngIf="network.val === 'liquid' && item.description.hasOwnProperty('liquid');else default_description">
-                  <div [innerHTML]="item.description.liquid" i18n></div>
-                </ng-container>
-              </ng-template>
-              <ng-template #default_description>
-                <div [innerHTML]="item.description.default" i18n></div>
+              <ng-template #default_code_example>
+                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" ></app-code-template>
               </ng-template>
             </div>
-            <ng-container *ngIf="network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_code_example" #bisq_code_example>
-              <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.bisq" [network]="network.val" ></app-code-template>
-            </ng-container>
-            <ng-template #liquid_code_example>
-              <ng-container *ngIf="network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_code_example">
-                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.liquid" [network]="network.val" ></app-code-template>
-              </ng-container>
-            </ng-template>
-            <ng-template #default_code_example>
-              <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" ></app-code-template>
-            </ng-template>
           </div>
         </div>
 
diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss
index 9aae0278b..de9374969 100644
--- a/frontend/src/app/components/docs/api-docs.component.scss
+++ b/frontend/src/app/components/docs/api-docs.component.scss
@@ -112,6 +112,10 @@ li.nav-item {
   float: right;
 }
 
+h3 {
+  margin: 2rem 0 0 0;
+}
+
 .endpoint-container:before {
 	display: block;
  	content: " ";
@@ -183,29 +187,48 @@ li.nav-item {
 
   .doc-content {
     width: 100%;
+    margin-top: -20px;
   }
-
+  
+  .endpoint-container {
+    position: relative;
+    overflow: hidden;
+    height: auto;
+    transition: 0.5s height ease;
+  }
+  
   .endpoint-container .section-header {
-    margin: 40px 0 70px 0;
+    margin: 0;
+    font-size: 18px;
+    z-index: 1;
   }
 
   .endpoint-container .section-header span {
-    float: none;
-    position: absolute;
-    top: unset;
-    left: 0;
-    bottom: -50px;
+    display: none;
   }
 
   .endpoint-container:before {
-    height: 30px;
-    margin-top: -12px;
+    height: 5px;
+    margin-top: 10px;
   }
 
+  .endpoint-container .endpoint-content {
+    width: 100%;
+    position: absolute;
+    top: -10000px;
+    opacity: 0;
+    transition: 0.5s opacity ease;
+  }
 }
 
 @media (min-width: 992px) {
+
   .hide-on-desktop {
     display: none;
   }
+  
+  h3 {
+    display: none;
+  }
+  
 }
diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts
index c06f21ef5..e40148f14 100644
--- a/frontend/src/app/components/docs/api-docs.component.ts
+++ b/frontend/src/app/components/docs/api-docs.component.ts
@@ -22,6 +22,7 @@ export class ApiDocsComponent implements OnInit {
   desktopDocsNavPosition = "relative";
   restDocs: any[];
   wsDocs: any;
+  screenWidth: number;
 
   constructor(
     private stateService: StateService,
@@ -32,6 +33,7 @@ export class ApiDocsComponent implements OnInit {
   ngAfterViewInit() {
     const that = this;
     setTimeout( () => {
+      this.openEndpointContainer( this.route.snapshot.fragment );
       window.addEventListener('scroll', function() {
         that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
       });
@@ -73,6 +75,31 @@ export class ApiDocsComponent implements OnInit {
     if( this.route.snapshot.fragment === targetId ) {
       document.getElementById( targetId ).scrollIntoView();
     }
+    this.openEndpointContainer( targetId );
+  }
+  
+  openEndpointContainer( targetId ) {
+  
+    if( window.innerWidth > 992 ) {
+      return;
+    }
+    
+    const endpointContainerEl = document.querySelector<HTMLElement>( "#" + targetId );
+    const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
+    const endPointContentElHeight = endpointContentEl.clientHeight;
+
+    if( endpointContentEl.classList.contains( "open" ) ) {
+      endpointContainerEl.style.height = "auto";
+      endpointContentEl.style.top = "-10000px";
+      endpointContentEl.style.opacity = "0";
+      endpointContentEl.classList.remove( "open" );
+    } else {
+      endpointContainerEl.style.height = endPointContentElHeight + 90 + "px";
+      endpointContentEl.style.top = "90px";
+      endpointContentEl.style.opacity = "1";
+      endpointContentEl.classList.add( "open" );
+    }
+    
   }
 
   wrapUrl(network: string, code: any, websocket: boolean = false) {