Reorganize navigation and header scss
Change-Id: I495e1c19cd5d67220c00ef65c88f7a95ad12bf68
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 7600c1b..1f1f314 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -27,15 +27,15 @@
</ul>
<ul class="nav__second-level btn-overview" ng-style="navStyle" ng-class="{opened: firstLevel == 'overview'}">
<li ng-class="{'active': (path == '/overview' || path == '/overview/system')}" tabindex="2">
- <a href="#/overview/system" ng-click="closeSubnav()">System Overview</a></li>
+ <a href="#/overview/system" ng-click="closeSubnav()">System overview</a></li>
</ul>
<ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: firstLevel == 'server-health'}">
- <li ng-class="{'active': (path == '/server-health/event-log')}"><a href="#/server-health/event-log" tabindex="7" ng-click="closeSubnav()">Event Log</a></li>
- <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}" ng-click="closeSubnav()"><a href="#/server-health/inventory-overview">Hardware Inventory</a></li>
- <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}"><a href="#/server-health/sensors-overview" ng-click="closeSubnav()">Sensor Data</a></li>
- <li ng-class="{'active': (path == '/server-health/power-consumption')}"><a href="#/server-health/power-consumption" tabindex="4" ng-click="closeSubnav()">Power consumption</a></li>
+ <li ng-class="{'active': (path == '/server-health/event-log')}"><a href="#/server-health/event-log" tabindex="7" ng-click="closeSubnav()">Event log</a></li>
+ <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}" ng-click="closeSubnav()"><a href="#/server-health/inventory-overview">Hardware inventory</a></li>
+ <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}"><a href="#/server-health/sensors-overview" ng-click="closeSubnav()">Sensor data</a></li>
+ <!--<li ng-class="{'active': (path == '/server-health/power-consumption')}"><a href="#/server-health/power-consumption" tabindex="4" ng-click="closeSubnav()">Power consumption</a></li>-->
<li ng-class="{'active': (path == '/server-health/unit-id')}"><a href="#/server-health/unit-id" tabindex="6" ng-click="closeSubnav()">Unit ID</a></li>
- <li ng-class="{'active': (path == '/server-health/diagnostics')}"><a href="#/server-health/diagnostics" ng-click="closeSubnav()">Diagnostics</a></li>
+ <!--<li ng-class="{'active': (path == '/server-health/diagnostics')}"><a href="#/server-health/diagnostics" ng-click="closeSubnav()">Diagnostics</a></li>-->
</ul>
<ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: firstLevel == 'server-control'}">
<li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}" tabindex="3"><a href="#/server-control/power-operations" ng-click="closeSubnav()">Server power operations</a></li>
@@ -43,16 +43,16 @@
<li ng-class="{'active': (path == '/server-control/remote-console')}"><a href="#/server-control/remote-console" tabindex="5" ng-click="closeSubnav()">Remote console</a></li>
</ul>
<ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: firstLevel == 'configuration'}">
- <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}"><a href="#/configuration/network" ng-click="closeSubnav()">Network Configuration</a></li>
- <li ng-class="{'active': (path == '/configuration/date-time')}"><a href="#/configuration/date-time" ng-click="closeSubnav()">Date & Time</a></li>
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}"><a href="#/configuration/network" ng-click="closeSubnav()">Network settings</a></li>
+ <!--<li ng-class="{'active': (path == '/configuration/date-time')}"><a href="#/configuration/date-time" ng-click="closeSubnav()">Date & Time</a></li>-->
<li ng-class="{'active': (path == '/configuration/security')}"><a href="#/configuration/security" ng-click="closeSubnav()">Security</a></li>
- <li ng-class="{'active': (path == '/configuration/file')}"><a href="#/configuration/file" ng-click="closeSubnav()">Configuration File</a></li>
+ <!--<li ng-class="{'active': (path == '/configuration/file')}"><a href="#/configuration/file" ng-click="closeSubnav()">Configuration File</a></li>-->
</ul>
<ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: firstLevel == 'firmware'}">
- <li ng-class="{'active': (path == '/firmware' || path == '/firmware/bmc')}"><a href="#/firmware/bmc" ng-click="closeSubnav()">BMC Firmawre</a></li>
- <li ng-class="{'active': (path == '/firmware/server')}"><a href="#/firmware/server" ng-click="closeSubnav()">Server Firmware</a></li>
+ <li ng-class="{'active': (path == '/firmware' || path == '/firmware/bmc')}"><a href="#/firmware/bmc" ng-click="closeSubnav()">BMC firmawre</a></li>
+ <li ng-class="{'active': (path == '/firmware/server')}"><a href="#/firmware/server" ng-click="closeSubnav()">Server firmware</a></li>
</ul>
<ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: firstLevel == 'users'}">
- <li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}"><a href="#/users/manage-accounts" ng-click="closeSubnav()">Manage User Account</a></li>
+ <li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}"><a href="#/users/manage-accounts" ng-click="closeSubnav()">Manage user account</a></li>
</ul>
</nav>
diff --git a/app/common/styles/directives/app-header.scss b/app/common/styles/directives/app-header.scss
index e69de29..9b7dff5 100644
--- a/app/common/styles/directives/app-header.scss
+++ b/app/common/styles/directives/app-header.scss
@@ -0,0 +1,163 @@
+$logoHeight: 30px;
+$logoMaxHeight: 100px;
+$logoMaxWidth: 125px;
+
+#header__wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 100;
+}
+
+.app__version {
+ margin-left: 1em;
+ display: none;
+ @include mediaQuery(x-small) {
+ display: inline-block;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+}
+
+header {
+ position: relative;
+ background: #000;
+ color: $white;
+ overflow: hidden;
+}
+
+.header__logout {
+ float: right;
+ display: inline-block;
+ color: $white;
+ font-size: .9em;
+ text-decoration: none;
+ padding: 1em;
+ &:visited {
+ color: $white;
+ }
+}
+
+.header__functions-wrapper {
+ color: $white;
+ 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 {
+ padding-top: .5em;
+ //position: absolute;
+ //top: 50%;
+ //transform: translateY(-50%);
+ }
+
+ #header__logo {
+ vertical-align: middle;
+ margin: 1em;
+ float: left;
+ height: $logoHeight; //required for <SVG> logos - can remove if using img
+ max-height: $logoMaxHeight;
+ 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;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: $darkbg__primary;
+ z-index: 100;
+ @include fastTransition-all;
+ span {
+ display: block;
+ color: $white;
+ font-size: 1em;
+ }
+ a, p, button {
+ display: block;
+ float: left;
+ text-decoration: none;
+ border-left: 1px solid #384456;
+ color: $lightgrey;
+ margin: 0;
+ padding: 1.250em 1.688em;
+ height: 100%;
+ font-size: 0.875em;
+ 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.8;
+ margin-top: -4px;
+ }
+ }
+ .header__server-power,
+ .header__page-refresh {
+ &:hover {
+ background: rgba(60, 109, 240, .4);
+ }
+ }
+ .header__page-refresh {
+ img {
+ stroke: $white;
+ height: 22px;
+ width: 24px;
+ }
+ }
+}
+
+// end header__functions-wrapper
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 5b755e8..4591f5c 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -30,6 +30,7 @@
margin-bottom: 0;
white-space: normal;
border-radius: 0;
+ text-decoration: none;
.nav__icon {
color: $white;
max-height: 40px;
@@ -92,13 +93,12 @@
padding: 0;
margin: 0;
list-style-type: none;
- @include slowTransition-all;
+ @include fastTransition-all;
&.opened {
left: $nav__toplvlWidth;
box-shadow: 7px 0 28px -10px $darkgrey;
- @include slowTransition-all;
+ @include fastTransition-all;
}
-
a {
padding: 1.2em 1em 1.2em 1em;
display: block;
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 84b613c..1547e30 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -1,4 +1,6 @@
// Content layout styles
+$nav__toplvlWidth: 120px;
+$nav__seclvlWidth: 240px;
// Page header
.page-header {
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
deleted file mode 100644
index 9b7dff5..0000000
--- a/app/common/styles/layout/header.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-$logoHeight: 30px;
-$logoMaxHeight: 100px;
-$logoMaxWidth: 125px;
-
-#header__wrapper {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 100;
-}
-
-.app__version {
- margin-left: 1em;
- display: none;
- @include mediaQuery(x-small) {
- display: inline-block;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- }
-}
-
-header {
- position: relative;
- background: #000;
- color: $white;
- overflow: hidden;
-}
-
-.header__logout {
- float: right;
- display: inline-block;
- color: $white;
- font-size: .9em;
- text-decoration: none;
- padding: 1em;
- &:visited {
- color: $white;
- }
-}
-
-.header__functions-wrapper {
- color: $white;
- 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 {
- padding-top: .5em;
- //position: absolute;
- //top: 50%;
- //transform: translateY(-50%);
- }
-
- #header__logo {
- vertical-align: middle;
- margin: 1em;
- float: left;
- height: $logoHeight; //required for <SVG> logos - can remove if using img
- max-height: $logoMaxHeight;
- 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;
- top: 0;
- right: 0;
- bottom: 0;
- background: $darkbg__primary;
- z-index: 100;
- @include fastTransition-all;
- span {
- display: block;
- color: $white;
- font-size: 1em;
- }
- a, p, button {
- display: block;
- float: left;
- text-decoration: none;
- border-left: 1px solid #384456;
- color: $lightgrey;
- margin: 0;
- padding: 1.250em 1.688em;
- height: 100%;
- font-size: 0.875em;
- 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.8;
- margin-top: -4px;
- }
- }
- .header__server-power,
- .header__page-refresh {
- &:hover {
- background: rgba(60, 109, 240, .4);
- }
- }
- .header__page-refresh {
- img {
- stroke: $white;
- height: 22px;
- width: 24px;
- }
- }
-}
-
-// end header__functions-wrapper
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index f78538c..6c33f26 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,3 +1 @@
-@import 'header';
-@import 'navigation';
@import 'content';
diff --git a/app/common/styles/layout/navigation.scss b/app/common/styles/layout/navigation.scss
deleted file mode 100644
index 2568637..0000000
--- a/app/common/styles/layout/navigation.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-$nav__toplvlWidth: 120px;
-$nav__seclvlWidth: 240px;
-
-// Top level navigation
-#nav__top-level {
- background: $nav__top-level-color;
- height: 100%;
- position: fixed;
- left: 0;
- top: 0;
- bottom: 0;
- z-index: 99;
- list-style-type: none;
- margin: 0;
- padding: 0;
- width: $nav__toplvlWidth;
- display: block;
- li {
- margin: 0;
- }
- .button, button, a {
- background: transparent;
- height: auto;
- border: 0;
- color: $white;
- fill: $white;
- width: 100%;
- padding: 1em;
- display: block;
- text-align: center;
- margin-bottom: 0;
- white-space: normal;
- border-radius: 0;
- text-decoration: none;
- .nav__icon {
- color: $white;
- max-height: 40px;
- stroke-width: .5;
- margin-bottom: -.5em;
- }
- a {
- margin-bottom: 5px;
- }
- span {
- margin: 1em 0 0 0;
- display: block;
- font-size: .9em;
- font-weight: normal;
- line-height: 1rem;
- }
-
- .nav__icon-help__outer {
- fill: transparent;
- stroke: $white;
- stroke-miterlimit: 10;
- stroke-width: 1px;
- }
- .nav__icon-help__Inner {
- fill: $white;
- }
- &:hover {
- background: $nav__second-level-color;
- fill: $black;
- color: $black;
- padding: 1em;
- border-radius: 0;
- .nav__icon-help__outer {
- stroke: $black;
- }
- .nav__icon-help__inner {
- fill: $lightbg__primary;
- }
- }
- }
- .opened {
- background: $nav__second-level-color;
- fill: $black;
- color: $black;
- .nav__icon-help__outer {
- stroke: $lightbg__primary;
- }
- }
-}
-
-// Second Level Navigation
-.nav__second-level {
- position: fixed;
- background: $nav__second-level-color;
- top: 0;
- bottom: 0;
- left: 0;
- width: $nav__seclvlWidth;
- z-index: 0;
- padding: 0;
- margin: 0;
- display: none;
- list-style-type: none;
- @include fastTransition-all;
- @include mediaQuery(medium) {
- left: 0;
- &.btn-overview {
- display: none;
- }
- }
- &.opened {
- left: $nav__toplvlWidth;
- z-index: 100;
- display: block;
- @include fastTransition-all;
- }
-
- a {
- padding: 1.2em 1em 1.2em 1em;
- display: block;
- color: $black;
- text-decoration: none;
- position: relative;
- font-weight: 400;
- }
- li {
- a:after{
- content: '\203A';
- position: absolute;
- font-size: 2em;
- font-weight: 700;
- top: 50%;
- right: .6em;
- transform: translateY(-59%);
- color: #4b5d78;
- opacity: 0;
- }
- &.active {background: $white;}
- &.active,
- &:focus,
- &:hover {
- a {color: #4b5d78;}
- a:after {
- opacity: 1;
- right: .3em;
- @include fastTransition-all;
- }
- }
- }
-}
diff --git a/app/users/index.js b/app/users/index.js
index 6814d0d..becc9b9 100644
--- a/app/users/index.js
+++ b/app/users/index.js
@@ -18,7 +18,7 @@
// Route configuration
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
- .when('/users/manage-user-accounts', {
+ .when('/users/manage-accounts', {
'templateUrl': 'users/controllers/user-accounts-controller.html',
'controller': 'userAccountsController',
authenticated: true