From dbd3f48f6863f301ad890e2eb3d4e9ffcab77d30 Mon Sep 17 00:00:00 2001
From: Ponkhy <xtheponkhx@gmail.com>
Date: Sat, 21 Aug 2021 21:12:44 +0200
Subject: [PATCH 1/7] Added clean monitor table for smaller screens

---
 src/assets/app.scss         | 12 ++++++++++++
 src/pages/DashboardHome.vue | 29 +++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index f043d785b..851b1c2e9 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -80,6 +80,12 @@ h2 {
     }
 }
 
+@media (max-width: 550px) {
+    tbody .shadow-box {
+        background-color: white;
+    }
+}
+
 // Dark Theme override here
 .dark {
     background-color: #090C10;
@@ -192,6 +198,12 @@ h2 {
     .multiselect__option--selected {
         background-color: $dark-bg;
     }
+
+    @media (max-width: 550px) {
+        tbody .shadow-box {
+            background-color: $dark-bg2;
+        }
+    }
 }
 
 /*
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 5c14eb356..fa4e6817a 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -49,11 +49,11 @@
                         </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}">
                             <td>{{ beat.name }}</td>
                             <td><Status :status="beat.status" /></td>
                             <td><Datetime :value="beat.time" /></td>
-                            <td>{{ beat.msg }}</td>
+                            <td class="no-border">{{ beat.msg }}</td>
                         </tr>
 
                         <tr v-if="importantHeartBeatList.length === 0">
@@ -191,4 +191,29 @@ table {
         transition: all ease-in-out 0.2ms;
     }
 }
+
+@media (max-width: 550px) {
+    .no-border {
+        border: 0px;
+    }
+
+    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>

From ca38cc91e9ab73ce997a781f1dac7ecf6570e780 Mon Sep 17 00:00:00 2001
From: Ponkhy <xtheponkhx@gmail.com>
Date: Sat, 21 Aug 2021 21:12:44 +0200
Subject: [PATCH 2/7] Use bootstrap integraded class instead of new ones

---
 src/pages/DashboardHome.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index fa4e6817a..23632c8ab 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -52,8 +52,8 @@
                         <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
                             <td>{{ beat.name }}</td>
                             <td><Status :status="beat.status" /></td>
-                            <td><Datetime :value="beat.time" /></td>
-                            <td class="no-border">{{ 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">
@@ -193,10 +193,6 @@ table {
 }
 
 @media (max-width: 550px) {
-    .no-border {
-        border: 0px;
-    }
-
     tr.shadow-box, .shadow-box:last-child {
         padding: 10px;
     }

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 3/7] 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">

From 36ace3e56c2cf0683a69a75eec8584da1cd935c6 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Tue, 24 Aug 2021 02:02:38 +0800
Subject: [PATCH 4/7] naming convention and wrap all styles inside
 .table-shadow-box to avoid unexpected style in the future

---
 src/assets/app.scss         | 53 ++++++++++++++++++++-----------------
 src/pages/DashboardHome.vue |  2 +-
 src/pages/Details.vue       |  2 +-
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 5a6d1c64b..aa118ed9e 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -81,33 +81,34 @@ h2 {
 }
 
 @media (max-width: 550px) {
-    tbody .shadow-box {
-        background-color: white;
-    }
 
-    div.tableShadowbox {
+    .table-shadow-box {
         padding: 10px !important;
-    }
 
-    .tableShadowbox tr {
-        margin-top: 0 !important;
-        padding: 10px !important;
-    }
+        thead {
+            display: none;
+        }
 
-    .tableShadowbox thead {
-        display: none;
-    }
-  
-    .tableShadowbox tr {
-        display: block;
-        margin-bottom: 10px;
-    }
-  
-    .tableShadowbox td {
-        border-bottom: 1px solid $dark-font-color;
-        display: block;
-        padding: 6px;
+        tbody  {
+            .shadow-box {
+                background-color: white;
+            }
+        }
+
+        tr {
+            margin-top: 0 !important;
+            padding: 10px !important;
+            display: block;
+            margin-bottom: 10px;
+
+            td {
+                border-bottom: 1px solid $dark-font-color;
+                display: block;
+                padding: 6px;
+            }
+        }
     }
+
 }
 
 // Dark Theme override here
@@ -224,8 +225,12 @@ h2 {
     }
 
     @media (max-width: 550px) {
-        tbody .shadow-box {
-            background-color: $dark-bg2;
+        .table-shadow-box {
+            tbody {
+                .shadow-box {
+                    background-color: $dark-bg2;
+                }
+            }
         }
     }
 }
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 2821c575f..2ff354722 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -38,7 +38,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box tableShadowbox" style="overflow-x: scroll">
+            <div class="shadow-box table-shadow-box" style="overflow-x: scroll">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 5bd04c902..0a6aa37e3 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -128,7 +128,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box tableShadowbox">
+            <div class="shadow-box table-shadow-box">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>

From 5dc834794ccc806b0657dcc52b79935f05094c23 Mon Sep 17 00:00:00 2001
From: Ponkhy <xtheponkhx@gmail.com>
Date: Tue, 24 Aug 2021 03:14:33 +0200
Subject: [PATCH 5/7] Row spacing reduced and badge centered

---
 src/assets/app.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index aa118ed9e..754c88fe4 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -97,14 +97,19 @@ h2 {
 
         tr {
             margin-top: 0 !important;
-            padding: 10px !important;
+            padding: 4px 10px !important;
             display: block;
-            margin-bottom: 10px;
+            margin-bottom: 6px;
 
             td {
                 border-bottom: 1px solid $dark-font-color;
                 display: block;
-                padding: 6px;
+                padding: 4px;
+
+                .badge {
+                    margin-top: 0px;
+                    display: block;
+                }
             }
         }
     }

From a17c14ea1c143f47f49f3385b3d8ce0e81a58c37 Mon Sep 17 00:00:00 2001
From: Ponkhy <xtheponkhx@gmail.com>
Date: Tue, 24 Aug 2021 13:24:35 +0200
Subject: [PATCH 6/7] Centered title, badge and datetime

---
 src/assets/app.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 754c88fe4..eb2712933 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -101,14 +101,27 @@ h2 {
             display: block;
             margin-bottom: 6px;
 
+            td:first-child {
+                font-weight: bold;
+            }
+            
+            td:nth-child(-n+3) {
+                text-align: center;
+            }
+
+            td:last-child {
+                text-align: left;
+            }
+
             td {
                 border-bottom: 1px solid $dark-font-color;
                 display: block;
                 padding: 4px;
 
                 .badge {
-                    margin-top: 0px;
+                    margin: auto;
                     display: block;
+                    width: 30%;
                 }
             }
         }

From ca69d06e0d6a62782a7725ac31cb61944b0d0a53 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Tue, 24 Aug 2021 22:27:26 +0800
Subject: [PATCH 7/7] update border color

---
 src/assets/app.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index eb2712933..0362a8a3c 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -104,7 +104,7 @@ h2 {
             td:first-child {
                 font-weight: bold;
             }
-            
+
             td:nth-child(-n+3) {
                 text-align: center;
             }
@@ -247,6 +247,10 @@ h2 {
             tbody {
                 .shadow-box {
                     background-color: $dark-bg2;
+
+                    td {
+                        border-bottom: 1px solid $dark-border-color;
+                    }
                 }
             }
         }