fix(dashboard): improve electricity responsiveness

src/app/pages/dashboard/dashboard.component.html

@@ -25,11 +25,11 @@
 </div>
 
 <div class="row">
-  <div class="col-xxxl-3 col-xl-4 col-lg-5 col-md-12">
+  <div class="col-xxxl-3 col-xl-4 col-lg-5 col-md-6">
     <ngx-temperature></ngx-temperature>
   </div>
 
-  <div class="col-xxxl-9 col-xl-8 col-lg-7 col-md-12">
+  <div class="col-xxxl-9 col-xl-8 col-lg-7 col-md-6">
     <ngx-electricity></ngx-electricity>
   </div>
 </div>

src/app/pages/dashboard/electricity/electricity.component.html

@@ -34,7 +34,6 @@
         <div class="stats-block">
           <div class="subtitle">Value</div>
           <div>
-            <span class="value dollar">$</span>
             <span class="value">91</span>
             <span class="unit">USD</span>
           </div>

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;
+      }
+    }
+  }
 }