machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resize docs code templates on open (mobile)

Browse Source
This commit is contained in:
hunicus 2022-03-12 15:59:59 -05:00
parent 838725a862
commit 4c8ac3a585
No known key found for this signature in database
GPG Key ID: 24837C51B6D81FD9
3 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/app/components/docs/api-docs.component.ts
View File

@ -79,27 +79,23 @@ export class ApiDocsComponent implements OnInit {
} }
openEndpointContainer( targetId ) { openEndpointContainer( targetId ) {
if( window.innerWidth <= 992 ) {
const endpointContainerEl = document.querySelector<HTMLElement>( "#" + targetId );
const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
const endPointContentElHeight = endpointContentEl.clientHeight;
if( window.innerWidth > 992 ) { if( endpointContentEl.classList.contains( "open" ) ) {
return; 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" );
}
} }
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) { wrapUrl(network: string, code: any, websocket: boolean = false) {

6
frontend/src/app/components/docs/code-template.component.html
View File

@ -1,14 +1,14 @@
<div class="code"> <div class="code">
<ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab"> <ul ngbNav #navCodeTemplate="ngbNav" class="nav-tabs code-tab">
<li ngbNavItem *ngIf="code.codeTemplate.curl && method !== 'websocket'"> <li ngbNavItem *ngIf="code.codeTemplate.curl && method !== 'websocket'">
<a ngbNavLink>cURL</a> <a ngbNavLink (click)="adjustContainerHeight( $event )">cURL</a>
<ng-template ngbNavContent> <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> <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> <pre><code [innerText]="wrapCurlTemplate(code)"></code></pre>
</ng-template> </ng-template>
</li> </li>
<li ngbNavItem *ngIf="network !== 'liquidtestnet'"> <li ngbNavItem *ngIf="network !== 'liquidtestnet'">
<a ngbNavLink>CommonJS</a> <a ngbNavLink (click)="adjustContainerHeight( $event )" >CommonJS</a>
<ng-template ngbNavContent> <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="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code)"></app-clipboard></div>
<div class="links"> <div class="links">
@ -18,7 +18,7 @@
</ng-template> </ng-template>
</li> </li>
<li ngbNavItem> <li ngbNavItem>
<a ngbNavLink *ngIf="network !== 'liquidtestnet'">ES Module</a> <a ngbNavLink (click)="adjustContainerHeight( $event )" *ngIf="network !== 'liquidtestnet'">ES Module</a>
<ng-template ngbNavContent> <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="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="wrapImportTemplate()"></app-clipboard></div>
<div class="links"> <div class="links">

11
frontend/src/app/components/docs/code-template.component.ts
View File

@ -22,6 +22,17 @@ export class CodeTemplateComponent implements OnInit {
this.env = this.stateService.env; 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(){ npmGithubLink(){
let npmLink = `https://github.com/mempool/mempool.js`; let npmLink = `https://github.com/mempool/mempool.js`;
if (this.network === 'bisq') { if (this.network === 'bisq') {