From 83fffafe45ebe47acbd15e44fe65ca36a6c6057f Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Tue, 12 Sep 2017 15:08:14 +0300
Subject: [PATCH] fix(dashboard): improve solar card responsiveness

---
 .../dashboard/solar/solar.component.scss      | 22 +++++++++++++------
 .../pages/dashboard/solar/solar.component.ts  |  4 ++--
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/dashboard/solar/solar.component.scss b/src/app/pages/dashboard/solar/solar.component.scss
index c69487ac..c4d4332f 100644
--- a/src/app/pages/dashboard/solar/solar.component.scss
+++ b/src/app/pages/dashboard/solar/solar.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() {
 
@@ -12,6 +14,13 @@
     width: 40%;
   }
 
+  .info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-self: center;
+  }
+
   .date {
     font-size: 1.25rem;
     font-weight: nb-theme(font-weight-bolder);
@@ -39,13 +48,6 @@
     font-size: 1rem;
   }
 
-  .info {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    align-self: center;
-  }
-
   @include nb-for-theme(cosmic) {
     color: nb-theme(color-fg-heading);
 
@@ -57,4 +59,10 @@
       color: nb-theme(color-fg);
     }
   }
+
+  @include media-breakpoint-down(xs) {
+    .value {
+      font-size: 1.75rem;
+    }
+  }
 }
diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts
index 77393c25..7a6f5473 100644
--- a/src/app/pages/dashboard/solar/solar.component.ts
+++ b/src/app/pages/dashboard/solar/solar.component.ts
@@ -51,7 +51,7 @@ export class SolarComponent implements AfterViewInit {
             clockWise: true,
             hoverAnimation: false,
             type: 'pie',
-            center: ['35%', '50%'],
+            center: ['45%', '50%'],
             radius: solarTheme.radius,
             data: [
               {
@@ -116,7 +116,7 @@ export class SolarComponent implements AfterViewInit {
             clockWise: true,
             hoverAnimation: false,
             type: 'pie',
-            center: ['35%', '50%'],
+            center: ['45%', '50%'],
             radius: solarTheme.radius,
             data: [
               {