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

32
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>
<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
<span class="iconmedium"></span>
<span></span>
</button>
</div> </div>
<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()">
<span class="iconmedium"></span>
<span></span>
</button>
</div> </div>
<p>You dont need to have a registered account for OpenDMP</p> <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 class="col"></div>
</div> </div>

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

@ -1,167 +1,199 @@
.login-screen {
margin-top: 70px;
height: calc(100vh - 10px);
}
.login-card {
width: auto;
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: 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;
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 {
top: 0; to {
} top: 0;
}
} }
@keyframes card { @keyframes card {
from { from {
top: -40px; top: -40px;
} }
to {
top: 0; to {
} top: 0;
}
} }
.card-header { .card-header {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
top: -40px; top: -40px;
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;
} }
.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 i { .social-btns i {
font-size: 21px; font-size: 2.5em;
color: #fff; padding: 1em;
} color: #fff;
.social-btns button {
margin: 0 8px;
} }
.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 {
margin: 10px; padding: 0;
border-radius: 0;
align-items: start;
flex-direction: column;
} }
.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-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;
} }