From 638868875b1c88965d4d6d92fc70cbfd70794d32 Mon Sep 17 00:00:00 2001
From: VLE2FE <lukas.veit@de.bosch.com>
Date: Tue, 11 Aug 2020 17:08:47 +0200
Subject: [PATCH] to the top button

---
 src/app/app.component.html             | 12 +++++++++---
 src/app/app.component.scss             | 18 ++++++++++++++++++
 src/app/app.component.ts               |  4 ++++
 src/app/samples/samples.component.scss |  1 +
 src/styles.scss                        |  4 ++++
 5 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 96aed3a..59d68bc 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<rb-full-header>
+<rb-full-header id="top">
   <nav *rbMainNavItems>
     <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
     <a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLoggedIn">Samples</a>
@@ -45,6 +45,12 @@
   </div>
 </rb-full-header>
 
-<div class="container">
-  <router-outlet></router-outlet>
+<div class="to-the-top-container">
+  <div class="container">
+    <router-outlet></router-outlet>
+  </div>
+
+  <div class="to-the-top">
+    <rb-icon-button icon="up" mode="primary" iconOnly (click)="toTheTop()"></rb-icon-button>
+  </div>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 9a9e4b0..cbf78c0 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -13,3 +13,21 @@
 .bug-textarea {
   width: 800px;
 }
+
+.to-the-top-container {
+  position: relative;
+}
+
+.to-the-top {
+  position: absolute;
+  top: 100vh;
+  bottom: 10px;
+  right: 1rem;
+  pointer-events: none;
+
+  rb-icon-button {
+    position: sticky;
+    pointer-events: all;
+    top: calc(100vh - 3rem);
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 59a1eed..9946350 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -59,6 +59,10 @@ URL: ${window.location}%0D%0A%0D%0AWhat did you do?%0D%0A${encodeURIComponent(th
   closeBugReport(close) {
     setTimeout(() => close(), 1);
   }
+
+  toTheTop() {
+    window.scroll(0, 0);
+  }
 }
 
 
diff --git a/src/app/samples/samples.component.scss b/src/app/samples/samples.component.scss
index 16c4ce3..4c4df56 100644
--- a/src/app/samples/samples.component.scss
+++ b/src/app/samples/samples.component.scss
@@ -52,6 +52,7 @@ rb-table {
 }
 
 .paging {
+  height: 50px;
   rb-form-input {
     max-width: 50px;
   }
diff --git a/src/styles.scss b/src/styles.scss
index 35d3720..245b146 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -13,6 +13,10 @@ $rb-extended-breakpoints: false;  // whether to use extended breakpoints xxl and
   box-sizing: border-box;
 }
 
+body {
+  scroll-behavior: smooth;
+}
+
 a, a:active, a:focus {
   outline: 0 !important;
 }