machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add skeleton for mobile docs nav

Browse Source
This commit is contained in:
hunicus 2021-12-16 18:24:26 -05:00
parent 9a18019d9d
commit e01ab449cf
No known key found for this signature in database
GPG Key ID: 24837C51B6D81FD9
4 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/app.module.ts
View File

@ -47,7 +47,7 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook } from '@fortawesome/free-solid-svg-icons';
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl } from '@fortawesome/free-solid-svg-icons';
import { ApiDocsComponent } from './components/docs/api-docs.component';
import { DocsComponent } from './components/docs/docs.component';
import { CodeTemplateComponent } from './components/docs/code-template.component';
@ -58,6 +58,7 @@ import { StorageService } from './services/storage.service';
import { HttpCacheInterceptor } from './services/http-cache.interceptor';
import { SponsorComponent } from './components/sponsor/sponsor.component';
import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
@ -109,6 +110,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
BrowserAnimationsModule,
InfiniteScrollModule,
NgbTypeaheadModule,
NgbModule,
FontAwesomeModule,
SharedModule,
NgxEchartsModule.forRoot({
@ -159,5 +161,6 @@ export class AppModule {
library.addIcons(faAngleRight);
library.addIcons(faAngleLeft);
library.addIcons(faBook);
library.addIcons(faListUl);
}
}

15
frontend/src/app/components/docs/api-docs.component.html
View File

@ -3,7 +3,7 @@
<div id="restAPI" *ngIf="restTabActivated">
<div class="doc-nav-desktop" [ngClass]="docsNavPosition">
<div class="doc-nav-desktop hide-on-mobile" [ngClass]="desktopDocsNavPosition">
<p *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">General</p>
<a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-difficulty-adjustment">GET Difficulty Adjustment</a>
@ -73,7 +73,18 @@
<div class="doc-content">
<p>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>
<p class="hide-on-mobile">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 class="doc-nav-mobile hide-on-desktop" [ngClass]="mobileDocsNavPosition">
<button id="doc-nav-mobile-toggle" type="button" class="btn btn-outline-primary" [ngClass]="mobileDocsNavPosition" (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">
<p>Placeholder.</p>
</div>
</div>
</div>
</div>
<div class="api-category" *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">

39
frontend/src/app/components/docs/api-docs.component.scss
View File

@ -163,10 +163,38 @@ li.nav-item {
float: right;
}
@media (max-width: 992px){
.doc-nav-desktop {
.doc-nav-mobile.relative {
}
.doc-nav-mobile.relative {
position: relative;
}
.doc-nav-mobile.fixed {
position: fixed;
top: 20px;
width: calc(100% - 60px);
z-index: 100;
}
.doc-nav-mobile > div {
background-color: #2d3348;
z-index: 100;
border-radius: 0.25rem;
}
#doc-nav-mobile-toggle {
width: 100%;
background-color: #105fb0;
color: #fff;
border-color: #105fb0;
}
@media (max-width: 992px) {
.hide-on-mobile {
display: none;
height: auto;
}
.doc-content {
@ -186,3 +214,8 @@ li.nav-item {
}
}
@media (min-width: 992px) {
.hide-on-desktop {
display: none;
}
}

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

@ -17,7 +17,9 @@ export class ApiDocsComponent implements OnInit {
code: any;
baseNetworkUrl = '';
@Input() restTabActivated: Boolean;
docsNavPosition = "relative";
desktopDocsNavPosition = "relative";
mobileDocsNavPosition = "relative";
mobileMenuOpen = true;
constructor(
private stateService: StateService,
@ -39,11 +41,8 @@ export class ApiDocsComponent implements OnInit {
//to toggle fixed menu for desktop navigation
let that = this;
window.addEventListener('scroll', function() {
if( window.pageYOffset > 182 ) {
that.docsNavPosition = "fixed";
} else {
that.docsNavPosition = "relative";
}
that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
that.mobileDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
});
if (document.location.port !== '') {