add style for fullscreen table, fix responsive tables

4 files changed, 63 insertions, 11 deletions

diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index bbb89f16..c9977905 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -153,9 +153,16 @@
 [class*="table-responsive-"] {
   @include media-breakpoint-up(lg) {
     overflow: auto;
-    width: calc(100vw - 345px);
-    border-right: 1px solid $gray-10;
-    border-radius: $border-radius;
+    width: calc(100vw - 346px);
+    .table {
+      border-right: 1px solid $gray-30;
+      border-radius: $border-radius;
+    }
+    .table-accessory,
+    .table-full {
+      border-right: none;
+      border-radius: 0px;
+    }
   }
 }
 
@@ -166,7 +173,6 @@
 
     tr {
       &:not(:first-child) > td[aria-colindex="1"] {
-        // border-top: 1px solid $gray-10;
         padding-top: 0.625rem;
       }
 
@@ -236,11 +242,55 @@
     padding: 2px;
   }
   td {
+    white-space: nowrap;
     font-size: 0.745rem;
     color: $text-tretiatry;
   }
   .thead-light th > div {
     font-size: 0.755rem !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 90%;
+  }
+  @include media-breakpoint-down(md) {
+    overflow-y: auto;
+    width: 100vw;
+  }
+}
+
+.table-full {
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+  border-top: 1px solid $gray-30;
+
+  thead th {
+    border-bottom: 1px solid $gray-30;
+    border: none;
+    &:first-child {
+      border-radius: 0;
+    }
+    &:last-child {
+      border-radius: 0;
+    }
+  }
+}
+
+.full-table-container {
+  & > [class*="table-responsive-"] {
+    overflow: auto;
+    width: calc(100vw - 280px);
+    margin-left: -1.97rem;
+    margin-right: -1.95rem;
+    border-radius: 0;
+    @include media-breakpoint-down(lg) {
+      margin-left: -2.2rem;
+    }
+    @include media-breakpoint-down(md) {
+      margin-left: -1.2rem;
+      width: 100vw;
+    }
   }
 }
 
diff --git a/src/views/_sila/HardwareStatus/Sensors/Sensors.vue b/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
index 3f1eb59a..3f9cf6c3 100644
--- a/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
+++ b/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
@@ -20,8 +20,8 @@
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
       </b-col>
     </b-row>
-    <b-row>
-      <b-col xl="12">
+    <b-row class="m-0 p-0">
+      <b-col class="full-table-container m-0 p-0" xl="12">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
@@ -37,12 +37,12 @@
         <b-table
           ref="table"
           responsive="md"
+          table-variant="full"
           selectable
           no-select-on-click
           sort-icon-left
           hover
           no-sort-reset
-          sticky-header="75vh"
           sort-by="status"
           show-empty
           :no-border-collapse="true"
diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue
index 19a8b205..bc276b29 100644
--- a/src/views/_sila/Logs/EventLogs/EventLogs.vue
+++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue
@@ -40,8 +40,8 @@
         </b-button>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col>
+    <b-row class="m-0 p-0">
+      <b-col class="full-table-container m-0 p-0">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
@@ -66,6 +66,7 @@
           id="table-event-logs"
           ref="table"
           responsive="md"
+          table-variant="full"
           selectable
           no-select-on-click
           sort-icon-left
diff --git a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
index 80a837c7..63b74bc9 100644
--- a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -31,8 +31,8 @@
         </b-button>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col>
+    <b-row class="m-0 p-0">
+      <b-col class="full-table-container m-0 p-0">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
@@ -49,6 +49,7 @@
           id="table-post-code-logs"
           ref="table"
           responsive="md"
+          table-variant="full"
           selectable
           no-select-on-click
           sort-icon-left