mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-12-27 08:44:26 +01:00
Code Issues 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

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

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

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

@ -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">

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

@ -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`;