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

Merge pull request #4856 from mempool/hunicus/docs-links-alignment

Browse Source 
Fix api-docs anchor link vertical alignment
This commit is contained in:
softsimon 2024-04-04 13:54:53 +09:00 committed by GitHub
commit ccd89604c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app-routing.module.ts
View File

@ -263,7 +263,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
imports: [RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking',
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
anchorScrolling: 'disabled',
preloadingStrategy: AppPreloadingStrategy
})],
})

2
frontend/src/app/docs/api-docs/api-docs-nav.component.html
View File

@ -4,5 +4,5 @@
</div>
<div *ngFor="let item of tabData">
<p *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ))">{{ item.title }}</p>
<a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled ) )" [routerLink]="['./']" fragment="{{ item.fragment }}" (click)="navLinkClick($event)">{{ item.title }}</a>
<a *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 ) && ( !item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled ) )" (click)="navLinkClick($event, item.fragment)">{{ item.title }}</a>
</div>

1
frontend/src/app/docs/api-docs/api-docs-nav.component.scss
View File

@ -10,6 +10,7 @@ a {
text-decoration: none;
display: block;
margin: 5px 0;
cursor: pointer;
}
#enterprise-cta-desktop {

5
frontend/src/app/docs/api-docs/api-docs-nav.component.ts
View File

@ -33,8 +33,9 @@ export class ApiDocsNavComponent implements OnInit {
}
}
navLinkClick(event) {
this.navLinkClickEvent.emit(event);
navLinkClick(event, fragment) {
event.preventDefault();
this.navLinkClickEvent.emit({event: event, fragment: fragment});
}
}

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

@ -19,7 +19,7 @@
<div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance ) || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('auditOnly') && item.options.auditOnly && auditEnabled )">
<h3 *ngIf="item.type === 'category'">{{ item.title }}</h3>
<div *ngIf="item.type !== 'category'" class="endpoint-container" id="{{ item.fragment }}">
<a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
<a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
<div class="endpoint-content">
<ng-container *ngTemplateOutlet="dict[item.fragment]" class="endpoint"></ng-container>
</div>
@ -54,7 +54,7 @@
<div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance )">
<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 id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
<a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})">{{ item.title }} <span>{{ item.category }}</span></a>
<div class="endpoint-content">
<div class="endpoint">
<div class="subtitle" i18n="Api docs endpoint">Endpoint</div>

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

@ -204,6 +204,7 @@ h3 {
margin: 20px 0 20px 0;
font-size: 24px;
position: relative;
cursor: pointer;
}
.endpoint-container .section-header:hover {
text-decoration: none;

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

@ -56,7 +56,10 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
if( this.route.snapshot.fragment ) {
this.openEndpointContainer( this.route.snapshot.fragment );
if (document.getElementById( this.route.snapshot.fragment )) {
document.getElementById( this.route.snapshot.fragment ).scrollIntoView();
let vOffset = ( window.innerWidth <= 992 ) ? 100 : 60;
window.scrollTo({
top: document.getElementById( this.route.snapshot.fragment ).offsetTop - vOffset
});
}
}
window.addEventListener('scroll', that.onDocScroll, { passive: true });
@ -124,20 +127,13 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
this.desktopDocsNavPosition = ( window.pageYOffset > 115 ) ? "fixed" : "relative";
}
anchorLinkClick( event: any ) {
let targetId = "";
if( event.target.nodeName === "A" ) {
targetId = event.target.hash.substring(1);
} else {
let element = event.target;
while( element.nodeName !== "A" ) {
element = element.parentElement;
}
targetId = element.hash.substring(1);
}
if( this.route.snapshot.fragment === targetId && document.getElementById( targetId )) {
document.getElementById( targetId ).scrollIntoView();
}
anchorLinkClick( e ) {
let targetId = e.fragment;
let vOffset = ( window.innerWidth <= 992 ) ? 100 : 60;
window.scrollTo({
top: document.getElementById( targetId ).offsetTop - vOffset
});
window.history.pushState({}, null, document.location.href.split("#")[0] + "#" + targetId);
this.openEndpointContainer( targetId );
}