From 85100a93f86eaf94184140da5e645a75c9169777 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Sat, 12 Mar 2022 01:45:49 -0500 Subject: [PATCH 1/4] Remove mobile docs menu --- .../src/app/components/docs/api-docs.component.html | 13 ------------- .../src/app/components/docs/api-docs.component.ts | 4 ---- 2 files changed, 17 deletions(-) diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html index f056d1aeb..bd7c6d809 100644 --- a/frontend/src/app/components/docs/api-docs.component.html +++ b/frontend/src/app/components/docs/api-docs.component.html @@ -11,19 +11,6 @@

Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} API service.

-
- -
-
-
- -
-
-
-
- -
-
{{ item.title }} {{ item.category }} diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts index d61d1ce95..c06f21ef5 100644 --- a/frontend/src/app/components/docs/api-docs.component.ts +++ b/frontend/src/app/components/docs/api-docs.component.ts @@ -19,10 +19,7 @@ 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; @@ -37,7 +34,6 @@ export class ApiDocsComponent implements OnInit { setTimeout( () => { window.addEventListener('scroll', function() { that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative"; - that.showFloatingDocsNav = ( window.pageYOffset > ( that.mobileFixedApiNav.nativeElement.offsetHeight + 188 ) ) ? true : false; }); }, 1 ); } From 838725a862f3780b6d5244546d71b038e2a3721e Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Sat, 12 Mar 2022 15:21:50 -0500 Subject: [PATCH 2/4] Implement custom accordion for mobile docs --- .../components/docs/api-docs.component.html | 77 ++++++++++--------- .../components/docs/api-docs.component.scss | 41 +++++++--- .../app/components/docs/api-docs.component.ts | 27 +++++++ 3 files changed, 99 insertions(+), 46 deletions(-) diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html index bd7c6d809..88a48f975 100644 --- a/frontend/src/app/components/docs/api-docs.component.html +++ b/frontend/src/app/components/docs/api-docs.component.html @@ -12,50 +12,53 @@

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..de9374969 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; } - + + .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 c06f21ef5..e40148f14 100644 --- a/frontend/src/app/components/docs/api-docs.component.ts +++ b/frontend/src/app/components/docs/api-docs.component.ts @@ -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( "#" + 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) { From 4c8ac3a5852c0cbd13ed19e8994a2b207faeade8 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Sat, 12 Mar 2022 15:59:59 -0500 Subject: [PATCH 3/4] Resize docs code templates on open (mobile) --- .../app/components/docs/api-docs.component.ts | 36 +++++++++---------- .../docs/code-template.component.html | 6 ++-- .../docs/code-template.component.ts | 11 ++++++ 3 files changed, 30 insertions(+), 23 deletions(-) diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts index e40148f14..42ea7f80c 100644 --- a/frontend/src/app/components/docs/api-docs.component.ts +++ b/frontend/src/app/components/docs/api-docs.component.ts @@ -79,27 +79,23 @@ export class ApiDocsComponent implements OnInit { } openEndpointContainer( targetId ) { - - if( window.innerWidth > 992 ) { - return; - } - - const endpointContainerEl = document.querySelector( "#" + targetId ); - const endpointContentEl = document.querySelector( "#" + targetId + " .endpoint-content" ); - const endPointContentElHeight = endpointContentEl.clientHeight; + if( window.innerWidth <= 992 ) { + 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" ); - } - + 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 a3b8c4791..f1cf3a1cc 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
    Code Example
  • - CommonJS + CommonJS
    Code Example
    @@ -18,7 +18,7 @@
  • - ES Module + ES Module
    Install Package
    diff --git a/frontend/src/app/components/docs/code-template.component.ts b/frontend/src/app/components/docs/code-template.component.ts index 8cfa44cdc..d19124dec 100644 --- a/frontend/src/app/components/docs/code-template.component.ts +++ b/frontend/src/app/components/docs/code-template.component.ts @@ -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( urlObj.hash ); + const endpointContentEl = document.querySelector( urlObj.hash + " .endpoint-content" ); + window.setTimeout( function() { + endpointContainerEl.style.height = endpointContentEl.clientHeight + 90 + "px"; + }, 400); + } + } npmGithubLink(){ let npmLink = `https://github.com/mempool/mempool.js`; From 5a58ce0ab3d9965189c32f9bf9cf9f53600df6f7 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Mon, 14 Mar 2022 14:33:41 -0400 Subject: [PATCH 4/4] Fix loose ends Add space above footer, add better delay for height adjustment, and add conditions to prevent errors for websocket endpoint and no endpoint. --- frontend/src/app/components/docs/api-docs.component.scss | 8 ++++---- frontend/src/app/components/docs/api-docs.component.ts | 6 +++--- .../src/app/components/docs/code-template.component.ts | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss index de9374969..cb3770622 100644 --- a/frontend/src/app/components/docs/api-docs.component.scss +++ b/frontend/src/app/components/docs/api-docs.component.scss @@ -188,15 +188,16 @@ h3 { .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: 0; font-size: 18px; @@ -226,9 +227,8 @@ h3 { .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 42ea7f80c..5e2300fed 100644 --- a/frontend/src/app/components/docs/api-docs.component.ts +++ b/frontend/src/app/components/docs/api-docs.component.ts @@ -77,9 +77,9 @@ export class ApiDocsComponent implements OnInit { } this.openEndpointContainer( targetId ); } - + openEndpointContainer( targetId ) { - if( window.innerWidth <= 992 ) { + if( ( window.innerWidth <= 992 ) && this.restTabActivated && targetId ) { const endpointContainerEl = document.querySelector( "#" + targetId ); const endpointContentEl = document.querySelector( "#" + targetId + " .endpoint-content" ); const endPointContentElHeight = endpointContentEl.clientHeight; @@ -95,7 +95,7 @@ export class ApiDocsComponent implements OnInit { 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.ts b/frontend/src/app/components/docs/code-template.component.ts index d19124dec..cc7b8254e 100644 --- a/frontend/src/app/components/docs/code-template.component.ts +++ b/frontend/src/app/components/docs/code-template.component.ts @@ -21,15 +21,15 @@ export class CodeTemplateComponent implements OnInit { ngOnInit(): void { this.env = this.stateService.env; } - + adjustContainerHeight( event ) { - if( window.innerWidth <= 992 ) { + 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"; - }, 400); + }, 550); } }