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>

diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
index 61a2744ba736cec74bd52619713308e513cb2817..a764efc765341e7792d2b61ac5ff3d420eebb16b 100644 (file)
--- a/client/src/app/+admin/admin.component.scss
+++ b/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
+}

diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 2ad014f0161e072c1d88a0b9b30e80376aac3c43..de835385148bb6a9579688af57107a40e7a48745 100644 (file)
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/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">

diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index a5bb499b42cb52fbe1d034ee1a3aabcce10ba3c1..6c1d9519cff35d5b1aa042e7880992757fa11503 100644 (file)
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/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
+}

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index ff0e28aa5f926bf0f04aaf682fa8094c5ae313f3..5c64db522bb2ac85536aa5fdf213c945ec350f90 100644 (file)
--- a/client/src/app/app.component.ts
+++ b/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) {

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 71fb2c15445da8588471841d6133e6df62a2c900..7f83a6fb8fe459efec1f3614e741ea4d007d1f11 100644 (file)
--- a/client/src/app/menu/menu.component.html
+++ b/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>
 

diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 0dda33af247baaa0fa4a46befddb52c71233e9e6..bb9f5907055a07a75af5253f9ea4b4fef34b4a0c 100644 (file)
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/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">

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 1dbdd4064f14156d9fc77f2e6439943763d27c10..4f227841440608d1eb4a94e590d83a35b67d35f0 100644 (file)
--- a/client/src/sass/application.scss
+++ b/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)}) {