diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-05-28 23:28:29 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-06-17 23:36:55 +0300 |
commit | 56ee769fd5a3df93eb275859a712700a7ba54944 (patch) | |
tree | df91c4974e2c0e42eb6966b7c10728a7918c4a95 /src/assets/styles | |
parent | 8cb0d253809582e52bf2c388ac1f95a0713dc3f9 (diff) | |
download | webui-vue-56ee769fd5a3df93eb275859a712700a7ba54944.tar.xz |
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
Diffstat (limited to 'src/assets/styles')
-rw-r--r-- | src/assets/styles/vendor-overrides/bootstrap/_tables.scss | 63 |
1 files changed, 52 insertions, 11 deletions
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 |