From 4c8ac3a5852c0cbd13ed19e8994a2b207faeade8 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Sat, 12 Mar 2022 15:59:59 -0500
Subject: [PATCH] Resize docs code templates on open (mobile)

---
 .../app/components/docs/api-docs.component.ts | 36 +++++++++----------
 .../docs/code-template.component.html         |  6 ++--
 .../docs/code-template.component.ts           | 11 ++++++
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts
index e40148f14..42ea7f80c 100644
--- a/frontend/src/app/components/docs/api-docs.component.ts
+++ b/frontend/src/app/components/docs/api-docs.component.ts
@@ -79,27 +79,23 @@ export class ApiDocsComponent implements OnInit {
   }
   
   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( window.innerWidth <= 992 ) {
+      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" );
-    }
-    
+      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) {
diff --git a/frontend/src/app/components/docs/code-template.component.html b/frontend/src/app/components/docs/code-template.component.html
index a3b8c4791..f1cf3a1cc 100644
--- a/frontend/src/app/components/docs/code-template.component.html
+++ b/frontend/src/app/components/docs/code-template.component.html
@@ -1,14 +1,14 @@
 <div class="code">
   <ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab">
     <li ngbNavItem *ngIf="code.codeTemplate.curl && method !== 'websocket'">
-      <a ngbNavLink>cURL</a>
+      <a ngbNavLink (click)="adjustContainerHeight( $event )">cURL</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCurlTemplate(code)"></app-clipboard></div>
         <pre><code [innerText]="wrapCurlTemplate(code)"></code></pre>
       </ng-template>
     </li>
     <li ngbNavItem *ngIf="network !== 'liquidtestnet'">
-      <a ngbNavLink>CommonJS</a>
+      <a ngbNavLink (click)="adjustContainerHeight( $event )" >CommonJS</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code)"></app-clipboard></div>
         <div class="links">
@@ -18,7 +18,7 @@
       </ng-template>
     </li>
     <li ngbNavItem>
-      <a ngbNavLink *ngIf="network !== 'liquidtestnet'">ES Module</a>
+      <a ngbNavLink (click)="adjustContainerHeight( $event )" *ngIf="network !== 'liquidtestnet'">ES Module</a>
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
         <div class="links">
diff --git a/frontend/src/app/components/docs/code-template.component.ts b/frontend/src/app/components/docs/code-template.component.ts
index 8cfa44cdc..d19124dec 100644
--- a/frontend/src/app/components/docs/code-template.component.ts
+++ b/frontend/src/app/components/docs/code-template.component.ts
@@ -21,6 +21,17 @@ export class CodeTemplateComponent implements OnInit {
   ngOnInit(): void {
     this.env = this.stateService.env;
   }
+  
+  adjustContainerHeight( event ) {
+    if( window.innerWidth <= 992 ) {
+      const urlObj = new URL( window.location + "" );
+      const endpointContainerEl = document.querySelector<HTMLElement>( urlObj.hash );
+      const endpointContentEl = document.querySelector<HTMLElement>( urlObj.hash + " .endpoint-content" );
+      window.setTimeout( function() {
+        endpointContainerEl.style.height = endpointContentEl.clientHeight + 90 + "px";
+      }, 400);
+    }
+  }
 
   npmGithubLink(){
     let npmLink = `https://github.com/mempool/mempool.js`;