Implement custom accordion for mobile docs

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

@@ -12,8 +12,10 @@
         <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-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>
@@ -58,6 +60,7 @@
               </ng-template>
             </div>
           </div>
+        </div>
 
       </div>
     </div>

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;
+    display: none;
-    position: absolute;
-    top: unset;
-    left: 0;
-    bottom: -50px;
   }
 
   .endpoint-container:before {
-    height: 30px;
+    height: 5px;
-    margin-top: -12px;
+    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;
+  }
+  
 }

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) {