MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Merge branch 'Development' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot into Development

This commit is contained in:
gkolokythas 2019-09-13 18:01:03 +03:00
parent 2c4070135e a45c208f38
commit 7647b4c290
2 changed files with 131 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
dmp-frontend/src/app/ui/auth/login/login.component.html
View File

@ -1,9 +1,9 @@
<div class="login-screen login-bg d-flex flex-column align-items-center justify-content-center"> <div class="login-screen login-bg d-flex flex-column align-items-center justify-content-center">
<div class="login-logo"></div> <div class="login-logo"></div>
<div class="card login-card"> <div class="card login-card">
<div class="card-header"> <div class="container card-header">
<div class="social-btns d-flex flex-column"> <div class="row social-btns">
<div class="row"> <div class="col">
<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button"> <button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button">
<i class="fa fa-google"></i> <i class="fa fa-google"></i>
</button> </button>
@ -17,17 +17,18 @@
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
</button> </button>
</div> </div>
<div class="row justify-content-center"> </div>
<div class="row mt-2 accesss-methods">
<div class="col justify-content-center">
<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button"> <button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
<span class="iconmedium"></span> <span class="iconmedium"></span>
<span></span> <!-- <span></span> -->
</button> </button>
<button *ngIf="hasOrcidOauth()" class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button"> <button *ngIf="hasOrcidOauth()" class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button">
<span class="orcidIconMedium"></span> <span class="orcidIconMedium"></span>
<span></span> <!-- <span></span> -->
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">

237
dmp-frontend/src/app/ui/auth/login/login.component.scss
View File

@ -1,151 +1,156 @@
.login-screen { .login-screen {
margin-top: 70px; margin-top: 70px;
height: calc(100vh - 10px); height: calc(100vh - 10px);
} }
.login-card { .login-card {
width: auto; width: auto;
margin-top: 0; margin-top: 0;
} }
.container { .container {
padding: 15px 30px; padding: 15px 30px;
} }
.card { .card {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px; border-radius: 6px;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
background: #fff; background: #fff;
} }
.card-raised { .card-raised {
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.2);
} }
.page-title { .page-title {
margin-top: 40px; margin-top: 40px;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container { .container {
width: 100%; width: 100%;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.container { .container {
width: 100%; width: 100%;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
width: 100%; width: 100%;
} }
} }
.container { .container {
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.card { .card {
position: relative; position: relative;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 50px; margin-top: 50px;
top: -50px; top: -50px;
-webkit-animation-name: card; -webkit-animation-name: card;
-moz-animation-name: card; -moz-animation-name: card;
-o-animation-name: card; -o-animation-name: card;
animation-name: card; animation-name: card;
-webkit-animation-duration: 600ms; -webkit-animation-duration: 600ms;
-moz-animation-duration: 600ms; -moz-animation-duration: 600ms;
-o-animation-duration: 600ms; -o-animation-duration: 600ms;
animation-duration: 600ms; animation-duration: 600ms;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@-webkit-keyframes card { @-webkit-keyframes card {
from { from {
top: -40px; top: -40px;
} }
to { to {
top: 0; top: 0;
} }
} }
@keyframes card { @keyframes card {
from { from {
top: -40px; top: -40px;
} }
to { to {
top: 0; top: 0;
} }
} }
.card-header { .card-header {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
top: -40px; top: -50px;
width: 100%; width: 100%;
min-height: 134px; min-height: 200px;
padding: 25px; padding: 25px;
border-radius: 3px; border-radius: 3px;
background: rgb(0, 112, 192); background: rgb(0, 112, 192);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.card-header h4 { .card-header h4 {
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
margin-bottom: 25px; margin-bottom: 25px;
margin-top: 5px; margin-top: 5px;
}
.social-btns {
height: 6em;
} }
.social-btns i { .social-btns i {
font-size: 2.5em; font-size: 2.5em;
padding: 1em; padding: 1em;
color: #fff; color: #fff;
} }
.tip { .tip {
margin-top: -20px; margin-top: -20px;
} }
.form-row, .form-row,
.card-form, .card-form,
.mat-form-field { .mat-form-field {
width: 100%; width: 100%;
} }
.card-form { .card-form {
padding: 5px; padding: 5px;
} }
.form-row { .form-row {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 13px; margin-top: 13px;
} }
.form-row i { .form-row i {
position: relative; position: relative;
top: -5px; top: -5px;
margin-right: 15px; margin-right: 15px;
color: #555; color: #555;
} }
.card-footer { .card-footer {
@ -156,59 +161,63 @@
} }
.card-footer button { .card-footer button {
color: #e91e63; color: #e91e63;
} }
.btn span.icon { .btn span.icon {
background: url(img/b2access_small.png) no-repeat; background: url(img/b2access_small.png) no-repeat;
float: left; float: left;
width: 45px; width: 45px;
height: 25px; height: 25px;
} }
span.iconmedium { span.iconmedium {
background: url(img/b2access_medium.png) no-repeat; background: url(img/b2access_medium.png) no-repeat;
float: left; float: left;
width: 100px; width: 100px;
height: 56px; height: 56px;
margin-left: 2em; margin-left: 2em;
margin-right: 2em; margin-right: 2em;
} }
span.orcidIconMedium { span.orcidIconMedium {
background: url(img/ORCIDiD_medium.png) no-repeat; background: url(img/ORCIDiD_medium.png) no-repeat;
background-position: center; background-position: center;
float: right; float: right;
width: 100px; width: 100px;
height: 56px; height: 56px;
margin-left: 2em; margin-left: 2em;
margin-right: 2em; margin-right: 2em;
} }
.b2access-button { .b2access-button {
margin-top: 10px; margin-top: 10px;
width: fit-content; width: fit-content;
} }
.orcid-button { .orcid-button {
margin-top: 10px; margin-top: 10px;
width: fit-content; width: fit-content;
} }
.login-logo { .login-logo {
background: url(img/open-dmp.png) no-repeat; background: url(img/open-dmp.png) no-repeat;
width: 370px; width: 370px;
height: 300px; height: 300px;
background-size: cover; background-size: cover;
margin-top: -10em; margin-top: -10em;
} }
.login-bg { .login-bg {
background: url(img/login_bg.png) no-repeat; background: url(img/login_bg.png) no-repeat;
background-size: cover; background-size: cover;
} }
.login-social-button { .login-social-button {
width: auto; width: auto;
height: auto; height: auto;
}
.accesss-methods {
height: 5em;
} }