Skip to content

Commit

Permalink
Update logo, add app name and tighten up login styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@gashcrumb
gashcrumb committed Aug 27, 2013
1 parent 1306289 commit 8cd0ef5
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 32 deletions.
5 changes: 3 additions & 2 deletions hawtio-web/src/main/webapp/app/branding/js/brandingPlugin.ts
View file
Expand Up @@ -6,6 +6,7 @@ module Branding {
Branding.enabled = enabled;

// Branding.enabled = false;
// Branding.enabled = true;

if (Branding.enabled) {
// pull in branding stylesheet
Expand Down Expand Up @@ -33,8 +34,8 @@ module Branding {

if (Branding.enabled) {
console.log("enabled branding");
branding.appName = 'Red Hat JBoss Fuse';
branding.appLogo = '';
branding.appName = 'Management Console';
branding.appLogo = 'img/branding/RHJB_Fuse_UXlogotype_0513LL_white.svg';
branding.loginBg = 'img/branding/login-screen-background.jpg';
branding.fullscreenLogin = true;
}
Expand Down
18 changes: 11 additions & 7 deletions hawtio-web/src/main/webapp/app/core/html/login.html
View file
Expand Up @@ -5,25 +5,29 @@
<div class="login-form">
<form name="login" class="form-horizontal no-bottom-margin" ng-submit="doLogin()">
<fieldset>
<div class="login-logo">
<img ng-src="{{branding.appLogo}}" ng-show="branding.appLogo">
<span ng-show="branding.appName">{{branding.appName}}</span>
</div>
<div class="control-group">
<!-- <label class="control-label" for="username">User Name</label> -->
<label class="control-label" for="username">Username </label>
<div class="controls">
<input id="username" type="text" class="input-medium" placeholder="User Name" required ng-model="username">
<input id="username" type="text" class="input-medium" required ng-model="username">
</div>
</div>
<div class="control-group">
<!-- <label class="control-label" for="password">Password</label> -->
<label class="control-label" for="password">Password </label>
<div class="controls">
<input id="password" type="password" class="input-medium" placeholder="Password" required ng-model="password">
<input id="password" type="password" class="input-medium" required ng-model="password">
</div>
</div>

<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" ng-model="rememberMe"> Remember me
<label class="checkbox" for="rememberMe">
<input id="rememberMe" type="checkbox" ng-model="rememberMe"> Remember me
</label>
<button type="submit" class="btn btn-success" ng-disabled="!login.$valid"><i class="icon-check"></i> Sign In</button>
<button type="submit" class="btn btn-success" ng-disabled="!login.$valid"></i> Log In</button>
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions hawtio-web/src/main/webapp/app/core/js/login.ts
View file
Expand Up @@ -8,6 +8,7 @@ module Core {
$scope.username = '';
$scope.password = '';
$scope.rememberMe = false;
$scope.branding = branding;

var details = angular.fromJson(localStorage[jolokiaUrl]);
if (details) {
Expand Down
49 changes: 39 additions & 10 deletions hawtio-web/src/main/webapp/css/site-base.less
View file
Expand Up @@ -1629,28 +1629,57 @@ td.adding {

.login-wrapper {
position: absolute;
left: 88px;
left: 0;
top: 350px;
padding: 2px;
background-color: rgb(255, 168, 27);
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0;
padding-right: 0;
background-color: rgba(255, 168, 27, 0.3);
line-height: 0;
border-radius: 4px;
box-shadow: rgba(255, 168, 27, 0.2) 0 0 30px 10px;
width: 100%
}

.login-wrapper form {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.2);
margin-bottom: 0px;
padding-top: 20px;
padding-bottom: 20px;
padding-top: 52px;
padding-bottom: 7px;
padding-right: 40px;
padding-left: 40px;
border-radius: 4px;
box-shadow: inset rgba(255, 168, 27, 0.2) 0 0 30px 10px;
}

.login-wrapper form .controls {
margin-left: 0px;
.login-wrapper form fieldset {
width: 413px;
}

.login-form form fieldset .control-group {
margin-bottom: 15px;
margin-left: 5px;
}

.login-form form fieldset .control-group label {
color: white;
}

.login-form form fieldset .control-group button[type='submit'] {
float: right;
}

.login-logo {
display: block;
position: absolute;

letter-spacing: 5px;

color: white;
padding: 10px;
font-size: 20px;
left: 233px;
top: 9px;

}


Expand Down
55 changes: 42 additions & 13 deletions hawtio-web/src/main/webapp/css/site-branding.css
View file
Expand Up @@ -98,6 +98,21 @@ a:hover {
display: block !important;
color: #ffffff;
text-shadow: none;
padding-top: 6px;
}

#main-nav .navbar-inner.main-nav-upper .container .brand img {
position: relative;
left: -3px;
height: 11px;
}

#main-nav .navbar-inner.main-nav-upper .container .brand strong {
font-weight: normal;
font-size: 11px;
position: relative;
top: 1px;
left: 0;
}

#main-nav .navbar-inner.main-nav-lower .nav {
Expand Down Expand Up @@ -247,18 +262,6 @@ div[ng-controller='Core.LoginController']:after {
content: url('../img/branding/login-screen-logo.png');
}

.login-wrapper:before {
position: absolute;
top: -38px;
left: 104px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 200;
font-size: 22px;
font-size: 22px;
content: 'Red Hat JBoss Fuse';
color: #FFFFFF;
}

.login-wrapper {
top: inherit;
Expand All @@ -267,7 +270,7 @@ div[ng-controller='Core.LoginController']:after {
left: 0;
position: absolute;
bottom: 15%;
padding-left: 100px;
padding-left: 0;
width: 100%;
min-width: 850px;
border-top: 1px rgba(255, 255, 255, 0.05) solid;
Expand All @@ -276,6 +279,20 @@ div[ng-controller='Core.LoginController']:after {

}

.login-logo {
top: -55px;
/* with no app title */
/* left: 183px; */
left: 45px;
}

.login-logo span {
position: relative;
top: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.login-wrapper form {
background: inherit;
border-radius: 0;
Expand All @@ -290,6 +307,10 @@ div[ng-controller='Core.LoginController']:after {
width: 344px;
}

.login-wrapper form fieldset .control-group label {
padding-top: 12px;
}

.login-wrapper form fieldset input[type="text"],
.login-wrapper form fieldset input[type="password"] {
margin: 4px;
Expand All @@ -312,7 +333,15 @@ div[ng-controller='Core.LoginController']:after {
box-shadow: #62afdb 0 0 5px;
}

.login-wrapper form fieldset .control-group .controls .checkbox {
position: absolute;
top: 185px;
left: 181px;
}

.login-wrapper form fieldset button[type="submit"] {
position: relative;
left: 39px;
padding: 4px 14px;
border: 1px #21799e solid;
border-radius: 2px;
Expand Down

0 comments on commit 8cd0ef5

Please sign in to comment.