From 703829dda84b03fc4621aa2914856cee986b10f9 Mon Sep 17 00:00:00 2001
From: Krzysztof Saja <krzysztofsaja@gmail.com>
Date: Mon, 24 Jul 2017 14:38:12 +0200
Subject: [PATCH] fix(layout): Bugfixing responsivnes

---
 demo/demo.component.ts                              |  6 +++---
 .../weather-current-description.component.ts        |  9 ++++++++-
 .../weather-current-details.component.ts            | 13 +++++++++++--
 .../current-temperature.component.ts                |  1 +
 .../weather-current-wind.component.ts               |  1 +
 .../forecast-detailed-day.component.ts              | 10 +++++++---
 src/services/api/weather.api.service.ts             |  1 -
 src/weather.container.ts                            |  3 ++-
 8 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/demo/demo.component.ts b/demo/demo.component.ts
index 2e4afc6..f582ab3 100644
--- a/demo/demo.component.ts
+++ b/demo/demo.component.ts
@@ -88,10 +88,10 @@ export class DemoComponent {
     scale: TemperatureScale.CELCIUS,
     backgroundColor: '#ffffff',
     color: '#222222',
-    width: 'auto',
+    width: '400px',
     height: 'auto',
-    showWind: false,
-    showDetails: false,
+    showWind: true,
+    showDetails: true,
     showForecast: true,
     forecastMode: ForecastMode.DETAILED,
     language: 'en',
diff --git a/src/components/weather-current-description/weather-current-description.component.ts b/src/components/weather-current-description/weather-current-description.component.ts
index c9a9a7c..1cb3d40 100644
--- a/src/components/weather-current-description/weather-current-description.component.ts
+++ b/src/components/weather-current-description/weather-current-description.component.ts
@@ -9,7 +9,14 @@ import {
 @Component({
   selector: 'weather-current-description',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [``],
+  styles: [
+    `
+           :host {
+             display: block;
+             text-align: center;
+           }
+           `
+  ],
   template: `
     {{ descripion | uppercase}}
   `
diff --git a/src/components/weather-current-details/weather-current-details.component.ts b/src/components/weather-current-details/weather-current-details.component.ts
index 4ba02b1..e347191 100644
--- a/src/components/weather-current-details/weather-current-details.component.ts
+++ b/src/components/weather-current-details/weather-current-details.component.ts
@@ -10,6 +10,12 @@ import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
       text-align: center;
       margin-top: 1em;
     }
+    .row {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+    }
     .row span {
       margin: 0 0.3em;
     }
@@ -21,8 +27,11 @@ import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
   template: `
     <div class="row">
       <i class="wi wi-thermometer"></i>
-      <span>Min: {{minTemp}}&deg;</span>
-      <span>Max: {{maxTemp}}&deg;</span>
+      <span>
+          <span>Min: {{minTemp}}&deg;</span>
+          <span>Max: {{maxTemp}}&deg;</span>
+      </span>
+
     </div>
     <div class="row">
       <span><i class="wi wi-barometer"></i>Pressure: {{pressure}}</span>
diff --git a/src/components/weather-current-temperature/current-temperature.component.ts b/src/components/weather-current-temperature/current-temperature.component.ts
index e3828de..850185d 100644
--- a/src/components/weather-current-temperature/current-temperature.component.ts
+++ b/src/components/weather-current-temperature/current-temperature.component.ts
@@ -7,6 +7,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
     `
   :host {
     display: block;
+    line-height: 1.1em;
   }
     .deg {
       letter-spacing: -0.13em;
diff --git a/src/components/weather-current-wind/weather-current-wind.component.ts b/src/components/weather-current-wind/weather-current-wind.component.ts
index e72e078..5e3225f 100644
--- a/src/components/weather-current-wind/weather-current-wind.component.ts
+++ b/src/components/weather-current-wind/weather-current-wind.component.ts
@@ -18,6 +18,7 @@ import { WeatherSettings } from '../../weather.interfaces';
       justify-content: space-around;
       align-items: center;
       font-size: 0.8em;
+      min-height: 1.3em;
     }
     i {
       margin-left: 0.3em;
diff --git a/src/components/weather-forecast/forecast-detailed/forecast-detailed-day.component.ts b/src/components/weather-forecast/forecast-detailed/forecast-detailed-day.component.ts
index ef3b38c..2b13125 100644
--- a/src/components/weather-forecast/forecast-detailed/forecast-detailed-day.component.ts
+++ b/src/components/weather-forecast/forecast-detailed/forecast-detailed-day.component.ts
@@ -17,20 +17,24 @@ import { WeatherSettings } from '../../../weather.interfaces';
     `
              :host {
                display: flex;
-               justify-content: space-between;
                align-items: center;
                padding: 0.1em 0;
                font-size: 1em;
                box-sizing: border-box;
-             }
+               justify-content: flex-start;
+               width: 100%;
 
+             }
              :host > * {
                padding: 0 0.4em;
              }
-
+             .left {
+               flex-grow: 0;
+             }
              weather-chart {
                height: 80px;
                width: 80%;
+               flex: 1 1;
              }
 
              weather-icon {
diff --git a/src/services/api/weather.api.service.ts b/src/services/api/weather.api.service.ts
index 836553a..422c3bc 100644
--- a/src/services/api/weather.api.service.ts
+++ b/src/services/api/weather.api.service.ts
@@ -6,7 +6,6 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/first';
-import { TemperatureScale } from '../../components/weather-current-temperature/current-temperature.component';
 import { WeatherQueryParams } from '../../weather.interfaces';
 
 @Injectable()
diff --git a/src/weather.container.ts b/src/weather.container.ts
index ccbfce1..bf2e93c 100644
--- a/src/weather.container.ts
+++ b/src/weather.container.ts
@@ -55,10 +55,11 @@ import {
                flex-direction: column;
                align-items: center;
                justify-content: center;
-               min-width: 130px;
+               min-width: 140px;
              }
              .forecast {
                min-width: 200px;
+               width: 100%;
              }
              .current, .forecast {
                padding: 0.5em;