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] 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 f043d785..851b1c2e 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 5c14eb35..fa4e6817 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>