From ce79f8bfc76dbfffff0db2cbea6834cbc6a0df02 Mon Sep 17 00:00:00 2001
From: Ponkhy <xtheponkhx@gmail.com>
Date: Mon, 23 Aug 2021 01:22:55 +0200
Subject: [PATCH] CSS optimizations

---
 src/assets/app.scss         | 24 ++++++++++++++++++++++++
 src/pages/DashboardHome.vue | 24 ++----------------------
 src/pages/Details.vue       |  8 ++++----
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 851b1c2e9..5a6d1c64b 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -84,6 +84,30 @@ h2 {
     tbody .shadow-box {
         background-color: white;
     }
+
+    div.tableShadowbox {
+        padding: 10px !important;
+    }
+
+    .tableShadowbox tr {
+        margin-top: 0 !important;
+        padding: 10px !important;
+    }
+
+    .tableShadowbox thead {
+        display: none;
+    }
+  
+    .tableShadowbox tr {
+        display: block;
+        margin-bottom: 10px;
+    }
+  
+    .tableShadowbox td {
+        border-bottom: 1px solid $dark-font-color;
+        display: block;
+        padding: 6px;
+    }
 }
 
 // Dark Theme override here
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 23632c8ab..2821c575f 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -38,7 +38,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box" style="margin-top: 25px;overflow-x: scroll">
+            <div class="shadow-box tableShadowbox" style="overflow-x: scroll">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
@@ -182,6 +182,7 @@ export default {
 
 .shadow-box {
     padding: 20px;
+    margin-top: 25px;
 }
 
 table {
@@ -191,25 +192,4 @@ table {
         transition: all ease-in-out 0.2ms;
     }
 }
-
-@media (max-width: 550px) {
-    tr.shadow-box, .shadow-box:last-child {
-        padding: 10px;
-    }
-
-    thead {
-        display: none;
-    }
-  
-    tr {
-        display: block;
-        margin-bottom: 10px;
-    }
-  
-    td {
-        border-bottom: 1px solid $dark-font-color;
-        display: block;
-        padding: 6px;
-    }
-}
 </style>
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index b723def2e..05b001ed5 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -128,7 +128,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box">
+            <div class="shadow-box tableShadowbox">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
@@ -138,10 +138,10 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="(beat, index) in displayedRecords" :key="index">
+                        <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}" style="padding: 10px;">
                             <td><Status :status="beat.status" /></td>
-                            <td><Datetime :value="beat.time" /></td>
-                            <td>{{ beat.msg }}</td>
+                            <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
+                            <td class="border-0">{{ beat.msg }}</td>
                         </tr>
 
                         <tr v-if="importantHeartBeatList.length === 0">