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

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

@ -1,73 +1,63 @@
<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="container card-body">
<h3 class="card-title title">{{'GENERAL.TITLES.SIGN-IN' | translate}}</h3>
<hr class="line">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row pt-2 mb-4 accesss-methods">
<div *ngIf="hasOrcidOauth()" class="col-auto orcid-logo">
<button class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button">
<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>
</button>
</div>
<div *ngIf="hasB2AccessOauth()" class="col-auto logo">
<button class="b2access-button" mat-icon-button (click)="b2AccessLogin()"
class="login-social-button">
<span class="iconmedium"></span>
</button>
</div>
</div>
</li>
<li class="list-group-item">
<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>
</div>
</div>
</li>
<li class="list-group-item">
<div *ngIf="hasConfigurableProviders()" class="row pt-2 mb-4 accesss-methods">
<div *ngFor="let provider of this.configurableProviderService.providers"
class="col-auto configurable-logo">
<button mat-icon-button class="configurable-button" (click)="configurableLogin(provider)"
class="login-social-button">
<span class="configurableIcon">{{provider.name}}</span>
</button>
</div>
</div>
<div *ngIf="hasZenodoOauth()" class="col-auto zenodo-logo">
<button class="zenodo-button" mat-icon-button (click)="zenodoLogin()" class="login-social-button">
<span class="zenodoIcon"></span>
<!-- <span></span> -->
<div class="row justify-content-center">
<div class="d-flex flex-column">
<div *ngIf="hasOpenAireOauth()" class="col-auto pb-4 pr-4">
<button mat-icon-button (click)="openaireLogin()" class="d-flex justify-content-center">
<span class="openaireIcon"></span>
</button>
</div>
</li>
</ul>
<div *ngIf="hasGoogleOauth()" class="col-auto pr-4">
<button mat-icon-button id="googleSignInButton" class="d-flex justify-content-center">
<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>
</button>
</div>
<div *ngIf="hasTwitterOauth()" class="col-auto pl-4">
<button mat-icon-button (click)="twitterLogin()" class="d-flex justify-content-center">
<span class="twitterIcon"></span>
</button>
</div>
</div>
</div>
<div class="row justify-content-center">
<div *ngIf="hasConfigurableProviders()" class="row pt-2 mb-4 accesss-methods">
<div *ngFor="let provider of this.configurableProviderService.providers"
class="col-auto configurable-logo">
<button mat-icon-button class="configurable-button" (click)="configurableLogin(provider)"
class="login-social-button">
<span class="configurableIcon">{{provider.name}}</span>
</button>
</div>
</div>
<div *ngIf="hasZenodoOauth()" class="col-auto mt-4">
<button mat-icon-button (click)="zenodoLogin()" class="d-flex justify-content-center">
<span class="zenodoIcon"></span>
</button>
</div>
</div>
</div>
<div class="card-footer laptop-img"></div>
</div>

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

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