Merge pull request #3175 from mempool/hunicus/about-anchor

Add anchor links for about page sections

frontend/src/app/components/about/about.component.html

@@ -25,7 +25,7 @@
     </a>
   </div>
 
-  <div class="enterprise-sponsor">
+  <div class="enterprise-sponsor" id="enterprise-sponsors">
     <h3 i18n="about.sponsors.enterprise.withRocket">Enterprise Sponsors 🚀</h3>
     <div class="wrapper">
       <a href="https://spiral.xyz/" target="_blank" title="Spiral">
@@ -173,7 +173,7 @@
     </div>
   </div>
 
-  <div class="community-sponsor">
+  <div class="community-sponsor" id="community-sponsors">
     <h3 i18n="about.sponsors.withHeart">Community Sponsors ❤️</h3>
 
     <div class="wrapper">
@@ -187,7 +187,7 @@
     </div>
   </div>
 
-  <div class="community-integrations-sponsor">
+  <div class="community-integrations-sponsor" id="community-integrations">
     <h3 i18n="about.community-integrations">Community Integrations</h3>
     <div class="wrapper">
       <a href="https://github.com/getumbrel/umbrel" target="_blank" title="Umbrel">
@@ -281,7 +281,7 @@
     </div>
   </div>
 
-  <div class="alliances">
+  <div class="alliances" id="community-alliances">
     <h3 i18n="about.alliances">Community Alliances</h3>
     <div class="wrapper">
       <a href="https://liquid.net/" title="Liquid Network">
@@ -297,7 +297,7 @@
   </div>
 
   <ng-container *ngIf="translators$ | async | keyvalue as translators else loadingSponsors">
-    <div class="project-translators">
+    <div class="project-translators" id="project-translators">
       <h3 i18n="about.translators">Project Translators</h3>
       <div class="wrapper">
         <ng-template ngFor let-translator [ngForOf]="translators">
@@ -311,7 +311,7 @@
   </ng-container>
 
   <ng-container *ngIf="allContributors$ | async as contributors else loadingSponsors">
-    <div class="contributors">
+    <div class="contributors" id="project-contributors">
       <h3 i18n="about.contributors">Project Contributors</h3>
       <div class="wrapper">
         <ng-template ngFor let-contributor [ngForOf]="contributors.regular">
@@ -323,7 +323,7 @@
       </div>
     </div>
 
-    <div class="maintainers" *ngIf="contributors.core.length">
+    <div class="maintainers" *ngIf="contributors.core.length" id="project-members">
       <h3 i18n="about.project_members">Project Members</h3>
       <div class="wrapper">
         <ng-template ngFor let-contributor [ngForOf]="contributors.core">
@@ -336,7 +336,7 @@
     </div>
   </ng-container>
 
-  <div class="maintainers">
+  <div class="maintainers" id="project-maintainers">
     <h3 i18n="about.maintainers">Project Maintainers</h3>
     <div class="wrapper">
         <a href="https://twitter.com/softsimon_" target="_blank" title="softsimon">

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 {

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 { 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',
@@ -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,10 +64,25 @@ 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') {
       this.router.navigateByUrl('/enterprise');