diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index be384131..57b5fb70 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -25,11 +25,11 @@
-
+
-
+
diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html index 91ccb120..a9dd3c08 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.html +++ b/src/app/pages/dashboard/electricity/electricity.component.html @@ -34,7 +34,6 @@
Value
- $ 91 USD
diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss index 66294965..90747d70 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ b/src/app/pages/dashboard/electricity/electricity.component.scss @@ -1,6 +1,8 @@ @import '../../../@theme/styles/themes'; @import '~@nebular/theme/components/card/card.component.theme'; @import '~@nebular/theme/styles/global/typography/typography'; +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/bootstrap/breakpoints'; @include nb-install-component() { @@ -151,7 +153,7 @@ display: flex; align-items: center; justify-content: space-between; - padding: 1rem 2rem; + padding: 1rem 1.75rem; } .header-stats { @@ -160,11 +162,15 @@ } .stats-block { - margin-right: 3rem; + margin-right: 1rem; color: nb-theme(color-fg); + &:first-child { + margin-right: 2.5rem; + } + .subtitle { - font-size: 1.125rem; + font-size: 1.125rem; } .value { @@ -172,10 +178,6 @@ font-size: 2rem; font-weight: nb-theme(font-weight-bolder); color: nb-theme(color-fg-heading); - - &.dollar { - color: nb-theme(color-fg-highlight); - } } .unit { @@ -199,4 +201,43 @@ } } } + + @include media-breakpoint-between(md, xl) { + .consumption-table { + display: none; + } + } + @include media-breakpoint-down(md) { + .chart-header { + padding: 1rem; + } + .stats-block:first-child { + margin-right: 1rem; + } + .dropdown { + min-width: 100px; + button { + padding-left: 0.75rem; + padding-right: 0.75rem; + } + } + } + @include media-breakpoint-down(sm) { + .consumption-table { + display: none; + } + } + @include media-breakpoint-down(xs) { + .stats-block { + .subtitle { + font-size: 1rem; + } + .value { + font-size: 1.5rem; + } + .unit { + display: none; + } + } + } }