fix(dashboard): improve dashboard responsiveness

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

@@ -1,4 +1,4 @@
-<nb-card size="large">
+<nb-card [size]="breakpoint.width >= 1600 ? 'large' : 'xlarge'">
   <nb-tabset fullWidth>
     <nb-tab tabTitle="Contacts">
       <div class="contact" *ngFor="let c of contacts">

src/app/pages/dashboard/contacts/contacts.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { NbThemeService, NbMediaBreakpoint } from '@nebular/theme';
 
 import { UserService } from '../../../@core/data/users.service';
 
@@ -10,10 +11,14 @@ import { UserService } from '../../../@core/data/users.service';
 export class ContactsComponent implements OnInit {
 
   contacts: any[];
-
   recent: any[];
+  breakpoint: NbMediaBreakpoint;
 
-  constructor(private userService: UserService) {
+  constructor(private userService: UserService, private themeService: NbThemeService) {
+    themeService.onMediaQueryChange()
+      .subscribe(([oldValue, newValue]) => {
+        this.breakpoint = newValue;
+      });
   }
 
   ngOnInit() {
@@ -41,5 +46,4 @@ export class ContactsComponent implements OnInit {
         ];
       });
   }
-
 }

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

@@ -25,27 +25,25 @@
 </div>
 
 <div class="row">
-  <div class="col-lg-3">
+  <div class="col-xxxl-3 col-xl-4 col-lg-5 col-md-12">
     <ngx-temperature></ngx-temperature>
   </div>
 
-  <div class="col-lg-9">
+  <div class="col-xxxl-9 col-xl-8 col-lg-7 col-md-12">
     <ngx-electricity></ngx-electricity>
   </div>
 </div>
 
 <div class="row">
-  <div class="col-lg-9">
+  <div class="col-xxxl-9 col-xl-12">
     <ngx-rooms></ngx-rooms>
   </div>
 
-  <div class="col-lg-3">
+  <div class="col-xxxl-3 col-xxl-4 col-lg-7 col-md-6">
     <ngx-contacts></ngx-contacts>
   </div>
-</div>
 
-<div class="row">
+  <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
-  <div class="col-lg-3">
     <nb-card size="xsmall" class="solar-card">
       <nb-card-header>Solar Energy Consumption</nb-card-header>
       <nb-card-body>
@@ -56,12 +54,12 @@
     <ngx-kitten></ngx-kitten>
   </div>
 
-  <div class="col-lg-3">
+  <div class="col-xxxl-3 col-xxl-4 col-md-5">
     <ngx-traffic></ngx-traffic>
     <ngx-weather></ngx-weather>
   </div>
 
-  <div class="col-lg-6">
+  <div class="col-xxxl-6 col-xxl-12 col-md-7">
     <ngx-security-cameras></ngx-security-cameras>
   </div>
 </div>

src/app/pages/dashboard/security-cameras/security-cameras.component.html

@@ -28,10 +28,10 @@
   <nb-card-footer>
     <nb-actions size="medium" fullWidth>
       <nb-action>
-        <i class="nb-pause"></i><span>Pause</span>
+        <i class="nb-pause-outline"></i><span>Pause</span>
       </nb-action>
       <nb-action>
-        <i class="nb-list"></i><span>Log View</span>
+        <i class="nb-list"></i><span>Logs</span>
       </nb-action>
       <nb-action>
         <i class="nb-search"></i><span>Search</span>

src/app/pages/dashboard/security-cameras/security-cameras.component.scss

@@ -1,4 +1,6 @@
 @import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   nb-card-header {
@@ -103,10 +105,12 @@
   }
 
   nb-action {
+    padding: 0 0.5rem 0 0;
+
     i {
       color: nb-theme(color-fg);
-      font-size: 2rem;
+      font-size: 3rem;
-      margin-right: 1rem;
+      margin-right: 0.5rem;
     }
 
     span {
@@ -137,4 +141,16 @@
       font-weight: nb-theme(font-weight-bolder);
     }
   }
+
+  @include media-breakpoint-down(lg) {
+    nb-action {
+      padding: 0;
+      i {
+        margin: 0;
+      }
+      span {
+        display: none;
+      }
+    }
+  }
 }