vmario/docs
1
0
Fork 0
mirror of https://github.com/sismics/docs.git synced 2024-11-22 05:57:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

login design refresh

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs-web/src/main/webapp/src/img/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

111
docs-web/src/main/webapp/src/partial/docs/login.html
View File

@ -8,51 +8,78 @@
.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">
<form>
<div class="form-group">
<label class="sr-only" for="inputUsername">{{ 'login.username' | translate }}</label>
<input class="form-control" type="text" id="inputUsername" ng-attr-placeholder="{{ 'login.username' | translate }}" ng-model="user.username" />
<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>
<input class="form-control" type="text" id="inputUsername" ng-attr-placeholder="{{ 'login.username' | translate }}" ng-model="user.username" />
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">{{ 'login.password' | translate }}</label>
<input class="form-control" type="password" id="inputPassword" ng-attr-placeholder="{{ 'login.password' | translate }}" ng-model="user.password" />
</div>
<span class="help-block" ng-if="codeRequired">
{{ 'login.validation_code_required' | translate }}
<span class="glyphicon glyphicon-question-sign" title="{{ 'login.validation_code_title' | translate }}"></span>
</span>
<div class="form-group" ng-if="codeRequired">
<label class="sr-only" for="inputCode">{{ 'login.validation_code' | translate }}</label>
<input class="form-control" type="text" id="inputCode" ng-attr-placeholder="{{ 'login.validation_code' | translate }}" ng-model="user.code" />
</div>
<div class="checkbox text-muted">
<label>
<input type="checkbox" ng-model="user.remember" /> {{ 'login.remember_me' | translate }}
</label>
</div>
<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="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>
<button type="submit" class="btn btn-default btn-block" ng-if="app.guest_login" ng-click="loginAsGuest()">
<span class="glyphicon glyphicon-user"></span> {{ 'login.login_as_guest' | translate }}
</button>
</form>
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">{{ 'login.password' | translate }}</label>
<input class="form-control" type="password" id="inputPassword" ng-attr-placeholder="{{ 'login.password' | translate }}" ng-model="user.password" />
</div>
<span class="help-block" ng-if="codeRequired">
{{ 'login.validation_code_required' | translate }}
<span class="glyphicon glyphicon-question-sign" title="{{ 'login.validation_code_title' | translate }}"></span>
</span>
<div class="form-group" ng-if="codeRequired">
<label class="sr-only" for="inputCode">{{ 'login.validation_code' | translate }}</label>
<input class="form-control" type="text" id="inputCode" ng-attr-placeholder="{{ 'login.validation_code' | translate }}" ng-model="user.code" />
</div>
<div class="checkbox">
<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()">
<span class="glyphicon glyphicon-ok"></span> {{ 'login.submit' | translate }}
</button>
<div class="text-center well-sm btn-password-lost">
<a href ng-click="openPasswordLost()">{{ 'login.password_lost_btn' | translate }}</a>
</div>
<p class="text-center" ng-if="app.guest_login">&nbsp;</p>
<button type="submit" class="btn btn-default btn-block" ng-if="app.guest_login" ng-click="loginAsGuest()">
<span class="glyphicon glyphicon-user"></span> {{ 'login.login_as_guest' | translate }}
</button>
</form>
</div>
</div>
<div class="login-img-container col-sm-6 hidden-xs"></div>
</div>

24
docs-web/src/main/webapp/src/style/main.less
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 */