Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} API service.
-
+
{{ item.title }}
diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss
index 9aae0278b..cb3770622 100644
--- a/frontend/src/app/components/docs/api-docs.component.scss
+++ b/frontend/src/app/components/docs/api-docs.component.scss
@@ -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;
+ }
}
diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts
index d61d1ce95..5e2300fed 100644
--- a/frontend/src/app/components/docs/api-docs.component.ts
+++ b/frontend/src/app/components/docs/api-docs.component.ts
@@ -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
( "#" + targetId );
+ const endpointContentEl = document.querySelector( "#" + 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) {
diff --git a/frontend/src/app/components/docs/code-template.component.html b/frontend/src/app/components/docs/code-template.component.html
index a1ea10f3f..eedf0d3fe 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 @@
-
- cURL
+ cURL
-
- CommonJS
+ CommonJS
@@ -18,7 +18,7 @@
-
- ES Module
+ ES Module
diff --git a/frontend/src/app/components/docs/code-template.component.ts b/frontend/src/app/components/docs/code-template.component.ts
index 8cfa44cdc..cc7b8254e 100644
--- a/frontend/src/app/components/docs/code-template.component.ts
+++ b/frontend/src/app/components/docs/code-template.component.ts
@@ -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( urlObj.hash );
+ const endpointContentEl = document.querySelector( 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') {