diff --git a/static/src/app/app.component.css b/static/src/app/app.component.css
index 7bb12bc..cf1b8b8 100644
--- a/static/src/app/app.component.css
+++ b/static/src/app/app.component.css
@@ -38,6 +38,26 @@ li {
color: #7e7d64;
}
+#scrollTopBtn {
+ position: fixed; /* Fixed/sticky position */
+ bottom: 20px;
+ right: 30px;
+ z-index: 99;
+ border: none;
+ outline: none;
+ background-color: #101010;
+ color: white;
+ font-weight: bolder;
+ cursor: pointer;
+ padding: 7px 25px 10px 25px;
+ border-radius: 20px;
+ font-size: 22px;
+}
+
+#scrollTopBtn:hover {
+ background-color: rgba(25, 142, 25, 1);
+}
+
.unprocessed {
-webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
index 6d4433a..045a2a6 100644
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@@ -86,7 +86,10 @@
+
+
+
diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
index 4e520f0..33ea4b1 100644
--- a/static/src/app/app.component.ts
+++ b/static/src/app/app.component.ts
@@ -1,9 +1,10 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, HostListener, Inject, OnInit} from '@angular/core';
import {NavigationEnd, NavigationStart, Router} from '@angular/router';
import {LoginService} from './services/app-user-service/login-service';
import {PromotionService} from './services/army-management/promotion.service';
import {AwardingService} from './services/army-management/awarding.service';
import {RouteConfig} from './app.config';
+import {DOCUMENT} from "@angular/common";
declare function require(url: string);
@@ -18,22 +19,38 @@ export class AppComponent implements OnInit {
loading = false;
+ scrollTopVisible = false;
+
+ scrollBtnVisibleVal = 100;
+
version = 'v' + require('./../../../package.json').version;
constructor(public loginService: LoginService,
private promotionService: PromotionService,
private awardingService: AwardingService,
- private router: Router) {
+ private router: Router,
+ @Inject(DOCUMENT) private document) {
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.loading = true;
}
if (event instanceof NavigationEnd) {
this.loading = false;
+ // scroll to top on route from army overview to user detail and back
+ if (router.url.includes('overview')) {
+ this.scrollToTop()
+ }
}
});
}
+ @HostListener("window:scroll", [])
+ onWindowScroll() {
+ this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
+ || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
+ }
+
+
ngOnInit() {
if (this.loginService.hasPermission(2)) {
const fraction = this.loginService.getCurrentUser().squad.fraction;
@@ -48,5 +65,10 @@ export class AppComponent implements OnInit {
return false;
}
+ scrollToTop() {
+ this.document.body.scrollTop = 0; // For Safari
+ this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+ }
+
}