From 5e9c391cab08fc34f85776427b35a82853e7b617 Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Fri, 25 Sep 2020 15:49:16 +0530
Subject: Add stacked table style for small screen

- Add style to the stacked table type for small screen only.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I79fb44b20c8436df5734f89e60c98966c9c6a591
---
 src/assets/styles/bmc/custom/_tables.scss          | 68 ++++++++++++++++++++++
 .../LocalUserManagement/TableRoles.vue             |  2 +-
 src/views/Overview/OverviewEvents.vue              |  1 +
 3 files changed, 70 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e754520b..b3ef0565 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -66,3 +66,71 @@
   border-top: none;
 }
 
+// Table stacked style for small screen only
+@include media-breakpoint-down(xs) {
+  .b-table-stacked-sm {
+    border: 1px solid gray("300");
+
+    tr {
+
+      &:not(:first-child) > td[aria-colindex='1'] {
+        border-top: 1px solid gray("300");
+        padding-top: 0.625rem;
+      }
+
+      &:not(.b-table-empty-row) {
+        position: relative; // Restrict background color to get zebra striping for the row
+
+        &::before,
+        &::after {
+          position: absolute;
+          top: 0;
+          height: 100%;
+          z-index: -1;
+        }
+
+        &:before {
+          content: '';
+          background-color: gray("200");
+          width: 40%;
+          border-right: 1px solid gray("300");
+        }
+
+        &:after {
+          content: '';
+          right: 0;
+          width: 60%;
+        }
+
+        &:nth-child(even)::after {
+          background-color: gray("100"); // Zebra striping for the row
+        }
+      }
+
+      td {
+        border: 0;
+        padding: 0.75rem;
+        text-align: left !important;
+
+        &:last-of-type {
+          border-right: 0;
+        }
+      }
+    }
+  }
+
+  .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
+    &::before {
+      text-align: left;
+      padding-left: $spacer /2;
+    }
+
+    > div {
+      padding-left: 1rem;
+    }
+  }
+
+  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
+    border-top-width: 1px;
+  }
+}
\ No newline at end of file
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index 24aeb30f..6596c508 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -116,7 +116,7 @@ export default {
         }
       ],
       fields: [
-        { key: 'description', label: '' },
+        { key: 'description', label: 'Privilege' },
         { key: 'administrator', label: 'Administrator', class: 'text-center' },
         { key: 'operator', label: 'Operator', class: 'text-center' },
         { key: 'readonly', label: 'ReadOnly', class: 'text-center' },
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index fd66cd4d..a194039b 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -13,6 +13,7 @@
       sort-by="id"
       sort-desc
       responsive="md"
+      stacked="sm"
       show-empty
       :items="eventLogData"
       :fields="fields"
-- 
cgit v1.2.3