login design refresh

This commit is contained in:
Benjamin Gamard 2018-03-01 17:10:48 +01:00
parent 4795d8f48c
commit b13c2ccd32
3 changed files with 85 additions and 50 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -8,12 +8,29 @@
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border: none;
color: #fff;
}
@media screen and (min-width: 768px) {
.footer {
width: 50%;
}
}
/* Smaller links everywhere on login */
a {
font-size: 90%;
color: #666;
}
</style>
<div class="row vertical-center login-box-container">
<div class="col-sm-offset-5 col-sm-2 col-xs-offset-1 col-xs-10 login-box">
<div class="row vertical-center">
<div class="col-sm-6 col-xs-12 login-box">
<div class="row">
<div class="col-sm-offset-4 col-sm-4 col-xs-offset-1 col-xs-10">
<img src="img/title.png" class="img-responsive" />
<form>
<div class="form-group">
<label class="sr-only" for="inputUsername">{{ 'login.username' | translate }}</label>
@ -34,19 +51,25 @@
<input class="form-control" type="text" id="inputCode" ng-attr-placeholder="{{ 'login.validation_code' | translate }}" ng-model="user.code" />
</div>
<div class="checkbox">
<div class="checkbox text-muted">
<label>
<input type="checkbox" ng-model="user.remember" /> {{ 'login.remember_me' | translate }}
</label>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-click="login()">
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-primary" ng-click="login()">
<span class="glyphicon glyphicon-ok"></span> {{ 'login.submit' | translate }}
</button>
</div>
<div class="text-center well-sm btn-password-lost">
<div class="col-md-6 text-right btn-password-lost">
<div class="well-sm">
<a href ng-click="openPasswordLost()">{{ 'login.password_lost_btn' | translate }}</a>
</div>
</div>
</div>
<p class="text-center" ng-if="app.guest_login">&nbsp;</p>
@ -55,4 +78,8 @@
</button>
</form>
</div>
</div>
</div>
<div class="login-img-container col-sm-6 hidden-xs"></div>
</div>

View File

@ -413,22 +413,30 @@ input[readonly].share-link {
}
// Login
.login-box-container {
.login-img-container {
background: url('../../api/theme/image/background') no-repeat center;
background-size: cover;
height: 100%;
box-shadow: 0 0 0 1px rgba(136,152,170,.1), 0 15px 35px 0 rgba(49,49,93,.1), 0 5px 15px 0 rgba(0,0,0,.13);
}
.login-box {
background: rgba(255, 255, 255, 0.5);
padding: 20px;
.help-block, .checkbox {
color: white;
}
.btn-password-lost {
padding-bottom: 0;
}
form .row .col-md-6 {
padding: 0;
}
.btn-primary {
background-color: #2aabd2;
border-color: transparent;
}
.img-responsive {
margin-bottom: 30px;
}
}
/* Styling for the ngProgress itself */