hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Optimize style for login & sign-up

pull/59/head
HardiReady 2019-03-02 22:32:49 +01:00
parent fe7140afd9
commit 8ce3f10ee8
3 changed files with 38 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/src/app/login/login.component.html
View File

@ -1,6 +1,6 @@
<form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
<div class="row">
<h2 class="form-signin-heading">{{'login.headline' | translate}}</h2>
<h2>{{'login.headline' | translate}}</h2>
<label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
<input #userName id="inputEmail" class="form-control"
@ -11,12 +11,10 @@
<input #password type="password" id="inputPassword" class="form-control"
placeholder="{{'login.password' | translate}}" required="">
<div class="form-group">
<button mat-stroked-button type="submit">
<span *ngIf="!loading">{{'login.submit' | translate}}</span>
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</button>
</div>
<button mat-stroked-button type="submit">
<span *ngIf="!loading">{{'login.submit' | translate}}</span>
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</button>
</div>
</form>

64
static/src/app/login/login.component.scss
View File

@ -2,53 +2,31 @@
width: 100%;
padding: 15px;
margin: 0 auto;
}
.form-signin > .row {
max-width: 400px;
margin: auto;
}
& > .row {
max-width: 400px;
margin: auto;
.form-signin-heading {
text-align: center;
}
& > h2 {
text-align: center
}
.form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
margin-bottom: 10px;
}
input.form-control {
margin-bottom: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
button {
width: 100%;
button {
width: 100%;
}
}
}
/* Loading Animation */

23
static/src/app/login/signup.component.html
View File

@ -1,26 +1,27 @@
<form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
<div class="row" style="position: absolute;width: 500px;left: 40%;">
<h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2>
<div class="row">
<h2>{{'signup.headline' | translate}}</h2>
<p [innerHtml]="'signup.description' | translate"></p>
<label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
<input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required="" autofocus="">
<input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required=""
autofocus="">
<label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
<input #password type="password" id="inputPassword" class="form-control" placeholder="{{'signup.password' | translate}}" required="">
<input #password type="password" id="inputPassword" class="form-control"
placeholder="{{'signup.password' | translate}}" required="">
<label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
<input #secret type="text" id="inputSecret" class="form-control" placeholder="{{'signup.secret.placeholder' | translate}}"
<input #secret type="text" id="inputSecret" class="form-control"
placeholder="{{'signup.secret.placeholder' | translate}}"
required="">
<div class="form-group">
<button type="submit" class="btn btn-lg btn-block btn-primary">
<span *ngIf="!loading">{{'signup.submit' | translate}}</span>
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</button>
</div>
<button mat-stroked-button type="submit">
<span *ngIf="!loading">{{'signup.submit' | translate}}</span>
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</button>
</div>
</form>