misc changes to header and login
* Header optimizations for small screens
* Style changes to login page.
Change-Id: Ia7a4fc0cab8e105348f8f8e36b3c61cdc938b2bb
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/header.html b/src/header.html
index 13584cf..73cb837 100644
--- a/src/header.html
+++ b/src/header.html
@@ -8,8 +8,9 @@
</header>
<div class="header__functions-wrapper">
<div class="logo__wrapper"></div>
+ <button id="header__server-name">Server BLZ_109284.209.01</button>
<div class="header__functions">
- <a href="">Server health<span class="status-light__error">Error</span></a>
+ <a href="" id="header__server-health">Server health<span class="status-light__error">Error</span></a>
<a href="power-operations.html" class="header__server-power" role="button">Server power<span class="status-light__good">On</span></a>
<p class="header__refresh">Page last refreshed <span>3:20:12 Feb 12 2017</span></p>
<button class="header__page-refresh"><img src="img/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
diff --git a/src/index.html b/src/index.html
index f0c4d67..ae797bf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,8 +7,7 @@
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/vendor.min.js"></script>
</head>
-<body>
-
+<body id="login">
<div class="login__wrapper">
<div class="row">
<div class="columns large-6">
@@ -19,14 +18,15 @@
</div>
<div class="row">
<div class="columns large-6 login__desc">
- <h1>BMC Advanced System Management</h1>
- <p>Build Version: 1.00.102</p>
- <div class="login__server-info">
- <h3>Server ID: 29000000166668</h3>
- <p>Power SL-22LC</p>
- <p>Server status: <span class="login__status">Operational</span></p>
- <!-- if status is not operational add "error" class and change text -->
- </div>
+ <h1>OpenBMC Advanced System Management</h1>
+ <ul class="login__server-info">
+ <li><p class="login__info-label">Build version</p><p>1.00.102</p></li>
+ <li><p class="login__info-label">Server ID</p><p>29000000166668</p></li>
+ <li><p class="login__info-label">Server model</p><p>Power SL-22LC</p></li>
+ <!-- ping server to see if powered on. Change status-light and txt accordingly. Status message is planned to be hardcoded message were display via local JS. -->
+ <li><p class="login__info-label">Server power</p><p class="status-light__disabled">Off</p></li>
+ <li><p class="login__info-label">Status message</p><p>BMC was reset by user</p></li>
+ </ul>
</div>
<div class="columns large-6">
<form id="login__form" role="form">
@@ -34,12 +34,11 @@
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
- <input type="password" id="password" name="password" required>
+ <input type="password" id="password" name="password" class="input__error" required>
<input id="login__submit" class="btn-primary" type="submit" value="Log in" role="button">
- <p class="login__error-msg hide" role="alert">Invalid login attempt</p>
- <!-- if login is invalid remove "hide" class to pop error -->
+ <p class="login__error-msg" role="alert">Incorrect username or password</p>
</form>
</div>
</div>
diff --git a/src/js/main.js b/src/js/main.js
index 9c1437c..b321e0d 100755
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -4,6 +4,7 @@
header();
nav();
+
// Load logo
function loadLogo() {
$('.logo__wrapper').load('logo.html', function () {
@@ -47,7 +48,7 @@
// include logo into header
loadLogo();
- })
+ });
}
// load navigation - pass in header height
@@ -89,7 +90,6 @@
parent.find(subnavClass).css("display", "block").addClass('opened');
});
-
}
});
}
diff --git a/src/navigation.html b/src/navigation.html
index ddfa648..88b6169 100644
--- a/src/navigation.html
+++ b/src/navigation.html
@@ -45,7 +45,7 @@
</ul>
<ul class="nav__second-level btn-overview">
<li tabindex="2"><a href="">System Overview</a></li>
- <li tabindex="3"class="active"><a href="power-operations.html">Server power operations</a></li>
+ <li tabindex="3"class="active"><a href="power-operations.html">Server power operations </a></li>
<li tabindex="4"><a href="">Power consumption</a></li>
<li tabindex="5"><a href="">Remote console</a></li>
</ul>
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index 449bfb1..2fa98e8 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -3,7 +3,7 @@
$black: #333;
$darkgrey: #666;
$lightgrey: #ccc;
-$field__disabled: #F4F8F8;
+$field__disabled: #d8d8d8;
$btn__disabled-txt: #a6a5a6;
$btn__disabled-bg: #d8d8d8;
@@ -16,7 +16,7 @@
// Light Background
$lightbg__grey: #b8c1c1;
$lightbg__accent: #ebf0fc;
-$lightbg__primary: #1a273b;
+$lightbg__primary: #3c6df0;
// Primary Button colors
$primebtn__bg: #3c6df0;
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 97c24eb..074ba14 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -19,15 +19,15 @@
input[type='text'],
textarea {
border-radius: 0px;
- border: 1px solid $lightbg__grey;
+ border: 1px solid $lightgrey;
height: 3.1em;
- transition: all 1s ease;
margin: 0 0 1em 0;
- background: $lightbg__grey;
- box-shadow: 0px 0px 0px;
+ background: $white;
+ box-shadow: 0 0 0;
+ transition: none !important;
&:focus {
border-color: $lightbg__accent;
- box-shadow: 0px 0px 0px;
+ border-bottom: 5px solid $lightbg__primary;
}
&:disabled, .disabled {
background: $field__disabled;
@@ -35,7 +35,6 @@
}
&.input__error {
border-color: $error-color;
- background: rgba(230, 35, 37, 0.1);
}
}
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index a259c6b..578a866 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -51,29 +51,3 @@
@mixin bgImage__arrowDown-grey {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
}
-
-@mixin status-light {
- content: '\25CF';
- display: inline-block;
- font-size: 1.4em;
- color: $status-ok;
- margin-right: .3em;
-}
-
-@mixin status-light__good {
- @include status-light;
- color: $status-ok;
-
-}
-
-@mixin status-light__error {
- @include status-light;
- color: $error-color;
-
-}
-
-@mixin status-light__disabled {
- @include status-light;
- color: $darkgrey;
-
-}
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
index 81974ba..7fad716 100644
--- a/src/scss/components/_all.scss
+++ b/src/scss/components/_all.scss
@@ -1,3 +1,4 @@
+@import "status";
@import "systemUser";
@import "login";
@import "alerts";
diff --git a/src/scss/components/_login.scss b/src/scss/components/_login.scss
index 0485dbd..088f42a 100644
--- a/src/scss/components/_login.scss
+++ b/src/scss/components/_login.scss
@@ -1,15 +1,24 @@
+#login {
+ @include mediaQuery(medium) {
+ background: linear-gradient(to right, #FFFFFF 49.999%, #e6e9ed 50%);
+ @include fastTransition-all;
+ }
+}
+
.login__wrapper {
position: relative;
padding-top: 1em;
color: $black;
- .row {max-width: 1040px;}
- @include mediaQuery(small){
+ .row {
+ max-width: 1040px;
+ }
+ @include mediaQuery(small) {
left: 50%;
top: 50%;
transform: translateY(-50%);
margin-left: -50%;
}
- @include mediaQuery(medium){
+ @include mediaQuery(medium) {
left: 0;
margin-left: 0;
}
@@ -30,47 +39,77 @@
padding: 1em 0;
display: block;
overflow: hidden;
- @include mediaQuery(small){
+ @include mediaQuery(small) {
max-width: 50%;
}
- @include mediaQuery(medium){
+ @include mediaQuery(medium) {
padding: 0 0 0 5em;
- border-left: 1px solid $lightbg__grey;
- max-width:100%;
+ max-width: 100%;
}
@include fastTransition-all;
}
-
-
.login__desc {
text-align: left;
h1 {
font-size: 2em;
- margin-bottom: 0em;
+ margin-bottom: 0;
+ font-weight: bold;
+ @include mediaQuery(small) {
+ max-width: 50%;
+ }
+ @include mediaQuery(medium) {
+ max-width: 100%;
+ }
}
}
.login__server-info {
margin-top: 2em;
- p {margin-bottom: 0;}
- h3 {margin-bottom: .3rem;}
+ margin-left: 0;
+ padding-left: 0;
+ list-style-type: none;
+ @include mediaQuery(small) {
+ max-width: 50%;
+ }
+ @include mediaQuery(medium) {
+ max-width: 90%;
+ }
+ li {
+ padding: 1em 0;
+ border-top: 1px solid $lightgrey;
+ }
+ p {
+ margin-bottom: 0;
+ display: inline-block;
+ font-family: courier, helvetica, arial, sans-serif;
+ font-weight: 700;
+ }
+ .login__info-label {
+ display: inline-block;
+ min-width: 200px;
+ @include fontFamily;
+ }
}
.login__status {
color: $status-ok;
- &.error {color: $error-color;}
+ &.error {
+ color: $error-color;
+ }
}
.login__error-msg {
- background: $alert__error;
+ background: lighten($error-color, 20%);
padding: 1em;
text-align: center;
- font-size: .95em;
+ font-size: 1em;
border: 1px solid $error-color;
+ color: $black;
+ font-family: Courier, Helvetica, Arial, sans-serif;
+ font-weight: 700;
-
- @include mediaQuery(medium){
- max-width:100%;
+ @include mediaQuery(medium) {
+ max-width: 100%;
}
}
\ No newline at end of file
diff --git a/src/scss/components/_status.scss b/src/scss/components/_status.scss
new file mode 100644
index 0000000..30cb2db
--- /dev/null
+++ b/src/scss/components/_status.scss
@@ -0,0 +1,60 @@
+//status light states
+@mixin status-light {
+ content: '\25CF';
+ display: inline-block;
+ font-size: 2em;
+ color: $status-ok;
+ margin-right: .1em;
+ transform: translateY(2px);
+}
+
+@mixin status-light__good {
+ @include status-light;
+ color: $status-ok;
+
+}
+
+@mixin status-light__error {
+ @include status-light;
+ color: $error-color;
+
+}
+
+@mixin status-light__disabled {
+ @include status-light;
+ color: $darkgrey;
+
+}
+
+@mixin status-light__warn {
+ @include status-light;
+ color: $darkgrey;
+
+}
+
+.status-light__disabled {
+ color: $darkgrey;
+ &::before {
+ @include status-light__disabled;
+ }
+}
+
+.status-light__good {
+ &::before {
+ @include status-light__good;
+ }
+}
+
+.status-light__error {
+ color: $error-color;
+ &::before {
+ @include status-light__error;
+ }
+}
+
+.status-light__warn {
+ color: $status-warn;
+ &::before {
+ @include status-light__error;
+ }
+}
\ No newline at end of file
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index f0431ca..9b7dff5 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -42,17 +42,29 @@
.header__functions-wrapper {
color: $white;
- background: $lightbg__primary;
+ background: $darkbg__primary;
padding: 0 1.1em;
box-sizing: border-box;
display: block;
position: relative;
overflow: hidden;
min-height: 5em;
+ #header__server-name {
+ //margin-top: .8em;
+ font-size: 1.5em;
+ font-weight: 500;
+ color: $white;
+ padding: .9em;
+ height: 100%;
+ background: transparent;
+ max-width: 350px;
+ white-space: nowrap;
+ }
.logo__wrapper {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
+ padding-top: .5em;
+ //position: absolute;
+ //top: 50%;
+ //transform: translateY(-50%);
}
#header__logo {
@@ -64,6 +76,21 @@
max-width: $logoMaxWidth;
width: auto;
}
+ #header__funct-icon {
+ display: block;
+ font-size: 2.3em;
+ color: $white;
+ padding: 0;
+ &:before {
+ content: '\2261';
+ line-height: .5;
+ font-size: 2em;
+ padding: 0 .3em;
+ }
+ @include mediaQuery(medium) {
+ display: none;
+ }
+ }
.header__functions {
position: absolute;
@@ -71,29 +98,14 @@
right: 0;
bottom: 0;
background: $darkbg__primary;
+ z-index: 100;
+ @include fastTransition-all;
span {
display: block;
color: $white;
font-size: 1em;
- &.status-light__disabled {
- color: $darkgrey;
- &::before {
- @include status-light__disabled;
- }
- }
- &.status-light__good{
- &::before {
- @include status-light__good;
- }
- }
- &.status-light__error{
- color: $error-color;
- &::before {
- @include status-light__error;
- }
- }
}
- a, p, button {
+ a, p, button {
display: block;
float: left;
text-decoration: none;
@@ -103,21 +115,40 @@
padding: 1.250em 1.688em;
height: 100%;
font-size: 0.875em;
- line-height: 1.3;
- > span {font-size: 1rem;
- font-weight: bold;}
+ line-height: 1;
+ > span {
+ font-size: 1rem;
+ font-weight: bold;
+ }
}
}
+
+ // hide/show header functions based on screen size
+ .header__functions > #header__server-health {
+ display: none;
+ @include mediaQuery(small) {
+ display: block;
+ }
+ }
+
+ .header__functions > .header__refresh {
+ display: none;
+ @include mediaQuery(medium) {
+ display: block;
+ }
+ }
+
.header__functions {
.header__refresh {
color: $lightgrey;
- line-height: 1.6;
+ line-height: 1.8;
+ margin-top: -4px;
}
}
.header__server-power,
- .header__page-refresh{
+ .header__page-refresh {
&:hover {
- background: rgba(60,109,240,.4);
+ background: rgba(60, 109, 240, .4);
}
}
.header__page-refresh {
@@ -127,4 +158,6 @@
width: 24px;
}
}
-}// end header__functions-wrapper
+}
+
+// end header__functions-wrapper
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index 7a2d33c..bb08579 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -106,7 +106,7 @@
@include fastTransition-all;
}
a {
- padding: 1.2em .6em 1.2em 1em;
+ padding: 1.2em 1em 1.2em 1em;
display: block;
color: $black;
text-decoration: none;