usability and design changes for inventory
Change-Id: Ibd7f2be5223944646bdbb179673fee29603fa902
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index e8e2a5b..b646a46 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -2,16 +2,17 @@
<div class="row column no-padding">
<h1>Hardware status</h1>
<div class="page-header">
-
+ <h2 class="inline h4">All hardware in the system</h2>
<a ng-href="data:text/json;charset=utf-8,{{originalData}}" class="inline btn-export float-right" download="export_inventory.json" ng-show="hardwares.length">Export</a>
</div>
</div>
<section class="row column">
<!-- search -->
+ <p class="content-label" aria-label="hardware filter">Filter hardware components</p>
<div class="content__search">
<label for="content__search-input">Search</label> <input id="content__search-input" type="text"
- placeholder="Filter hardware components" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
+ ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
<input id="content__search-submit" type="submit" class="btn btn-primary" value="Filter" ng-click="doSearchOnClick()"/>
</div>
@@ -30,7 +31,7 @@
<p class="inline inventory__function-col"></p>
<p class="inline inventory__assoc-event"><!--<a href="#/server-health/event-log">View 3 events</a>--></p>
<button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}"></button>
- <div class="row inventory__metadata" ng-class="{'active': inventory.expanded}">
+ <div class="row inventory__metadata" ng-class="{'active': inventory.expanded}" ng-click="$event.stopPropagation()">
<div class="column large-9 no-padding">
<div ng-repeat="item in inventory.items" class="inline inventory__metadata-block">
<p class="content-label">{{item.key}}</p>
@@ -41,7 +42,7 @@
<div class="inventory__metadata-scroll show-scroll"> <!-- If content overflows; add 'show-scroll' class via JS to force visible scrollbar in webkit browsers-->
<div class="content-label">Subcomponents</div>
<div ng-repeat="sub_component in inventory.sub_components" class="inline inventory__metadata-block">
- <p class="courier-bold"><span class="icon icon__warning" ng-if="sub_component.Present"></span>{{sub_component.title}}</p>
+ <p class="courier-bold">{{sub_component.title}}<span class="icon icon__warning" ng-if="sub_component.Present"></span></p>
</div>
</div>
</div>
diff --git a/app/server-health/styles/inventory.scss b/app/server-health/styles/inventory.scss
index 6abbe27..55244eb 100644
--- a/app/server-health/styles/inventory.scss
+++ b/app/server-health/styles/inventory.scss
@@ -40,9 +40,6 @@
.inv-active {
color: darken($active, 20%);
}
- .inv-present {
- color: darken($present, 20%);
- }
&.inv-disabled {
background: $medgrey;
.inventory__device-col,
@@ -57,9 +54,6 @@
cursor: default;
}
}
- .accord-trigger {
- margin-top: -8px;
- }
}
// Header row
@@ -143,6 +137,9 @@
padding-bottom: 1em;
@include fastTransition-all;
}
+ &:hover {
+ cursor: default;
+ }
}
.inventory__metadata-block {
@@ -152,7 +149,7 @@
@include calcColumn-3;
}
.content-label {
- color:lighten($darkgrey, 10%);
+ color: $darkgrey;
}
}
@@ -178,7 +175,10 @@
border-top: 0;
max-height: 500px;
padding: .5em 1em;
- width: 23%;
+ width: 30%;
+ }
+ .icon__warning {
+ margin-top: -10px;
}
}
}