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
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e754520..b3ef056 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 24aeb30..6596c50 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -116,7 +116,7 @@
}
],
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 fd66cd4..a194039 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"