Add anchors setting and handle offset with sub-meu

Chocobozzz · Aug 3, 2020 · 45d5600 · 45d5600
1 parent e85bfe9
commit 45d5600
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
@@ -67,9 +67,10 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       useHash: Boolean(history.pushState) === false,
-      scrollPositionRestoration: 'disabled',
+      scrollPositionRestoration: 'enabled',
       preloadingStrategy: PreloadSelectedModulesList,
-      anchorScrolling: 'disabled'
+      anchorScrolling: 'enabled',
+      scrollOffset: [0, 81] // sub-menu-height
     })
   ],
   providers: [

diff --git 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="">
               <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="">
               <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
@@ -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">