External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 10:30:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

merge loginModal less styling

Browse Source
This commit is contained in:
John Mitchell 2015-09-23 11:26:13 -04:00
commit 2ac72da19b
3 changed files with 97 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
awx/ui/client/legacy-styles/ansible-ui.less
View File

@ -366,10 +366,6 @@ textarea.allowresize {
margin-right: -5px;
}
.prepend-asterisk--login:before {
margin-right: -2px;
}
.subtitle {
font-size: 16px;
}
@ -547,14 +543,6 @@ dd {
word-break: break-all;
}
.login-alert {
margin-bottom: 25px;
font-size: 14px;
font-weight: normal;
color: @blue-link;
text-align: center;
}
.controls {
min-height: 15px;
}
@ -593,16 +581,6 @@ dd {
background-color: @black;
}
.modal-header.login-header {
text-align: center;
background-color: @black;
border-left: 1px solid #686868;
border-right: 1px solid #686868;
border-top: 1px solid #686868;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.login-header img {
width: 60%;
}

23
awx/ui/client/src/login/loginModal.block.less Normal file
View File

@ -0,0 +1,23 @@
/** @define LoginModal */
.LoginModal-header {
text-align: center;
background-color: #171717;
border-left: 1px solid #686868;
border-right: 1px solid #686868;
border-top: 1px solid #686868;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.LoginModal-alert {
margin-bottom: 25px;
font-size: 14px;
font-weight: normal;
color: #1778c3;
text-align: center;
}
.LoginModal-labelAsterisk:before {
margin-right: -2px;
}

115
awx/ui/client/src/login/loginModal.partial.html
View File

@ -1,41 +1,74 @@
<!-- login modal -->
<div id="login-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" id="login-modal-content">
<div class="modal-header login-header">
<img ng-src="/static/assets/{{ customLogo }}" >
</div>
<div class="modal-body" id="login-modal-body">
<div class="login-alert" ng-show="!sessionExpired">Welcome to Ansible Tower! &nbsp;Please sign in.</div>
<div class="login-alert" ng-show="sessionExpired">Your session timed out due to inactivity. Please sign in.</div>
<form id="login-form" name="loginForm" class="form-horizontal" autocomplete="off" novalidate >
<div class="form-group">
<label class="control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk prepend-asterisk--login">Username</label>
<div class="col-md-8 col-sm-8 col-xs-9">
<input type="text" name="login_username" class="form-control" ng-model="login_username"
id="login-username" autocomplete="off" required>
<div class="error" ng-show="loginForm.login_username.$dirty && loginForm.login_username.$error.required">Please enter a username.</div>
<div class="error api-error" ng-bind="usernameError"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk repend-asterisk--login">Password</label>
<div class="col-md-8 col-sm-8 col-xs-9">
<input type="password" name="login_password" id="login-password" class="form-control"
ng-model="login_password" required autocomplete="off">
<div class="error" ng-show="loginForm.login_password.$dirty && loginForm.login_password.$error.required">Please enter a password.</div>
<div class="error api-error" ng-bind="passwordError"></div>
</div>
</div>
</form>
<div class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title">Notice</div>{{ customLoginInfo | sanitize }}</div>
</div>
<div class="modal-footer">
<button ng-click="systemLogin(login_username, login_password)" id="login-button" class="btn btn-primary"><i class="fa fa-sign-in"></i> Sign in</button>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
<div id="login-modal" class="modal fade LoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header LoginModal-header">
<img ng-src="/static/assets/{{ customLogo }}" >
</div>
<div class="modal-body">
<div class="LoginModal-alert" ng-show="!sessionExpired">
Welcome to Ansible Tower! &nbsp;Please sign in.
</div>
<div class="LoginModal-alert" ng-show="sessionExpired">
Your session timed out due to inactivity. Please
sign in.
</div>
<form id="login-form"
name="loginForm"
class="form-horizontal"
autocomplete="off" novalidate>
<div class="form-group">
<label class="control-label col-md-offset-1
col-md-2 col-sm-offset-1 col-sm-2
col-xs-3 prepend-asterisk
LoginModal-labelAsterisk">Username
</label>
<div class="col-md-8 col-sm-8 col-xs-9">
<input type="text" name="login_username"
class="form-control"
ng-model="login_username"
id="login-username"
autocomplete="off" required>
<div class="error"
ng-show="loginForm.login_username.$dirty &&
loginForm.login_username.$error.required">
Please enter a username.
</div>
<div class="error api-error"
ng-bind="usernameError"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-offset-1
col-md-2 col-sm-offset-1 col-sm-2
col-xs-3 prepend-asterisk
LoginModal-labelAsterisk">Password
</label>
<div class="col-md-8 col-sm-8 col-xs-9">
<input type="password"
name="login_password"
id="login-password"
class="form-control"
ng-model="login_password" required
autocomplete="off">
<div class="error"
ng-show="loginForm.login_password.$dirty
&&
loginForm.login_password.$error.required">
Please enter a password.
</div>
<div class="error api-error"
ng-bind="passwordError"></div>
</div>
</div>
</form>
<div class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title">Notice</div>{{ customLoginInfo | sanitize }}</div>
</div>
<div class="modal-footer">
<button ng-click="systemLogin(login_username, login_password)"
id="login-button" class="btn btn-primary">
<i class="fa fa-sign-in"></i> Sign in
</button>
</div>
</div>
</div>
</div>