diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f3ac7607cbd798954deb8cab173a3c8a2daf747b..6aad4e4519129bc4dfe72447e8e4e852cd75b5e6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -37,7 +37,7 @@ export class AppComponent {
timeout: 900, // 15 min
onTimeout: () => {
this.authService.logout();
- this.router.navigate(['/welcome'])
+ this.router.navigate(['/welcome'], {queryParams: {logout: 'TIMEOUT'}});
}
});
}
diff --git a/src/app/shared/navbar/navbar.component.ts b/src/app/shared/navbar/navbar.component.ts
index 1df008f098fa937705ee6779819032a0ecd1a367..b64d090281665927f162077d5cab36b9d819cb3b 100644
--- a/src/app/shared/navbar/navbar.component.ts
+++ b/src/app/shared/navbar/navbar.component.ts
@@ -1,5 +1,5 @@
import {Component, OnInit, ViewChild} from '@angular/core';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
import {TranslateService} from '@ngx-translate/core';
import {interval, Subscription} from 'rxjs';
import {AuthService} from '../../auth/auth.service';
@@ -70,6 +70,7 @@ export class NavbarComponent implements OnInit {
}, 1000);
+
}
public getSupportedLanguages() {
diff --git a/src/app/welcome/welcome.component.css b/src/app/welcome/welcome.component.css
index 1c5f384496229c1cad06f7e0a6e0dd8b888f2fb4..d00fd0310a08f1457c12bb382b09f7b9d1a2bfb1 100644
--- a/src/app/welcome/welcome.component.css
+++ b/src/app/welcome/welcome.component.css
@@ -53,3 +53,13 @@ html, body {
.features-top-padding{
padding-top: 15px;
}
+
+.banner{
+ background-color : #424242;
+ color: #E8E8E8;
+ margin-top: -20px;
+ padding: 12px;
+ justify-self: center;
+ display: grid;
+ width: 100%;
+}
diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html
index 887583f87c805655633e17ffaf6a916d62feaa64..c59992c4c495bd0180d1bf0088524b5280362389 100644
--- a/src/app/welcome/welcome.component.html
+++ b/src/app/welcome/welcome.component.html
@@ -1,104 +1,124 @@
+<div *ngIf="autoLogout" class="banner flex-center">
+ <div style="display: grid">
+ <span class="text-center">{{'WELCOME.TIME_EXPIRED' | translate}}
+ <a class=""
+ style="width:3rem; height: 3rem; color: white; cursor: pointer" (click)="autoLogout=false">
+ <em class="pi pi-times"></em>
+ </a>
+ </span>
+ </div>
+</div>
<div class="container-fluid" onresize="this.onResize();">
- <div class="row">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container" style="text-align: justify; font-size: large;">
- <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12" >
- <div style="display: block;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel-body">
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-bottom: 20px;">
- <h2><strong>{{ 'WELCOME.TITLE1' | translate }}</strong> (<a href="https://www.geant.org/NMaaS" target="_blank" rel="noopener noreferrer">NMaaS</a>)
- {{ 'WELCOME.TITLE2'| translate }}</h2>
- </div>
- <div style="padding-left: 10px;" class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
- <p>
- {{ 'WELCOME.INTRO_TEXT' | translate }}
- </p>
- </div>
- <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 ">
- <img src="../../assets/images/landing/nmaas_schema_simple_text.png" class="center-block glyphicon-align-center landing-img-sm"
+ <div class="row">
+ <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container"
+ style="text-align: justify; font-size: large;">
+ <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12">
+ <div style="display: block;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel-body">
+ <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-bottom: 20px;">
+ <h2><strong>{{ 'WELCOME.TITLE1' | translate }}</strong> (<a href="https://www.geant.org/NMaaS"
+ target="_blank"
+ rel="noopener noreferrer">NMaaS</a>)
+ {{ 'WELCOME.TITLE2'| translate }}</h2>
+ </div>
+ <div style="padding-left: 10px;" class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
+ <p>
+ {{ 'WELCOME.INTRO_TEXT' | translate }}
+ </p>
+ </div>
+ <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 ">
+ <img src="../../assets/images/landing/nmaas_schema_simple_text.png"
+ class="center-block glyphicon-align-center landing-img-sm"
style="width: 100%; height: 100%; max-width: 800px; max-height: 600px;" alt="NMaaS Schema">
- </div>
- </div>
- <br>
- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
- <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 ">
- <img src="../../assets/images/landing/people_2.png" alt="Users" class="center-block landing-img-sm landing-img-left">
- </div>
- <div style="padding-left: 10px;" class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
- <h3>{{ 'WELCOME.TARGET_USERS_HEADER' | translate }}</h3>
- <p>
- {{ 'WELCOME.TARGET_USERS_TEXT' | translate }}
- </p>
- </div>
- </div>
- <br>
- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
- <div style="padding-left: 10px;" class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
- <h3>{{ 'WELCOME.MARKETPLACE_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.MARKETPLACE_TEXT' | translate }}</p>
- </div>
- <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
- <img src="../../assets/images/landing/shop_2.png" alt="Marketplace icon" class="glyphicon-align-center center-block landing-img-sm landing-img-right">
- </div>
- </div>
- <br>
- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
- <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
- <img src="../../assets/images/landing/costs_3.png" alt="Cost reduction icon" class="center-block landing-img-sm landing-img-left">
- </div>
- <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
- <h3>{{ 'WELCOME.COST_REDUCTION_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.COST_REDUCTION_TEXT' | translate }}</p>
- </div>
- </div>
- <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
- <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
- <h3>{{ 'WELCOME.SECURITY_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.SECURITY_TEXT' | translate }}</p>
- </div>
- <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
- <img src="../../assets/images/landing/security.png" alt="Security icon" class="center-block landing-img-sm landing-img-right" />
- </div>
- </div>
- <br>
- </div>
- <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"
+ </div>
+ </div>
+ <br>
+ <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
+ <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 ">
+ <img src="../../assets/images/landing/people_2.png" alt="Users"
+ class="center-block landing-img-sm landing-img-left">
+ </div>
+ <div style="padding-left: 10px;" class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
+ <h3>{{ 'WELCOME.TARGET_USERS_HEADER' | translate }}</h3>
+ <p>
+ {{ 'WELCOME.TARGET_USERS_TEXT' | translate }}
+ </p>
+ </div>
+ </div>
+ <br>
+ <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
+ <div style="padding-left: 10px;" class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
+ <h3>{{ 'WELCOME.MARKETPLACE_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.MARKETPLACE_TEXT' | translate }}</p>
+ </div>
+ <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
+ <img src="../../assets/images/landing/shop_2.png" alt="Marketplace icon"
+ class="glyphicon-align-center center-block landing-img-sm landing-img-right">
+ </div>
+ </div>
+ <br>
+ <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
+ <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
+ <img src="../../assets/images/landing/costs_3.png" alt="Cost reduction icon"
+ class="center-block landing-img-sm landing-img-left">
+ </div>
+ <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
+ <h3>{{ 'WELCOME.COST_REDUCTION_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.COST_REDUCTION_TEXT' | translate }}</p>
+ </div>
+ </div>
+ <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
+ <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
+ <h3>{{ 'WELCOME.SECURITY_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.SECURITY_TEXT' | translate }}</p>
+ </div>
+ <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
+ <img src="../../assets/images/landing/security.png" alt="Security icon"
+ class="center-block landing-img-sm landing-img-right"/>
+ </div>
+ </div>
+ <br>
+ </div>
+ <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"
style="border-top: solid 1px #6c757d; margin-top: 20px;">
- <div class="col-lg-offset-4 col-lg-4 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 text-center features-bottom-padding features-top-padding">
- <h2>{{ 'WELCOME.NMAAS_FEATURES_HEADER' | translate }}</h2>
- </div>
- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
- <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
- <h3>{{ 'WELCOME.APP_MARKET_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.APP_MARKET_TEXT' | translate }}</p>
- </div>
- <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
- <h3>{{ 'WELCOME.OWN_APPS_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.OWN_APPS_TEXT' | translate }}</p>
- </div>
- </div>
+ <div class="col-lg-offset-4 col-lg-4 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 text-center features-bottom-padding features-top-padding">
+ <h2>{{ 'WELCOME.NMAAS_FEATURES_HEADER' | translate }}</h2>
+ </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
- <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
- <h3>{{ 'WELCOME.EDUGAIN_SUPPORT_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.EDUGAIN_SUPPORT_TEXT' | translate }}<p>
- </div>
- <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
- <h3>{{ 'WELCOME.FAST_DEPLOYMENT_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.FAST_DEPLOYMENT_TEXT' | translate }}</p>
- </div>
- </div>
+ <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
+ <h3>{{ 'WELCOME.APP_MARKET_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.APP_MARKET_TEXT' | translate }}</p>
+ </div>
+ <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
+ <h3>{{ 'WELCOME.OWN_APPS_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.OWN_APPS_TEXT' | translate }}</p>
+ </div>
+ </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
- <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
- <h3>{{ 'WELCOME.WEB_PORTAL_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.WEB_PORTAL_TEXT' | translate }}</p>
- </div>
- <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
- <h3>{{ 'WELCOME.KUBERNETES_HEADER' | translate }}</h3>
- <p>{{ 'WELCOME.KUBERNETES_TEXT' | translate }}</p>
- </div>
- </div>
- </div>
- <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"
+ <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
+ <h3>{{ 'WELCOME.EDUGAIN_SUPPORT_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.EDUGAIN_SUPPORT_TEXT' | translate }}
+ <p>
+ </div>
+ <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
+ <h3>{{ 'WELCOME.FAST_DEPLOYMENT_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.FAST_DEPLOYMENT_TEXT' | translate }}</p>
+ </div>
+ </div>
+ <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
+ <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
+ <h3>{{ 'WELCOME.WEB_PORTAL_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.WEB_PORTAL_TEXT' | translate }}</p>
+ </div>
+ <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
+ <h3>{{ 'WELCOME.KUBERNETES_HEADER' | translate }}</h3>
+ <p>{{ 'WELCOME.KUBERNETES_TEXT' | translate }}</p>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"
style="border-top: solid 1px #6c757d; margin-top: 20px;">
- <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-2 col-sm-8 col-xs-12 text-center" style="padding-top: 15px;
+ <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-2 col-sm-8 col-xs-12 text-center"
+ style="padding-top: 15px;
padding-bottom: 10px;"><h2>{{ 'WELCOME.TECHNOLOGIES_USED_HEADER' | translate }}</h2></div>
<div class="center-block col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
@@ -107,49 +127,58 @@
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer nofollow">
- <img src="../../assets/images/logo/bootstrap.png" alt="Bootstrap logo" class="landing-img-logo"></a>
+ <img src="../../assets/images/logo/bootstrap.png" alt="Bootstrap logo"
+ class="landing-img-logo"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://spring.io/" target="_blank" rel="noopener noreferrer nofollow">
- <img src="../../assets/images/logo/spring.png" alt="Spring logo" class="landing-img-logo"></a>
+ <img src="../../assets/images/logo/spring.png" alt="Spring logo"
+ class="landing-img-logo"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://www.postgresql.org/" target="_blank" rel="noopener noreferrer nofollow">
- <img src="../../assets/images/logo/postgres.png" alt="PostgreSQL logo" class="landing-img-logo"></a>
+ <img src="../../assets/images/logo/postgres.png" alt="PostgreSQL logo"
+ class="landing-img-logo"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer nofollow">
- <img src="../../assets/images/logo/docker.png" alt="Docker logo" class="landing-img-logo"></a>
+ <img src="../../assets/images/logo/docker.png" alt="Docker logo"
+ class="landing-img-logo"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://kubernetes.io/" target="_blank" rel="noopener noreferrer nofollow">
- <img src="../../assets/images/logo/kuber.png" alt="Kubernetes logo" class="landing-img-logo"></a>
+ <img src="../../assets/images/logo/kuber.png" alt="Kubernetes logo"
+ class="landing-img-logo"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://about.gitlab.com/" target="_blank" rel="noopener noreferrer nofollow">
- <img src="../../assets/images/logo/gitlab.png" alt="Gitlab logo" class="landing-img-logo"></a>
+ <img src="../../assets/images/logo/gitlab.png" alt="Gitlab logo"
+ class="landing-img-logo"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://www.ansible.com/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/ansible.png" alt="Ansible logo" class="landing-img-logo"></a>
</div>
</div>
- </div>
- <div id="login-register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset"
- [ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
- style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px;">
- <div class="panel panel-default">
- <div class="panel-heading">
- </div>
- <div class="panel-body" id="login-out" style="overflow-y: auto;">
- <ul class="nav nav-tabs nav-justified">
- <li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}"><a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li>
- <li role="registration" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
- </ul>
- <router-outlet></router-outlet>
- </div>
- </div>
- </div>
- </div>
- </div>
+ </div>
+ <div id="login-register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset"
+ [ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
+ style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px;">
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ </div>
+ <div class="panel-body" id="login-out" style="overflow-y: auto;">
+ <ul class="nav nav-tabs nav-justified">
+ <li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
+ <a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li>
+ <li role="registration" [routerLinkActive]="['active']"
+ [routerLinkActiveOptions]="{exact:true}"><a
+ [routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
+ </ul>
+ <router-outlet></router-outlet>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts
index cb598986e9139706274301025cf927c8a9de0deb..ada6491ed75501b7f3dbb790e4136992c36aac94 100644
--- a/src/app/welcome/welcome.component.ts
+++ b/src/app/welcome/welcome.component.ts
@@ -1,58 +1,62 @@
-import { AppConfigService } from '../service/appconfig.service';
-import {
- AfterContentChecked,
- AfterViewChecked,
- Component,
- OnInit,
-} from '@angular/core';
-import {Router} from '@angular/router';
+import {AppConfigService} from '../service/appconfig.service';
+import {AfterContentChecked, AfterViewChecked, Component, OnInit,} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
import {ServiceUnavailableService} from '../service-unavailable/service-unavailable.service';
@Component({
- selector: 'app-welcome',
- templateUrl: './welcome.component.html',
- styleUrls: ['./welcome.component.css']
+ selector: 'app-welcome',
+ templateUrl: './welcome.component.html',
+ styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit, AfterViewChecked, AfterContentChecked {
- private height = 0;
+ private height = 0;
- constructor(private appConfig: AppConfigService,
- public router: Router,
- private serviceHealth: ServiceUnavailableService) {
- }
+ public autoLogout = false;
- async ngOnInit() {
- document.getElementById('global-footer').style.display = 'block';
- await this.serviceHealth.validateServicesAvailability();
- if (!this.serviceHealth.isServiceAvailable) {
- this.router.navigate(['/service-unavailable']);
+ constructor(private appConfig: AppConfigService,
+ public router: Router,
+ private serviceHealth: ServiceUnavailableService,
+ private readonly route: ActivatedRoute) {
+ }
+
+ async ngOnInit() {
+ document.getElementById('global-footer').style.display = 'block';
+ await this.serviceHealth.validateServicesAvailability();
+ if (!this.serviceHealth.isServiceAvailable) {
+ this.router.navigate(['/service-unavailable']);
+ }
+ this.onResize();
+ this.route.queryParams.subscribe(params => {
+ console.log(params)
+ if (params.logout !== undefined) {
+ this.autoLogout = true;
+ }
+ })
+ }
+
+ ngAfterContentChecked() {
+ this.onResize();
+ }
+
+ ngAfterViewChecked() {
+ this.onResize();
+ }
+
+ onResize() {
+ // TODO
+ // rewrite this code, use css instead of js for better performance
+ this.height = document.getElementById('global-footer').offsetHeight;
+ const navHeight = document.getElementById('navbar').offsetHeight;
+ // document.getElementById("welcome-container").style.marginBottom = `${this.height}px`;
+ // document.getElementById("welcome-container").style.marginTop = `${navHeight + 2}px`;
+ document.getElementById('login-out').style.maxHeight = `calc(95vh - ${this.height + navHeight + 10}px)`;
+ // document.getElementById('login-out').style.paddingTop = `${navHeight}`;
+ if (this.height > 90) {
+ document.getElementById('global-footer').style.textAlign = 'center';
+ document.getElementById('login-out').style.maxHeight = `calc(94vh - ${this.height + navHeight + 10}px)`;
+ } else {
+ document.getElementById('global-footer').style.textAlign = 'right';
+ }
}
- this.onResize();
- }
-
- ngAfterContentChecked() {
- this.onResize();
- }
-
- ngAfterViewChecked() {
- this.onResize();
- }
-
- onResize() {
- // TODO
- // rewrite this code, use css instead of js for better performance
- this.height = document.getElementById('global-footer').offsetHeight;
- const navHeight = document.getElementById('navbar').offsetHeight;
- // document.getElementById("welcome-container").style.marginBottom = `${this.height}px`;
- // document.getElementById("welcome-container").style.marginTop = `${navHeight + 2}px`;
- document.getElementById('login-out').style.maxHeight = `calc(95vh - ${this.height + navHeight + 10}px)`;
- // document.getElementById('login-out').style.paddingTop = `${navHeight}`;
- if (this.height > 90) {
- document.getElementById('global-footer').style.textAlign = 'center';
- document.getElementById('login-out').style.maxHeight = `calc(94vh - ${this.height + navHeight + 10}px)`;
- } else {
- document.getElementById('global-footer').style.textAlign = 'right';
- }
- }
}