fix(layout): Bugfixing responsivnes

krzysztofsaja · Jul 24, 2017 · 703829d · 703829d
1 parent 7615af3
commit 703829d
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;