diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html index 03323b6ed..13dbe9fd4 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 🚀

-
+

Community Sponsors ❤️

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

Community Alliances

-
+

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..0f71645d6 100644 --- a/frontend/src/app/components/about/about.component.ts +++ b/frontend/src/app/components/about/about.component.ts @@ -5,9 +5,10 @@ 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 { map } from 'rxjs/operators'; +import { Router, ActivatedRoute } from '@angular/router'; +import { map, tap } from 'rxjs/operators'; import { ITranslators } from '../../interfaces/node-api.interface'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-about', @@ -31,7 +32,9 @@ export class AboutComponent implements OnInit { public stateService: StateService, private apiService: ApiService, private router: Router, + private route: ActivatedRoute, @Inject(LOCALE_ID) public locale: string, + @Inject(DOCUMENT) private document: Document, ) { } ngOnInit() { @@ -39,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) => { @@ -57,9 +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() { + 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); + } sponsor(): void { if (this.officialMempoolSpace && this.stateService.env.BASE_MODULE === 'mempool') {