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 @@ - + - - + + @@ -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 @@ -
+
{{ beat.name }} {{ beat.msg }}{{ beat.msg }}
@@ -138,10 +138,10 @@ - + - - + +
{{ beat.msg }}{{ beat.msg }}