diff --git a/src/assets/app.scss b/src/assets/app.scss
index f043d785..0362a8a3 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -80,6 +80,55 @@ h2 {
}
}
+@media (max-width: 550px) {
+
+ .table-shadow-box {
+ padding: 10px !important;
+
+ thead {
+ display: none;
+ }
+
+ tbody {
+ .shadow-box {
+ background-color: white;
+ }
+ }
+
+ tr {
+ margin-top: 0 !important;
+ padding: 4px 10px !important;
+ 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: auto;
+ display: block;
+ width: 30%;
+ }
+ }
+ }
+ }
+
+}
+
// Dark Theme override here
.dark {
background-color: #090C10;
@@ -192,6 +241,20 @@ h2 {
.multiselect__option--selected {
background-color: $dark-bg;
}
+
+ @media (max-width: 550px) {
+ .table-shadow-box {
+ tbody {
+ .shadow-box {
+ background-color: $dark-bg2;
+
+ td {
+ border-bottom: 1px solid $dark-border-color;
+ }
+ }
+ }
+ }
+ }
}
/*
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index f164f81a..60db2483 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -26,7 +26,7 @@
-
+
@@ -37,11 +37,11 @@
-
+
{{ beat.name }} |
|
- |
- {{ beat.msg }} |
+ |
+ {{ beat.msg }} |
@@ -170,6 +170,7 @@ export default {
.shadow-box {
padding: 20px;
+ margin-top: 25px;
}
table {
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 8d1ebb2b..3f129475 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -128,7 +128,7 @@
-
+
@@ -138,10 +138,10 @@
-
+
|
- |
- {{ beat.msg }} |
+ |
+ {{ beat.msg }} |