aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorKim <1877318+kimsible@users.noreply.github.com>2020-08-10 15:57:37 +0200
committerGitHub <noreply@github.com>2020-08-10 15:57:37 +0200
commit4a53fc8204d5a3a3d5a77b3dfe128f0985153bf8 (patch)
tree249e48c8ff24b6e5f3f696a49d024a2596f7a7ea
parent207612dff83401a9642f9cb0a63a5a6efcd5f590 (diff)
downloadPeerTube-4a53fc8204d5a3a3d5a77b3dfe128f0985153bf8.tar.gz
PeerTube-4a53fc8204d5a3a3d5a77b3dfe128f0985153bf8.tar.zst
PeerTube-4a53fc8204d5a3a3d5a77b3dfe128f0985153bf8.zip
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>
-rw-r--r--client/src/app/+admin/admin.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html2
-rw-r--r--client/src/app/+my-account/my-account.component.scss4
-rw-r--r--client/src/app/app.component.ts13
-rw-r--r--client/src/app/menu/menu.component.html8
-rw-r--r--client/src/app/shared/shared-user-settings/user-video-settings.component.html2
-rw-r--r--client/src/sass/application.scss6
7 files changed, 30 insertions, 9 deletions
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
index 61a2744ba..a764efc76 100644
--- a/client/src/app/+admin/admin.component.scss
+++ b/client/src/app/+admin/admin.component.scss
@@ -6,3 +6,7 @@ my-top-menu-dropdown {
6} 6}
7 7
8@include sub-menu-h1; 8@include sub-menu-h1;
9
10::ng-deep .anchor {
11 top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
12}
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 2ad014f01..de8353851 100644
--- 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 @@
1<h1 class="sr-only" i18n>Settings</h1> 1<h1 class="sr-only" i18n>Settings</h1>
2<div class="form-row"> <!-- preview --> 2<div class="form-row"> <!-- preview -->
3 <div class="anchor" id="top"></div> <!-- top anchor -->
4
3 <div class="form-group col-12 col-lg-4 col-xl-3"></div> 5 <div class="form-group col-12 col-lg-4 col-xl-3"></div>
4 6
5 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 7 <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 a5bb499b4..6c1d9519c 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -11,3 +11,7 @@
11 11
12 @include sub-menu-h1; 12 @include sub-menu-h1;
13} 13}
14
15::ng-deep .anchor {
16 top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
17}
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index ff0e28aa5..5c64db522 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -119,12 +119,17 @@ export class AppComponent implements OnInit, AfterViewInit {
119 const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll)) 119 const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
120 120
121 scrollEvent.subscribe(e => { 121 scrollEvent.subscribe(e => {
122 if (e.position) { 122 // scrollToAnchor first to preserve anchor position when using history navigation
123 return this.viewportScroller.scrollToPosition(e.position) 123 if (e.anchor) {
124 setTimeout(() => {
125 this.viewportScroller.scrollToAnchor(e.anchor)
126 })
127
128 return
124 } 129 }
125 130
126 if (e.anchor) { 131 if (e.position) {
127 return this.viewportScroller.scrollToAnchor(e.anchor) 132 return this.viewportScroller.scrollToPosition(e.position)
128 } 133 }
129 134
130 if (resetScroll) { 135 if (resetScroll) {
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 71fb2c154..7f83a6fb8 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -21,7 +21,7 @@
21 21
22 <div class="dropdown-divider"></div> 22 <div class="dropdown-divider"></div>
23 23
24 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account"> 24 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="top">
25 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <ng-container i18n>Account settings</ng-container> 25 <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <ng-container i18n>Account settings</ng-container>
26 </a> 26 </a>
27 27
@@ -37,13 +37,13 @@
37 <span class="ml-auto text-muted">{{ language }}</span> 37 <span class="ml-auto text-muted">{{ language }}</span>
38 </a> 38 </a>
39 39
40 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings"> 40 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles">
41 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon> 41 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
42 <span i18n>Videos:</span> 42 <span i18n>Videos:</span>
43 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span> 43 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span>
44 </a> 44 </a>
45 45
46 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings"> 46 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-sensitive-content-policy">
47 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon> 47 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive" aria-hidden="true"></my-global-icon>
48 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon> 48 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive" aria-hidden="true"></my-global-icon>
49 <span i18n>Sensitive:</span> 49 <span i18n>Sensitive:</span>
@@ -56,7 +56,7 @@
56 <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label> 56 <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
57 </a> 57 </a>
58 58
59 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account"> 59 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="top">
60 <my-global-icon iconName="more-horizontal" aria-hidden="true"></my-global-icon> <ng-container i18n>More account settings</ng-container> 60 <my-global-icon iconName="more-horizontal" aria-hidden="true"></my-global-icon> <ng-container i18n>More account settings</ng-container>
61 </a> 61 </a>
62 62
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 0dda33af2..bb9f59070 100644
--- 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 @@
1<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> 1<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
2 <div class="form-group form-group-select"> 2 <div class="form-group form-group-select">
3 <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor -->
3 <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label> 4 <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
4 <my-help> 5 <my-help>
5 <ng-template ptTemplate="customHtml"> 6 <ng-template ptTemplate="customHtml">
@@ -20,6 +21,7 @@
20 </div> 21 </div>
21 22
22 <div class="form-group form-group-select"> 23 <div class="form-group form-group-select">
24 <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor -->
23 <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label> 25 <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
24 <my-help> 26 <my-help>
25 <ng-template ptTemplate="customHtml"> 27 <ng-template ptTemplate="customHtml">
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 1dbdd4064..4f2278414 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -18,6 +18,10 @@ $assets-path: '../../assets/';
18 display: none !important; 18 display: none !important;
19} 19}
20 20
21html {
22 scroll-behavior: smooth;
23}
24
21body { 25body {
22 /*** theme ***/ 26 /*** theme ***/
23 // now beware node-sass requires interpolation 27 // now beware node-sass requires interpolation
@@ -307,7 +311,7 @@ table {
307 311
308.anchor { 312.anchor {
309 position: relative; 313 position: relative;
310 top: #{-($header-height + 20px)}; 314 top: #{-($header-height + 20px)}; // offsetTop scrollToAnchor
311} 315}
312 316
313@media screen and (max-width: #{breakpoint(xxl)}) { 317@media screen and (max-width: #{breakpoint(xxl)}) {