diff options
| -rw-r--r-- | src/assets/styles/bmc/custom/_tables.scss | 68 | ||||
| -rw-r--r-- | src/views/AccessControl/LocalUserManagement/TableRoles.vue | 2 | ||||
| -rw-r--r-- | src/views/Overview/OverviewEvents.vue | 1 |
3 files changed, 70 insertions, 1 deletions
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" |