From 4a53fc8204d5a3a3d5a77b3dfe128f0985153bf8 Mon Sep 17 00:00:00 2001
From: Kim <1877318+kimsible@users.noreply.github.com>
Date: Mon, 10 Aug 2020 15:57:37 +0200
Subject: 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>
---
 .../my-account-settings/my-account-settings.component.html            | 2 ++
 client/src/app/+my-account/my-account.component.scss                  | 4 ++++
 2 files changed, 6 insertions(+)

(limited to 'client/src/app/+my-account')

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 @@
 <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 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 @@
 
   @include sub-menu-h1;
 }
+
+::ng-deep .anchor {
+  top: #{-($header-height + $sub-menu-height + 20px)}; // offsetTop scrollToAnchor
+}
-- 
cgit v1.2.3