Add new anchors in my-settings and handle offset sub-menu height (#3032)

* Add anchors setting and handle offset with sub-meu

* Use PeerTube scroll logic

* Add anchor for top my-settings

* Improve scroller with smooth behavior and css offset

* Fix anchor position when using history navigation

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

client/src/app/+admin/admin.component.scss

@@ -6,3 +6,7 @@ my-top-menu-dropdown {
 }
 
 @include sub-menu-h1;
+
+::ng-deep .anchor {
+  top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
+}

client/src/app/+my-account/my-account-settings/my-account-settings.component.html

@@ -1,5 +1,7 @@
 <h1 class="sr-only" i18n>Settings</h1>
 <div class="form-row"> <!-- preview -->
+  <div class="anchor" id="top"></div> <!-- top anchor -->
+
   <div class="form-group col-12 col-lg-4 col-xl-3"></div>
 
   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">

client/src/app/+my-account/my-account.component.scss

@@ -11,3 +11,7 @@
 
   @include sub-menu-h1;
 }
+
+::ng-deep .anchor {
+  top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
+}

client/src/app/app.component.ts

@@ -119,12 +119,17 @@ export class AppComponent implements OnInit, AfterViewInit {
     const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
 
     scrollEvent.subscribe(e => {
-      if (e.position) {
-        return this.viewportScroller.scrollToPosition(e.position)
+      // scrollToAnchor first to preserve anchor position when using history navigation
+      if (e.anchor) {
+        setTimeout(() => {
+          this.viewportScroller.scrollToAnchor(e.anchor)
+        })
+
+        return
       }
 
-      if (e.anchor) {
-        return this.viewportScroller.scrollToAnchor(e.anchor)
+      if (e.position) {
+        return this.viewportScroller.scrollToPosition(e.position)
       }
 
       if (resetScroll) {

client/src/app/menu/menu.component.html

@@ -21,7 +21,7 @@
 
             <div class="dropdown-divider"></div>
 
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="top">
               <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <ng-container i18n>Account settings</ng-container>
             </a>
 
@@ -37,13 +37,13 @@
               <span class="ml-auto text-muted">{{ language }}</span>
             </a>
 
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles">
               <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
               <span i18n>Videos:</span>
               <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span>
             </a>
 
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-sensitive-content-policy">
               <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
               <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon>
               <span i18n>Sensitive:</span>
@@ -56,7 +56,7 @@
               <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
             </a>
 
-            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account">
+            <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="top">
               <my-global-icon iconName="more-horizontal" aria-hidden="true"></my-global-icon> <ng-container i18n>More account settings</ng-container>
             </a>
 

client/src/app/shared/shared-user-settings/user-video-settings.component.html

@@ -1,5 +1,6 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
   <div class="form-group form-group-select">
+    <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor -->
     <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
     <my-help>
       <ng-template ptTemplate="customHtml">
@@ -20,6 +21,7 @@
   </div>
 
   <div class="form-group form-group-select">
+    <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor -->
     <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
     <my-help>
       <ng-template ptTemplate="customHtml">

client/src/sass/application.scss

@@ -18,6 +18,10 @@ $assets-path: '../../assets/';
   display: none !important;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   /*** theme ***/
   // now beware node-sass requires interpolation
@@ -307,7 +311,7 @@ table {
 
 .anchor {
   position: relative;
-  top: #{-($header-height + 20px)};
+  top: #{-($header-height + 20px)}; // offsetTop scrollToAnchor
 }
 
 @media screen and (max-width: #{breakpoint(xxl)}) {