Fix inventory dropdown

Dropdown on hardware page was cutting off text. Changes styling
so that table is in line and all information is displayed as
expected. If information exceeds dropdown size, a scroll bar
appears.

Tested: Appears to be displaying correctly using Chrome, Firefox
and Safari.

Change-Id: Ib1531c59865a7d7bf4ea1ded7277702e9cd53b8b
Signed-off-by: beccabroek <beccabroek@gmail.com>

2 files changed, 98 insertions, 186 deletions

diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index c7fa781..8a864ea 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -1,57 +1,55 @@
 <loader loading="loading"></loader>
-<div class="inventory-overview">
-  <div class="row column no-padding">
+<div class="inventory__container">
+  <div class="row column">
     <h1>Hardware status</h1>
+  </div>
+  <div class="row column">
     <div class="page-header">
       <h2 class="inline">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 -->
+  <div class="row column">
     <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"
-        ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
+      <label for="content__search-input">Search</label>
+      <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
       <div class="search-submit__wrapper">
         <button class="clear-input" ng-click="clear()">&#10005;</button>
         <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
       </div>
-
     </div>
-
-  </section>
-  <!-- end search -->
-  <section id="inventory-categories" class="row column">
-    <div class="row column header-row">
-      <div class="column large-12 header__actions-bar">
-        <div class="inline inventory__heading inventory__device-col">Hardware</div>
-        <div class="inline inventory__heading inventory__function-col">&nbsp;</div>
-        <div class="inline inventory__heading inventory__assoc-event"><!--Associated events--></div>
+  </div>
+  <div class="row column inventory__table">
+    <h3 class="small-12 hardware__header">
+      Hardware
+    </h3>
+    <div class="small-12 harware__details" ng-repeat="inventory in hardwares|filter:filterBySearchTerms">
+      <div class="hardware__title row column" ng-class="{'expanded': inventory.expanded}" ng-click="inventory.expanded = ! inventory.expanded">
+        <h4>{{inventory.title}}</h4>
+        <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}"></button>
       </div>
-    </div>
-    <div ng-repeat="inventory in hardwares|filter:filterBySearchTerms" class="inventory__group"  ng-class="{'active': inventory.expanded}" ng-click="inventory.expanded = ! inventory.expanded">
-      <p class="inline inventory__device-col">{{inventory.title}}</p>
-      <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}" 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>
-            <p class="courier-bold">{{item.value}}</p>
+      <div class="hardware__items" ng-hide="!inventory.expanded" ng-class="{'expanded': inventory.expanded}">
+        <div class="row column">
+          <div class="items small-12 show-scroll" ng-class="{'large-9': inventory.sub_components.length}">
+            <div class="row column">
+              <div ng-repeat="item in inventory.items" class="small-4">
+                <h5 class="content-label">{{item.key}}</h5>
+                <p class="courier-bold">{{item.value}}</p>
+              </div>
+            </div>
           </div>
-        </div>
-        <div class="column large-3 no-padding" ng-show="inventory.sub_components.length">
-          <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" ng-if="sub_component.Present">
-              <p class="courier-bold">{{sub_component.title}}<span class="icon icon__warning" ng-if="!sub_component.Functional"></span></p>
+          <div class="subcomponents show-scroll small-12 large-3" ng-show="inventory.sub_components.length">
+            <div class="row column">
+              <h5 class="small-12 content-label">Subcomponents</h5>
+              <p ng-repeat="sub_component in inventory.sub_components" class="large-6 small-3 courier-bold" ng-if="sub_component.Present">
+                <span class="icon icon__warning" ng-if="!sub_component.Functional"></span>
+                {{sub_component.title}}
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </div>
diff --git a/app/server-health/styles/inventory.scss b/app/server-health/styles/inventory.scss
index cf6f2b4..44cb9c9 100644
--- a/app/server-health/styles/inventory.scss
+++ b/app/server-health/styles/inventory.scss
@@ -1,160 +1,74 @@
-@mixin col-label {
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: .8em;
-}
-
-$title-minWidth: 210px;
-
-.inventory__heading {
-  font-weight: 700;
-  padding: 1em 0;
-}
-
-// Inventory Overview
-.inventory-overview {
-  .inventory__group {
-    position: relative;
-    display: block;
-    margin: 0;
-    font-weight: 700;
-    background: $white;
-    padding: 1em 1em 0 1.5em;
-    text-decoration: none;
-    border-left: 1px solid $medgrey;
-    border-right: 1px solid $medgrey;
-    width: 100%;
-    border-bottom: 0;
-    vertical-align: middle;
-    @include fastTransition-all;
-    &:hover {
-      background: $lightblue;
-      color: $black;
-      cursor: pointer;
-    }
-    &.active {
-      background: darken($lightgrey, 3%);
-      &:last-child {
-        border-bottom: 1px solid $medgrey;
-      }
-    }
-    .inv-active {
-      color: darken($active, 20%);
-    }
-    &.inv-disabled {
-      background: $medgrey;
-      .inventory__device-col,
-      .inventory__function-col {
-        color: lighten($darkgrey, 20%);
-      }
-      .accord-trigger {
-        display: none;
-      }
-      &:hover,
-      .accord-trigger:hover {
-        cursor: default;
-      }
-    }
+.inventory__container {
+  h3,
+  h4{
+    margin-bottom: 0;
   }
-
-  // Header row
-  .header__actions-bar {
-    padding: 0 1em 0 1.5em;
-    .inventory__assoc-event {
-      padding-right: 1em;
-      &:hover {
-        cursor: pointer;
-      }
-    }
+  h4{
+    font-size: 1rem;
+    font-weight: bold;
   }
-}
-// Inventory items
-.inventory-overview {
-  .inventory__device-col {
-    margin-right: 6px;
-    width: 50%;
-    text-transform: capitalize;
-    @include mediaQuery(medium){
-      width: auto;
-    }
+  padding-bottom: 5em;
+  .content__search {
+    margin-right: 0;
   }
-
-  .inventory__function-col {
-      @include col-label;
-      color: $severity-medium-lightbg;
-      display: none;
-  }
-  .inventory__device-col,
-  .inventory__function-col {
-    @media (min-width: 1025px){
-      display: inline-block;
-      @include calcColumn-4(5px);
-    }
-  }
-
-  .inventory__metadata {
-    height: 0;
-    max-height: 0;
-    margin: 0 -1em 0 -1.5em;
-    border-top: 1px solid $medgrey;
-    position: relative;
-    overflow: hidden;
-    @include fastTransition-all;
-    &.active {
-      height: 100%;
-      max-height: 1000px;
-      border-bottom: 1px solid $medgrey;
-      background: $lightgrey;
-      padding-bottom: 1em;
-      @include fastTransition-all;
-    }
-    &:hover {
-      cursor: default;
-    }
-  }
-
-  .inventory__metadata-block {
-    min-width: 100%;
-    padding: .5em 1em .5em 1.5em;
-    @include mediaQuery(small) {
-      @include calcColumn-3;
+  .inventory__table {
+    .hardware__header {
+      padding:1.2em 1.5em 1.2em 1.5em;
+      background: $darkblue;
+      font-weight: 700;
+      color: $white;
     }
-    .content-label {
-      color: $darkgrey;
+    .ng-hide {
+      height: 0;
     }
-  }
-
-  .inventory__metadata-scroll {
-      position: relative;
-      height: 100%;
-      max-height: 200px;
-      overflow-y: scroll;
-      bottom: 0;
-      right:0;
-      width: 100%;
-      padding-top: 1em;
-      padding-left: 1.5em;
-      border-top: 1px solid $medgrey;
-    .inventory__metadata-block {
-      @include calcSplitColumn;
-      margin-bottom: .5em;
-      padding: 0;
-    }
-    @include mediaQuery(medium) {
-      position: absolute;
-      border-left: 1px solid $medgrey;
-      border-top: 0;
-      max-height: 500px;
-      padding: .5em 1em;
-      width: 30%;
-    }
-    .icon__warning {
-      margin-top: -5px;
-      margin-left: .3em;
+    .harware__details {
+       background: $lightblue;
+      .hardware__title {
+        border-left: 1px solid $medgrey;
+        border-right: 1px solid $medgrey;
+        position: relative;
+        font-weight: 700;
+        text-transform: capitalize;
+        padding: 1em 1.5em 1em 1.5em;
+        border-bottom: 1px solid $medgrey;
+        background-color: $white;
+        &:hover {
+          background: $lightblue;
+          cursor: pointer;
+        }
+        &.expanded {
+          background: $lightblue;
+        }
+      }
+      .hardware__items {
+        background: $lightgrey;
+        border-right: 1px solid $medgrey;
+        border-left: 1px solid $medgrey;
+        display: block;
+        overflow: hidden;
+        @include fastTransition-all;
+        &.expanded {
+          height: 100%;
+          border-bottom: 1px solid $medgrey;
+        }
+        .items {
+          max-height: 320px;
+          padding: 1em 1.5em 1em 1.5em;
+          overflow:auto;
+          overflow-wrap: break-word;
+        }
+        .subcomponents {
+          max-height: 320px;
+          padding: 1em 1.5em 1em 1.5em;
+          overflow: auto;
+          border-top:1px solid $medgrey;
+          @include mediaQuery(medium) {
+            border-top:0;
+            border-left:1px solid $medgrey;
+          }
+        }
+      }
     }
   }
 }
 
-//end inventory details
-
-