mirror of
https://github.com/mempool/mempool.git
synced 2024-12-29 09:44:26 +01:00
Merge pull request #1354 from hunicus/mobile-refinements
Fix docs navigation on mobile
This commit is contained in:
wiz
GitHub
commit
622a003a2a
@ -11,64 +11,54 @@
|
||||
|
||||
<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 id="doc-nav-mobile" class="hide-on-desktop" *ngIf="showFloatingDocsNav">
|
||||
<button type="button" class="btn btn-outline-primary" (click)="collapse.toggle()" [attr.aria-expanded]="mobileMenuOpen" aria-controls="collapseExample"><fa-icon [icon]="['fas', 'list-ul']" [fixedWidth]="true"></fa-icon> {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} REST API Overview</button>
|
||||
<div #collapse="ngbCollapse" [(ngbCollapse)]="mobileMenuOpen">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mobile-top-doc-nav" #mobileFixedApiNav class="hide-on-desktop"><app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav></div>
|
||||
|
||||
<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;
|
||||
float: unset;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,12 +19,10 @@ export class ApiDocsComponent implements OnInit {
|
||||
code: any;
|
||||
baseNetworkUrl = '';
|
||||
@Input() restTabActivated: Boolean;
|
||||
@ViewChild( "mobileFixedApiNav", { static: false } ) mobileFixedApiNav: ElementRef;
|
||||
desktopDocsNavPosition = "relative";
|
||||
showFloatingDocsNav = false;
|
||||
mobileMenuOpen = true;
|
||||
restDocs: any[];
|
||||
wsDocs: any;
|
||||
screenWidth: number;
|
||||
|
||||
constructor(
|
||||
private stateService: StateService,
|
||||
@ -35,9 +33,9 @@ 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";
|
||||
that.showFloatingDocsNav = ( window.pageYOffset > ( that.mobileFixedApiNav.nativeElement.offsetHeight + 188 ) ) ? true : false;
|
||||
});
|
||||
}, 1 );
|
||||
}
|
||||
@ -77,6 +75,27 @@ export class ApiDocsComponent implements OnInit {
|
||||
if( this.route.snapshot.fragment === targetId ) {
|
||||
document.getElementById( targetId ).scrollIntoView();
|
||||
}
|
||||
this.openEndpointContainer( targetId );
|
||||
}
|
||||
|
||||
openEndpointContainer( targetId ) {
|
||||
if( ( window.innerWidth <= 992 ) && this.restTabActivated && targetId ) {
|
||||
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) {
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -22,6 +22,17 @@ export class CodeTemplateComponent implements OnInit {
|
||||
this.env = this.stateService.env;
|
||||
}
|
||||
|
||||
adjustContainerHeight( event ) {
|
||||
if( ( window.innerWidth <= 992 ) && ( this.method !== "websocket" ) ) {
|
||||
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";
|
||||
}, 550);
|
||||
}
|
||||
}
|
||||
|
||||
npmGithubLink(){
|
||||
let npmLink = `https://github.com/mempool/mempool.js`;
|
||||
if (this.network === 'bisq') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user