diff --git a/src/app/shared/common/domainfilter/domainfilter.component.css b/src/app/shared/common/domainfilter/domainfilter.component.css
index 72d0cd34e922fa26fd3c83b6567b989214b5b0be..1378b96bf7f5584580519b4ba5400b50faf2a595 100644
--- a/src/app/shared/common/domainfilter/domainfilter.component.css
+++ b/src/app/shared/common/domainfilter/domainfilter.component.css
@@ -35,3 +35,7 @@
max-height: 450px;
overflow-y: auto;
}
+.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
+ background-color: #233354;
+ background-image: unset;
+}
diff --git a/src/app/shared/common/domainfilter/domainfilter.component.html b/src/app/shared/common/domainfilter/domainfilter.component.html
index 34e4305765997cc6b44ab304bdb86b79d808f7fa..923d04977510bc0a63501c808dab4f95ce06051d 100644
--- a/src/app/shared/common/domainfilter/domainfilter.component.html
+++ b/src/app/shared/common/domainfilter/domainfilter.component.html
@@ -1,6 +1,6 @@
<span [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" class="dropdown dropdown-domains">
<a class="dropdown-toggle" data-close-others="true" data-toggle="dropdown" href="#">
- <span style="color: gray;">{{ "FILTER.DOMAIN" | translate }}: {{ getCurrent() }}<span class="caret"></span></span>
+ <span style="color: #6D788E;">{{ "FILTER.DOMAIN" | translate }}: {{ getCurrent() }}<span class="caret"></span></span>
</a>
<ul class="dropdown-menu" [ngClass]="{'long-domain-list': (domains | async)?.length > 16}">
<input *ngIf="(domains | async)?.length > 16" class="search" type="text" [(ngModel)]="searchTerm"
diff --git a/src/app/shared/navbar/navbar.component.css b/src/app/shared/navbar/navbar.component.css
index d131fe51a295f5042eb5285ba5b5a38ba4c24c88..f074f95ed727929fd55a11e0ccb219ee8eee4e41 100644
--- a/src/app/shared/navbar/navbar.component.css
+++ b/src/app/shared/navbar/navbar.component.css
@@ -26,6 +26,15 @@
.lang-circle-icon{
height: 26px;
}
+.navbar-left{
+ padding-top: 6px;
+ display: flex;
+ align-items: center;
+}
+.navbar-right{
+ display:flex;
+ align-items: center;
+}
@media (max-width: 1199px) {
.navbar-collapse .nav > .divider-vertical {
@@ -39,6 +48,7 @@
}
.navbar-left,.navbar-right {
float: none !important;
+ display:block;
}
.navbar-toggle {
display: block;
@@ -81,10 +91,11 @@
}
.navbar .divider-vertical {
- height: 50px;
+ height: 30px;
+ width: 1px;
margin: 0 5px;
- border-right: 2px solid #ffffff;
- border-left: 2px solid #e6e6e6;
+ background-color: #6D788E;
+ border-radius: 99px;
}
.navbar-inverse .divider-vertical {
@@ -93,8 +104,18 @@
}
.btn{
+ background: transparent;
margin-left: 5px;
}
+.btn:hover:active:focus{
+ color:#142548;
+ background: #D1D1D1;
+}
+.btn:focus{
+ color:#142548;
+ background: #D1D1D1;
+ outline: none;
+}
.navbar-list, .navbar-list:link {
color: rgb(51, 51, 51);
@@ -141,6 +162,10 @@
padding-bottom: 10px;
line-height: 20px;
}
+.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
+ background-color: #233354;
+ background-image: unset;
+}
.dropdown-menu>li>span {
display: block;
@@ -172,3 +197,24 @@
overflow: hidden;
border-top: 1px solid #e9ecef;
}
+.navbar-default{
+ padding: 5px 0;
+ border-top: none;
+ color: #6D788E;
+}
+.navbar-default .navbar-nav>li>a{
+ color: #6D788E;
+ padding:10px;
+}
+.navbar-default .navbar-nav>.active>a{
+ border-radius: 5px;
+ color: #142548;
+ padding:10px;
+ background-color: #D1D1D1;
+}
+.navbar-default .navbar-nav>.open>a{
+ border-radius: 5px;
+ color: #142548;
+ padding:10px;
+ background-color: #D1D1D1;
+}
diff --git a/src/app/shared/navbar/navbar.component.html b/src/app/shared/navbar/navbar.component.html
index b898849bbbf7c85bb791048f7e9d4a657ce74a70..b75127c4b75f76f275941006c1910aa93457bac3 100644
--- a/src/app/shared/navbar/navbar.component.html
+++ b/src/app/shared/navbar/navbar.component.html
@@ -1,7 +1,7 @@
<nav class="navbar navbar-default" id="navbar" role="navigation" style="margin:0">
<div class="container-fluid">
<div class="navbar-header">
- <a routerLink="/"><img alt="Geant" src="assets/images/logo-small.png" style="margin: 5px; height:35px"></a>
+ <a routerLink="/"><img alt="Geant" src="assets/images/logo-small.png" style="margin: 8px; padding:4px; height:35px"></a>
<button class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle Navigation</span>
<em class="fas fa-bars"></em>
@@ -108,9 +108,13 @@
<ul *ngIf="!authService.isLogged()" class="nav navbar-nav pull-right-lg" id="navbar-main-not-logged">
<li>
- <button *ngIf="router.url == '/welcome' || router.url.startsWith('/welcome/login') || router.url == '/welcome/registration'"
- class="btn navbar-btn" data-target="#login-register-panel" data-toggle="collapse">
- {{ 'NAVBAR.LOGIN_REGISTER' | translate }}
+ <button *ngIf="router.url == '/welcome' || router.url.startsWith('/welcome/login') || router.url == '/welcome/registration'" data-parent="#accordion"
+ class="btn navbar-btn accordion-group" data-target="#login-panel" data-toggle="collapse" [routerLink]="['welcome/login']">
+ {{ 'WELCOME.LOGIN' | translate }}
+ </button>
+ <button *ngIf="router.url == '/welcome' || router.url.startsWith('/welcome/login') || router.url == '/welcome/registration'" data-parent="#accordion"
+ class="btn navbar-btn accordion-group" data-target="#register-panel" data-toggle="collapse" [routerLink]="['welcome/registration']">
+ {{ 'WELCOME.REGISTER' | translate }}
</button>
</li>
<li *ngIf="isServiceAvailable">
diff --git a/src/app/welcome/welcome.component.css b/src/app/welcome/welcome.component.css
index 76984195d58c20099c365139aac96eec3bec037b..ec3a5b4ffd080d0ed247a66375287187b41bac18 100644
--- a/src/app/welcome/welcome.component.css
+++ b/src/app/welcome/welcome.component.css
@@ -75,3 +75,9 @@ html, body {
stroke-dashoffset: 0;
}
}
+.panel-group{
+ margin: 0;
+}
+.panel+.panel{
+ margin: 0;
+}
diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html
index b37b7f0c7fcaa3906604873d76991701c59e784c..d718b56dd64f3b90370967dd8b66a52dab6379c9 100644
--- a/src/app/welcome/welcome.component.html
+++ b/src/app/welcome/welcome.component.html
@@ -12,7 +12,7 @@
<div *ngIf="landingProfile === 'VNOC'; else elseBlock">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container"
- style="text-align: justify; padding: 0">
+ style="text-align: justify; padding: 0">
<div class="col-lg-12" style="padding: 0">
<section class="flex" style="justify-content: space-between; align-items: center;">
<div class="flex flex-column w-50" style="padding-left:160px; align-items: center">
@@ -44,21 +44,27 @@
</div>
</section>
</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; padding-top: 20px">
- <div class="panel panel-default">
- <div class="panel-heading">
+ <div class="panel-group" id="accordion">
+ <div class="panel panel-default" style="border:none">
+ <div id="login-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset panel-collapse collapse"
+ [ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
+ style="z-index: 800; position: fixed; right: 1px; max-height: 50vh; font-size: 14px;">
+ <div class="panel panel-default ">
+ <div class="panel-body" id="login-out" style="overflow-y: auto;">
+ <nmaas-login></nmaas-login>
+ </div>
+ </div>
</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 class="panel panel-default" style="border:none" >
+ <div id="register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset panel-collapse collapse"
+ [ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
+ style="z-index: 800; position: fixed; right: 1px; max-height: 50vh; font-size: 14px;">
+ <div class="panel panel-default">
+ <div class="panel-body" id="login-out" style="overflow-y: auto;">
+ <nmaas-registration></nmaas-registration>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -139,21 +145,27 @@
</div>
</section>
</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; padding-top: 20px">
- <div class="panel panel-default">
- <div class="panel-heading">
+ <div class="panel-group" id="accordion">
+ <div class="panel panel-default" style="border:none">
+ <div id="login-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset panel-collapse collapse"
+ [ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
+ style="z-index: 800; position: fixed; right: 1px; max-height: 50vh; font-size: 14px;">
+ <div class="panel panel-default ">
+ <div class="panel-body" id="login-out" style="overflow-y: auto;">
+ <nmaas-login></nmaas-login>
+ </div>
+ </div>
</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 class="panel panel-default" style="border:none" >
+ <div id="register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset panel-collapse collapse"
+ [ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
+ style="z-index: 800; position: fixed; right: 1px; max-height: 50vh; font-size: 14px;">
+ <div class="panel panel-default">
+ <div class="panel-body" id="login-out" style="overflow-y: auto;">
+ <nmaas-registration></nmaas-registration>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/src/styles.css b/src/styles.css
index c110a6bc21c49b1d708da99f6cae895ba3d1534c..1e608c31cb0b02c4dc8573e311be7325a5a2e82f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -54,3 +54,20 @@
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
+.btn-primary{
+ background:#233354;
+ border:none;
+}
+.btn-primary:hover{
+ background: #414f6b;
+ border:none;
+}
+.btn-primary[disabled]{
+ text-shadow:none;
+ background: #414f6b;
+ cursor: not-allowed;
+ /*color: #61b4f9;*/
+}
+.btn-primary[disabled]:hover{
+ background: #414f6b;
+}