to the top button

This commit is contained in:
VLE2FE 2020-08-11 17:08:47 +02:00
parent 40afc348e1
commit 638868875b
5 changed files with 36 additions and 3 deletions

View File

@ -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>

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -52,6 +52,7 @@ rb-table {
}
.paging {
height: 50px;
rb-form-input {
max-width: 50px;
}

View File

@ -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;
}