mirror of
https://github.com/mempool/mempool.git
synced 2025-02-24 14:50:52 +01:00
Implement custom accordion for mobile docs
This commit is contained in:
hunicus
parent
85100a93f8
commit
838725a862
3 changed files with 99 additions and 46 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue