From f38709e55ed2a2b2fe700c0471a25e7e2063ded5 Mon Sep 17 00:00:00 2001
From: Joe Fiorini <joe@joefiorini.com>
Date: Tue, 9 Jun 2015 09:36:15 -0400
Subject: [PATCH] [system_tracking] Adjust headings and add table row hover

---
 .../fact-data-table-heading.block.less        |  9 +++------
 .../fact-data-table.block.less                | 20 ++++++++++++++++++-
 .../system-tracking.partial.html              | 12 ++++++-----
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/awx/ui/static/js/system-tracking/fact-data-table-heading.block.less b/awx/ui/static/js/system-tracking/fact-data-table-heading.block.less
index 33327935be..07980e13df 100644
--- a/awx/ui/static/js/system-tracking/fact-data-table-heading.block.less
+++ b/awx/ui/static/js/system-tracking/fact-data-table-heading.block.less
@@ -3,19 +3,16 @@
 .FactDataTableHeading {
     display: flex;
     flex-wrap: wrap;
-    font-size: 1.25em;
-    align-items: center;
+    font-size: 1em;
+    align-items: flex-end;
+    font-weight: bold;
 
     &-host {
-        font-size: 0.8em;
         margin-bottom: 3px; // just some breathing room
 
         &:after {
-            font-style: italic;
             content: " scanned on";
-            font-family: merriweather;
             font-weight: 200;
-            font-size: 0.75em;
         }
     }
     &-date {
diff --git a/awx/ui/static/js/system-tracking/fact-data-table.block.less b/awx/ui/static/js/system-tracking/fact-data-table.block.less
index dd8a6dede7..09545fa890 100644
--- a/awx/ui/static/js/system-tracking/fact-data-table.block.less
+++ b/awx/ui/static/js/system-tracking/fact-data-table.block.less
@@ -1,10 +1,28 @@
 /** @define FactDataTable */
 
 .FactDataTable {
-    &-row {
+    &-row, &-headingRow {
         display: flex;
     }
+
+    &-row {
+      margin-bottom: 0.5em;
+      align-items: center;
+      transition: background-color 100ms, border-color 100ms;
+      border: solid 1px transparent;
+      &:hover {
+        background-color: #ebebeb;
+        border-color: #adadad;
+      }
+    }
+
+    &-headingRow {
+      border-bottom: 1px solid #adadad;
+      margin-bottom: 1.5em;
+    }
+
     &-column {
+        padding: 0.5em 0;
         flex: 1;
         &--offsetLeft {
             margin-left: 33%;
diff --git a/awx/ui/static/js/system-tracking/system-tracking.partial.html b/awx/ui/static/js/system-tracking/system-tracking.partial.html
index 3ae18ccf53..b2c50972d0 100644
--- a/awx/ui/static/js/system-tracking/system-tracking.partial.html
+++ b/awx/ui/static/js/system-tracking/system-tracking.partial.html
@@ -41,9 +41,11 @@
         </p>
     </section>
     <section class="FactDataTable SystemTrackingContainer-main" ng-if="!error">
-        <div class="FactDataTable-row">
+        <div class="FactDataTable-headingRow">
             <h3 class="FactDataTable-column FactDataTableHeading">
-              Comparing facts collected from:
+              <span class="FactDataTableHeading-label">
+                Comparing facts collected from:
+              </span>
             </h3>
             <h3 class="FactDataTable-column FactDataTableHeading">
               <span class="FactDataTableHeading-host">{{leftHostname}}</span>
@@ -56,9 +58,9 @@
         </div>
         <div ng-if="!isNestedDisplay">
             <div class="FactDataTable-row" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
-                <p class="FactDataTable-column">{{group.facts.keyName}}</p>
-                <p class="FactDataTable-column">{{group.facts.value1}}</p>
-                <p class="FactDataTable-column">{{group.facts.value2}}</p>
+                <span class="FactDataTable-column">{{group.facts.keyName}}</span>
+                <span class="FactDataTable-column">{{group.facts.value1}}</span>
+                <span class="FactDataTable-column">{{group.facts.value2}}</span>
             </div>
         </div>
         <div ng-if="isNestedDisplay">