From 56ee769fd5a3df93eb275859a712700a7ba54944 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 28 May 2020 13:28:29 -0700
Subject: Add Hardware status page and system table

Adds ability to see system information in table format with a row
expansion details view. Modified tables styles to add table borders.

Created global mixin for table data formatting:
- Show '--' for undefined or empty string values
- Map Redfish health status options to status-icon values

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5b45c37997647f5a265c1e84eb53f0b51699ee20
---
 .../styles/vendor-overrides/bootstrap/_tables.scss | 63 ++++++++++++++++++----
 1 file changed, 52 insertions(+), 11 deletions(-)

(limited to 'src/assets/styles/vendor-overrides/bootstrap/_tables.scss')

diff --git a/src/assets/styles/vendor-overrides/bootstrap/_tables.scss b/src/assets/styles/vendor-overrides/bootstrap/_tables.scss
index 2372d257..b20feb0d 100644
--- a/src/assets/styles/vendor-overrides/bootstrap/_tables.scss
+++ b/src/assets/styles/vendor-overrides/bootstrap/_tables.scss
@@ -1,22 +1,63 @@
-table {
+.table {
   position: relative;
   z-index: $zindex-dropdown;
-  .status-icon svg {
-    width: 1rem;
-    height: auto;
-  }
-}
 
-.table-light {
   td {
-    border-top: none;
+    border-top: 1px solid $gray-300;
     border-bottom: 1px solid $gray-300;
+    &:first-of-type {
+      border-left: 1px solid $gray-300;
+    }
+    &:last-of-type {
+      border-right: 1px solid $gray-300;
+    }
   }
-}
 
-.thead-light.thead-light {
-  th {
+  // thead-light added for specificiy
+  .thead-light th {
     border: none;
     color: $dark;
   }
+
+  .status-icon svg {
+    width: 1rem;
+    height: auto;
+  }
+
+  .b-table-has-details {
+    td {
+      border-bottom: none;
+    }
+    .table-row-expand svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  .b-table-details {
+    background-color: $light;
+    td {
+      padding-left: calc(50px + (#{$table-cell-padding} * 2));
+    }
+    dl {
+      margin: 0;
+    }
+    dt {
+      display: inline-block;
+      margin-right: $spacer / 2;
+    }
+    dd {
+      display: inline-block;
+    }
+  }
+
+  .table-row-expand {
+    width: 50px;
+    .btn {
+      padding: 0;
+      width: 50px;
+    }
+    svg {
+      fill: $dark;
+    }
+  }
 }
\ No newline at end of file
-- 
cgit v1.2.3