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

redesign-login page_v2

This commit is contained in:
gpapavgeri 2020-07-13 14:32:45 +03:00
parent f8f6bac47d
commit bdc55c9142
3 changed files with 122 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,56 +1,48 @@
<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="card login-card"> <div class="card login-card">
<div class="container card-body"> <div class="container card-body">
<h3 class="card-title title">{{'GENERAL.TITLES.SIGN-IN' | translate}}</h3> <h3 class="card-title title">{{'GENERAL.TITLES.SIGN-IN' | translate}}</h3>
<hr class="line"> <hr class="line">
<ul class="list-group list-group-flush">
<li class="list-group-item"> <div class="row justify-content-center">
<div class="row pt-2 mb-4 accesss-methods"> <div class="d-flex flex-column">
<div *ngIf="hasOrcidOauth()" class="col-auto orcid-logo"> <div *ngIf="hasOpenAireOauth()" class="col-auto pb-4 pr-4">
<button class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button"> <button mat-icon-button (click)="openaireLogin()" class="d-flex justify-content-center">
<span class="orcidIconMedium"></span>
</button>
</div>
<div *ngIf="hasOpenAireOauth()" class="col-auto openaire-logo">
<button class="openaire-button" mat-icon-button (click)="openaireLogin()"
class="login-social-button">
<span class="openaireIcon"></span> <span class="openaireIcon"></span>
</button> </button>
</div> </div>
<div *ngIf="hasB2AccessOauth()" class="col-auto logo"> <div *ngIf="hasGoogleOauth()" class="col-auto pr-4">
<button class="b2access-button" mat-icon-button (click)="b2AccessLogin()" <button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center">
class="login-social-button"> <span class="googleIcon"></span>
</button>
</div>
</div>
<div class="d-flex flex-column">
<div *ngIf="hasOrcidOauth()" class="col-auto pl-4 pr-4 pb-4">
<button mat-icon-button (click)="orcidLogin()" class="d-flex justify-content-center">
<span class="orcidIconMedium"></span>
</button>
</div>
<div *ngIf="hasFacebookOauth()" class="col-auto pl-4 pr-4">
<button mat-icon-button (click)="facebookLogin()" class="d-flex justify-content-center">
<span class="facebookIcon"></span>
</button>
</div>
</div>
<div class="d-flex flex-column">
<div *ngIf="hasB2AccessOauth()" class="col-auto pl-4 pb-4">
<button mat-icon-button (click)="b2AccessLogin()" class="d-flex justify-content-center">
<span class="iconmedium"></span> <span class="iconmedium"></span>
</button> </button>
</div> </div>
</div> <div *ngIf="hasTwitterOauth()" class="col-auto pl-4">
</li> <button mat-icon-button (click)="twitterLogin()" class="d-flex justify-content-center">
<li class="list-group-item"> <span class="twitterIcon"></span>
<div *ngIf="hasGoogleOauth()" class="row social-btns">
<div class="col-auto">
<button mat-icon-button id="googleSignInButton" class="login-social-button">
<i class="fa fa-google"></i>
</button>
</div>
<!-- <div *ngIf="hasLinkedInOauth()" class="col-auto">
<button mat-icon-button class="login-social-button">
<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
</button>
</div> -->
<div *ngIf="hasFacebookOauth()" class="col-auto">
<button mat-icon-button (click)="facebookLogin()" class="login-social-button">
<i class="fa fa-facebook-square"></i>
</button>
</div>
<div *ngIf="hasTwitterOauth()" class="col-auto">
<button mat-icon-button (click)="twitterLogin()" class="login-social-button">
<i class="fa fa-twitter"></i>
</button> </button>
</div> </div>
</div> </div>
</li> </div>
<li class="list-group-item"> <div class="row justify-content-center">
<div *ngIf="hasConfigurableProviders()" class="row pt-2 mb-4 accesss-methods"> <div *ngIf="hasConfigurableProviders()" class="row pt-2 mb-4 accesss-methods">
<div *ngFor="let provider of this.configurableProviderService.providers" <div *ngFor="let provider of this.configurableProviderService.providers"
class="col-auto configurable-logo"> class="col-auto configurable-logo">
@ -60,14 +52,12 @@
</button> </button>
</div> </div>
</div> </div>
<div *ngIf="hasZenodoOauth()" class="col-auto zenodo-logo"> <div *ngIf="hasZenodoOauth()" class="col-auto mt-4">
<button class="zenodo-button" mat-icon-button (click)="zenodoLogin()" class="login-social-button"> <button mat-icon-button (click)="zenodoLogin()" class="d-flex justify-content-center">
<span class="zenodoIcon"></span> <span class="zenodoIcon"></span>
<!-- <span></span> -->
</button> </button>
</div> </div>
</li> </div>
</ul>
</div> </div>
<div class="card-footer laptop-img"></div> <div class="card-footer laptop-img"></div>
</div> </div>

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

@ -1,21 +1,18 @@
.login-screen { .login-screen {
margin-top: 70px; margin-top: 70px;
// min-height: 517.44px;
min-height: calc(100vh - 10px); min-height: calc(100vh - 10px);
} }
.login-card { .login-card {
// width: auto; // width: auto;
width: 510.92px; width: 510.92px;
height: 517.44px;
margin-top: 0; margin-top: 0;
} }
.container {
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);
box-shadow: 0px 1px 3px #00000038;
border-radius: 6px; border-radius: 6px;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
background: #fff; background: #fff;
@ -36,18 +33,21 @@
height: 60px; height: 60px;
letter-spacing: -0.95px; letter-spacing: -0.95px;
color: #23BCBA; color: #23BCBA;
margin-top: 11px;
margin-bottom: 21px; margin-bottom: 21px;
} }
.line { .line {
border-top: 5px solid #23BCBA; border-top: 5px solid #23BCBA;
width: 116px; width: 116px;
margin-bottom: 97px;
} }
.container { .container {
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 15px 30px;
} }
@-webkit-keyframes card { @-webkit-keyframes card {
@ -114,25 +114,25 @@
margin-top: 5px; margin-top: 5px;
} }
.social-btns { // .social-btns {
height: 6em; // height: 6em;
justify-content: center; // justify-content: center;
} // }
.social-btns i { // .social-btns i {
font-size: 2.5em; // font-size: 2.5em;
padding: 0.8em; // padding: 0.8em;
// color: #fff; // color: #fff;
} // }
.social-btns .col { // .social-btns .col {
flex-grow: 0; // flex-grow: 0;
} // }
.social-btns i:hover { // .social-btns i:hover {
background-color: #f5f5f51c; // background-color: #f5f5f51c;
border-radius: 60%; // border-radius: 60%;
} // }
.accesss-methods { .accesss-methods {
height: 5em; height: 5em;
@ -224,27 +224,50 @@
height: 25px; height: 25px;
} }
span.iconmedium { span.googleIcon {
background: url(img/b2access_medium.png) no-repeat; background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(2\).png") no-repeat;
float: left;
width: 100px;
height: 56px;
} }
span.orcidIconMedium { span.facebookIcon {
background: url(img/ORCIDiD_medium.png) no-repeat; background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(4\).png") no-repeat;
background-position: center; }
float: right;
width: 56px; span.twitterIcon {
height: 56px; background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(5\).png") no-repeat;
}
span.googleIcon, span.facebookIcon, span.twitterIcon {
float: left;
transform: scale(0.8);
width: 45px;
height: 45px;
} }
span.openaireIcon { span.openaireIcon {
background: url(img/openaire_small.png) no-repeat; background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(6\).png") no-repeat;
background-position: center; background-position: center;
float: right; float: right;
width: 80px; transform: scale(0.8);
height: 56px; width: 50px;
height: 45px;
}
span.orcidIconMedium {
background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy.png") no-repeat;
background-position: center;
float: left;
transform: scale(0.80);
width: 50px;
height: 45px;
}
span.iconmedium {
background: url("../../../../assets/images/argos-login/NoPath\ -\ Copy\ \(7\).png") no-repeat;
float: left;
transform: scale(0.85);
width: 67px;
height: 40px;
} }
span.configurableIcon { span.configurableIcon {
@ -254,11 +277,12 @@ span.configurableIcon {
} }
span.zenodoIcon { span.zenodoIcon {
background: url(img/zenodo-white-200.png) no-repeat 100px 56px; background: url("../../../../assets/images/argos-login/zenodo-gradient-200.png") no-repeat;
background-position: center; background-position: center;
float: right; float: right;
width: 150px; transform: scale(0.70);
height: 56px; width: 200px;
height: 80px;
} }
.b2access-button { .b2access-button {
@ -296,10 +320,10 @@ span.zenodoIcon {
.laptop-img { .laptop-img {
background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat; background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat;
width: 116px; width: 116px;
height: 139px; height: 200px;
position: relative; position: relative;
top: 60px; top: 58px;
left: 245px; left: 243px;
} }
.login-bg { .login-bg {

BIN
dmp-frontend/src/assets/images/argos-login/zenodo-gradient-200.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB