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

login page redesign

This commit is contained in:
Diamantis Tziotzios 2019-04-25 12:00:24 +03:00
parent 1c83289a65
commit e0f8b25f53
4 changed files with 144 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dmp-frontend/src/app/ui/auth/login/img/login_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

BIN
dmp-frontend/src/app/ui/auth/login/img/open-dmp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

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

@ -1,28 +1,30 @@
<div class="row"> <div class="login-screen login-bg d-flex flex-column align-items-center justify-content-center">
<div class="col"></div> <div class="login-logo"></div>
<div class="card col-auto"> <div class="card login-card">
<div class="card-header"> <div class="card-header">
<h4>Login</h4> <div class="social-btns d-flex">
<div class="social-btns"> <button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button">
<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton">
<i class="fa fa-google"></i> <i class="fa fa-google"></i>
</button> </button>
<button *ngIf="hasLinkedInOauth()" mat-icon-button> <button *ngIf="hasLinkedInOauth()" mat-icon-button class="login-social-button">
<i class="fa fa-linkedin" (click)="linkedInLogin()"></i> <i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
</button> </button>
<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()"> <button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()" class="login-social-button">
<i class="fa fa-facebook-square"></i> <i class="fa fa-facebook-square"></i>
</button> </button>
<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()"> <button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()" class="login-social-button">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
</button> </button>
</div> <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()">
<span class="iconmedium"></span> <span class="iconmedium"></span>
<span></span> <span></span>
</button> </button>
</div> </div>
<p>You dont need to have a registered account for OpenDMP</p>
</div> </div>
<div class="col"></div> <div class="card-footer">
<h4 class="text-uppercase"><strong>Login</strong></h4>
<br />
<h5>You dont need to have a registered account for OpenDMP</h5>
</div>
</div>
</div> </div>

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

@ -1,3 +1,13 @@
.login-screen {
margin-top: 70px;
height: calc(100vh - 10px);
}
.login-card {
width: auto;
margin-top: 0;
}
.container { .container {
padding: 15px 30px; padding: 15px 30px;
} }
@ -47,8 +57,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 90px; margin-top: 50px;
top: -90px; 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;
@ -67,6 +77,7 @@
from { from {
top: -40px; top: -40px;
} }
to { to {
top: 0; top: 0;
} }
@ -76,6 +87,7 @@
from { from {
top: -40px; top: -40px;
} }
to { to {
top: 0; top: 0;
} }
@ -88,8 +100,8 @@
width: 100%; width: 100%;
padding: 25px; padding: 25px;
border-radius: 3px; border-radius: 3px;
background: linear-gradient(60deg, #ec407a, #d81b60); background: rgb(0, 112, 192);
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4); // box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -103,14 +115,11 @@
} }
.social-btns i { .social-btns i {
font-size: 21px; font-size: 2.5em;
padding: 1em;
color: #fff; color: #fff;
} }
.social-btns button {
margin: 0 8px;
}
.tip { .tip {
margin-top: -20px; margin-top: -20px;
} }
@ -140,7 +149,10 @@
} }
.card-footer { .card-footer {
margin: 10px; padding: 0;
border-radius: 0;
align-items: start;
flex-direction: column;
} }
.card-footer button { .card-footer button {
@ -159,9 +171,29 @@ span.iconmedium {
float: left; float: left;
width: 100px; width: 100px;
height: 56px; height: 56px;
margin-left: 2em;
margin-right: 2em;
} }
.b2access-button { .b2access-button {
margin-top: 10px; margin-top: 10px;
width: fit-content; width: fit-content;
} }
.login-logo {
background: url(img/open-dmp.png) no-repeat;
width: 370px;
height: 300px;
background-size: cover;
margin-top: -10em;
}
.login-bg {
background: url(img/login_bg.png) no-repeat;
background-size: cover;
}
.login-social-button {
width: auto;
height: auto;
}