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 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>
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 fa4e6817..23632c8a 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 851b1c2e..5a6d1c64 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 23632c8a..2821c575 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 b723def2..05b001ed 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 | 55 ++++++++++++++++++++-----------------
src/pages/DashboardHome.vue | 2 +-
src/pages/Details.vue | 2 +-
3 files changed, 32 insertions(+), 27 deletions(-)
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 5a6d1c64..aa118ed9 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;
+
+ thead {
+ display: none;
+ }
+
+ 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;
+ }
+ }
}
- .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
@@ -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 2821c575..2ff35472 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 5bd04c90..0a6aa37e 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 aa118ed9..754c88fe 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 754c88fe..eb271293 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 eb271293..0362a8a3 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;
+ }
}
}
}