redesign-login page_v1
This commit is contained in:
parent
09f207eb6e
commit
187831ec08
|
@ -1,4 +1,84 @@
|
||||||
<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="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> -->
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer laptop-img"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <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="container card-header">
|
<div class="container card-header">
|
||||||
|
@ -25,28 +105,28 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-100"></div>
|
<div class="w-100"></div>
|
||||||
<div class="row pt-2 mb-4 accesss-methods">
|
<div class="row pt-2 mb-4 accesss-methods"> -->
|
||||||
<!-- <div class="col justify-content-center"> -->
|
<!-- <div class="col justify-content-center"> -->
|
||||||
<div *ngIf="hasB2AccessOauth()" class="col-auto logo">
|
<!-- <div *ngIf="hasB2AccessOauth()" class="col-auto logo">
|
||||||
<button class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
|
<button 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>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="hasOrcidOauth()" class="col-auto orcid-logo">
|
<div *ngIf="hasOrcidOauth()" class="col-auto orcid-logo">
|
||||||
<button class="orcid-button" mat-icon-button (click)="orcidLogin()" class="login-social-button">
|
<button 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 *ngIf="hasOpenAireOauth()" class="col-auto openaire-logo">
|
<div *ngIf="hasOpenAireOauth()" class="col-auto openaire-logo">
|
||||||
<button class="openaire-button" mat-icon-button (click)="openaireLogin()" class="login-social-button">
|
<button class="openaire-button" mat-icon-button (click)="openaireLogin()" class="login-social-button">
|
||||||
<span class="openaireIcon"></span>
|
<span class="openaireIcon"></span> -->
|
||||||
<!-- <span></span> -->
|
<!-- <span></span> -->
|
||||||
</button>
|
<!-- </button>
|
||||||
</div>
|
</div> -->
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
</div>
|
<!-- </div>
|
||||||
<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" class="col-auto configurable-logo">
|
<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">
|
<button mat-icon-button class="configurable-button" (click)="configurableLogin(provider)" class="login-social-button">
|
||||||
|
@ -56,9 +136,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="hasZenodoOauth()" class="col-auto zenodo-logo">
|
<div *ngIf="hasZenodoOauth()" class="col-auto zenodo-logo">
|
||||||
<button class="zenodo-button" mat-icon-button (click)="zenodoLogin()" class="login-social-button">
|
<button class="zenodo-button" mat-icon-button (click)="zenodoLogin()" class="login-social-button">
|
||||||
<span class="zenodoIcon"></span>
|
<span class="zenodoIcon"></span> -->
|
||||||
<!-- <span></span> -->
|
<!-- <span></span> -->
|
||||||
</button>
|
<!-- </button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
|
@ -69,4 +149,4 @@
|
||||||
<h5>{{ 'HOME.LOGIN.TEXT' | translate }}</h5>
|
<h5>{{ 'HOME.LOGIN.TEXT' | translate }}</h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
|
@ -1,10 +1,12 @@
|
||||||
.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;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,6 +30,20 @@
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font: Bold 38px/82px Roboto;
|
||||||
|
height: 60px;
|
||||||
|
letter-spacing: -0.95px;
|
||||||
|
color: #23BCBA;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
border-top: 5px solid #23BCBA;
|
||||||
|
width: 116px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -106,7 +122,7 @@
|
||||||
.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 {
|
||||||
|
@ -270,15 +286,24 @@ span.zenodoIcon {
|
||||||
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: 273px;
|
// width: 273px;
|
||||||
height: 300px;
|
// height: 300px;
|
||||||
background-size: cover;
|
// background-size: cover;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.laptop-img {
|
||||||
|
background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat;
|
||||||
|
width: 116px;
|
||||||
|
height: 139px;
|
||||||
|
position: relative;
|
||||||
|
top: 60px;
|
||||||
|
left: 245px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -126,7 +126,8 @@
|
||||||
"DATASET-PROFILES-CLONE": "New Clone of Dataset Description Template",
|
"DATASET-PROFILES-CLONE": "New Clone of Dataset Description Template",
|
||||||
"LANGUAGE-EDITOR": "Language Editor",
|
"LANGUAGE-EDITOR": "Language Editor",
|
||||||
"GUIDE-EDITOR": "User Guide Editor",
|
"GUIDE-EDITOR": "User Guide Editor",
|
||||||
"LANGUAGE": "Language"
|
"LANGUAGE": "Language",
|
||||||
|
"SIGN-IN":"Sign in to account"
|
||||||
},
|
},
|
||||||
"FILE-TYPES": {
|
"FILE-TYPES": {
|
||||||
"PDF": "PDF",
|
"PDF": "PDF",
|
||||||
|
|
|
@ -125,7 +125,8 @@
|
||||||
"DATASET-PROFILES-CLONE": "Nueva copia de la plantilla de descripción del Dataset",
|
"DATASET-PROFILES-CLONE": "Nueva copia de la plantilla de descripción del Dataset",
|
||||||
"LANGUAGE-EDITOR": "Language Editor",
|
"LANGUAGE-EDITOR": "Language Editor",
|
||||||
"GUIDE-EDITOR": "User Guide Editor",
|
"GUIDE-EDITOR": "User Guide Editor",
|
||||||
"LANGUAGE": "Language"
|
"LANGUAGE": "Language",
|
||||||
|
"SIGN-IN":"Sign in to account"
|
||||||
},
|
},
|
||||||
"FILE-TYPES": {
|
"FILE-TYPES": {
|
||||||
"PDF": "PDF",
|
"PDF": "PDF",
|
||||||
|
|
|
@ -125,7 +125,8 @@
|
||||||
"DATASET-PROFILES-CLONE": "Νέα Κλωνοποίηση του template Περιγραφής Συνόλου Δεδομένων",
|
"DATASET-PROFILES-CLONE": "Νέα Κλωνοποίηση του template Περιγραφής Συνόλου Δεδομένων",
|
||||||
"LANGUAGE-EDITOR": "Επεξεργασία γλώσσας",
|
"LANGUAGE-EDITOR": "Επεξεργασία γλώσσας",
|
||||||
"GUIDE-EDITOR": "Επεξεργασία Οδηγού Χρήσης",
|
"GUIDE-EDITOR": "Επεξεργασία Οδηγού Χρήσης",
|
||||||
"LANGUAGE": "Γλώσσα"
|
"LANGUAGE": "Γλώσσα",
|
||||||
|
"SIGN-IN":"Sign in to account"
|
||||||
},
|
},
|
||||||
"FILE-TYPES": {
|
"FILE-TYPES": {
|
||||||
"PDF": "PDF",
|
"PDF": "PDF",
|
||||||
|
|
Loading…
Reference in New Issue