From b7425dc339f60e66fd3e71a8bbc240d0178ece95 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Fri, 24 Feb 2023 02:24:51 -0500 Subject: [PATCH 1/2] Add anchor links for about page sections --- .../app/components/about/about.component.html | 16 ++++++++-------- .../app/components/about/about.component.scss | 2 ++ .../src/app/components/about/about.component.ts | 14 +++++++++++++- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index 876bec028..a79797f9c 100644 --- a/frontend/src/app/components/about/about.component.html +++ b/frontend/src/app/components/about/about.component.html @@ -25,7 +25,7 @@ -
+

Enterprise Sponsors 🚀

@@ -173,7 +173,7 @@
-
+

Community Sponsors ❤️

@@ -187,7 +187,7 @@
-
+ -
+

Community Alliances

@@ -297,7 +297,7 @@
-
+

Project Translators

@@ -311,7 +311,7 @@ -
+

Project Contributors

@@ -323,7 +323,7 @@
-
+

Project Members

@@ -336,7 +336,7 @@
-
+

Project Maintainers

diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss index 8390ce0ba..ae60e052e 100644 --- a/frontend/src/app/components/about/about.component.scss +++ b/frontend/src/app/components/about/about.component.scss @@ -46,6 +46,7 @@ .maintainers { margin-top: 68px; margin-bottom: 68px; + scroll-margin: 30px; } .maintainers { @@ -117,6 +118,7 @@ .project-translators, .community-integrations-sponsor, .maintainers { + scroll-margin: 30px; .wrapper { display: inline-block; a { diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts index d26efb411..33c6ac5a2 100644 --- a/frontend/src/app/components/about/about.component.ts +++ b/frontend/src/app/components/about/about.component.ts @@ -5,7 +5,7 @@ import { StateService } from '../../services/state.service'; import { Observable } from 'rxjs'; import { ApiService } from '../../services/api.service'; import { IBackendInfo } from '../../interfaces/websocket.interface'; -import { Router } from '@angular/router'; +import { Router, ActivatedRoute } from '@angular/router'; import { map } from 'rxjs/operators'; import { ITranslators } from '../../interfaces/node-api.interface'; @@ -31,6 +31,7 @@ export class AboutComponent implements OnInit { public stateService: StateService, private apiService: ApiService, private router: Router, + private route: ActivatedRoute, @Inject(LOCALE_ID) public locale: string, ) { } @@ -60,6 +61,17 @@ export class AboutComponent implements OnInit { }) ); } + + ngAfterViewInit() { + const that = this; + setTimeout( () => { + if( this.route.snapshot.fragment ) { + if (document.getElementById( this.route.snapshot.fragment )) { + document.getElementById( this.route.snapshot.fragment ).scrollIntoView({behavior: "smooth", block: "center"}); + } + } + }, 1 ); + } sponsor(): void { if (this.officialMempoolSpace && this.stateService.env.BASE_MODULE === 'mempool') { From 7b01286ed270b7646e591e02f40ad4e755e3d658 Mon Sep 17 00:00:00 2001 From: softsimon Date: Thu, 2 Mar 2023 21:50:09 +0900 Subject: [PATCH 2/2] Run the go to anchor whenever data is loaded --- .../app/components/about/about.component.ts | 38 ++++++++++++------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts index 33c6ac5a2..0f71645d6 100644 --- a/frontend/src/app/components/about/about.component.ts +++ b/frontend/src/app/components/about/about.component.ts @@ -6,8 +6,9 @@ import { Observable } from 'rxjs'; import { ApiService } from '../../services/api.service'; import { IBackendInfo } from '../../interfaces/websocket.interface'; import { Router, ActivatedRoute } from '@angular/router'; -import { map } from 'rxjs/operators'; +import { map, tap } from 'rxjs/operators'; import { ITranslators } from '../../interfaces/node-api.interface'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-about', @@ -33,6 +34,7 @@ export class AboutComponent implements OnInit { private router: Router, private route: ActivatedRoute, @Inject(LOCALE_ID) public locale: string, + @Inject(DOCUMENT) private document: Document, ) { } ngOnInit() { @@ -40,17 +42,21 @@ export class AboutComponent implements OnInit { this.seoService.setTitle($localize`:@@004b222ff9ef9dd4771b777950ca1d0e4cd4348a:About`); this.websocketService.want(['blocks']); - this.sponsors$ = this.apiService.getDonation$(); + this.sponsors$ = this.apiService.getDonation$() + .pipe( + tap(() => this.goToAnchor()) + ); this.translators$ = this.apiService.getTranslators$() .pipe( map((translators) => { for (const t in translators) { if (translators[t] === '') { - delete translators[t] + delete translators[t]; } } return translators; - }) + }), + tap(() => this.goToAnchor()) ); this.allContributors$ = this.apiService.getContributor$().pipe( map((contributors) => { @@ -58,20 +64,24 @@ export class AboutComponent implements OnInit { regular: contributors.filter((user) => !user.core_constributor), core: contributors.filter((user) => user.core_constributor), }; - }) + }), + tap(() => this.goToAnchor()) ); } - ngAfterViewInit() { - const that = this; - setTimeout( () => { - if( this.route.snapshot.fragment ) { - if (document.getElementById( this.route.snapshot.fragment )) { - document.getElementById( this.route.snapshot.fragment ).scrollIntoView({behavior: "smooth", block: "center"}); - } + ngAfterViewInit() { + this.goToAnchor(); + } + + goToAnchor() { + setTimeout(() => { + if (this.route.snapshot.fragment) { + if (this.document.getElementById(this.route.snapshot.fragment)) { + this.document.getElementById(this.route.snapshot.fragment).scrollIntoView({behavior: 'smooth'}); } - }, 1 ); - } + } + }, 1); + } sponsor(): void { if (this.officialMempoolSpace && this.stateService.env.BASE_MODULE === 'mempool') {