~timharek/5545.no

3b6e29aacda7c03a11e995a5f38179fb5c5fddce — Tim 4 years ago 50298a3
Can now see forecast for today #7 #4
4 files changed, 120 insertions(+), 50 deletions(-)

M css/style.css
M css/style.scss
M index.html
M src/index.js
M css/style.css => css/style.css +43 -18
@@ 8,8 8,20 @@ body {
  color: #212121;
}

.temp {
  color: #cf0000;
}

.rain {
  color: #0077d6;
}

.wind {
  color: #4d4d4d;
}

header {
  height: 280px;
  height: 150px;
  text-align: center;
  background: #fff;
}


@@ 22,37 34,37 @@ header h1 {
  padding-top: 20px;
  margin: 0 auto;
  max-width: 900px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* display: flex;
  justify-content: center;
  align-items: center;*/
}

.wrapper .nowcast {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding: 20px;
  max-width: 750px;
  max-width: 100%;
  border: 1px solid #c3c3c3;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 20px;
}

.wrapper .nowcast .from-to {
  position: absolute;
  padding: 10px;
  top: 0;
  left: 0;
  /* left: 0; */
}

.wrapper .nowcast .from-to,


@@ 84,15 96,28 @@ header h1 {
  margin-right: 20px;
}

.wrapper .nowcast .type .temp {
  color: #cf0000;
.wrapper .forecast-table {
  padding: 10px;
  border: 1px solid #c3c3c3;
  border-radius: 10px;
  background: #fff;
  width: 100%;
  margin-bottom: 20px;
}

.wrapper .nowcast .type .rain {
  color: #0077d6;
.wrapper .forecast-table .time {
  width: 150px;
}

.wrapper .nowcast .type .wind {
  color: #4d4d4d;
.wrapper .forecast-table tbody th, .wrapper .forecast-table tbody td {
  border-bottom: 1px solid #ddd;
}

.wrapper .forecast-table tbody td {
  text-align: center;
}

.wrapper .forecast-table tbody .weathertype {
  max-width: 50px;
}
/*# sourceMappingURL=style.css.map */
\ No newline at end of file

M css/style.scss => css/style.scss +43 -14
@@ 17,8 17,20 @@ body {
  }
}

.temp {
    color: #cf0000;
  }

  .rain {
    color: #0077d6;
  }

  .wind {
    color: #4d4d4d;
  }

header {
  height: 280px;
  height: 150px;
  text-align: center;
  background: #fff;



@@ 32,26 44,30 @@ header {
  margin: 0 auto;
  max-width: 900px;

  display: flex;
  /* display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;*/

  .nowcast {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;

    padding: 20px;
    max-width: 750px;
    max-width: 100%;
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    background: #fff;

    margin-bottom: 20px;

    .from-to {
      position: absolute;
      padding: 10px;
      top: 0;
      left: 0;
      /* left: 0; */
      &,
      i {
        font-size: 16px;


@@ 76,18 92,31 @@ header {
      &:not(:last-child) {
        margin-right: 20px;
      }
    }
  }

      .temp {
        color: #cf0000;
      }
  .forecast-table {
    padding: 10px;
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    background: #fff;
    width: 100%;
    margin-bottom: 20px;

      .rain {
        color: #0077d6;
      }
    .time {
        width: 150px;
    }

      .wind {
        color: #4d4d4d;
      }
    tbody {
        th, td {
            border-bottom: 1px solid #ddd;
        }
        td {
            text-align: center;
        }
        .weathertype {
            max-width: 50px;
        }
    }
  }
}

M index.html => index.html +33 -15
@@ 24,29 24,47 @@
        <img :src="nowcast.weatherImg" alt="" />
        <div class="type">
          <i aria-hidden="true" class="fas fa-thermometer-three-quarters"></i>
          <span class="temp"
            >{{ nowcast.temperature.toLocaleString('no-NB') }}<span class="unit"
              >&deg;C</span
            ></span
          >
          <span class="temp">{{ nowcast.temperature.toLocaleString('no-NB') }}<span class="unit">&deg;C</span></span>
        </div>
        <div class="type">
          <i aria-hidden="true" class="fas fa-umbrella"></i>
          <span class="rain"
            >{{ nowcast.rain.toLocaleString('no-NB') }}<span class="unit"
              >mm</span
            ></span
          >
          <span class="rain">{{ nowcast.rain.toLocaleString('no-NB') }}<span class="unit">mm</span></span>
        </div>
        <div class="type">
          <i class="fas fa-wind"></i>
          <span class="wind"
            >{{ nowcast.wind.toLocaleString('no-NB') }}<span class="unit"
              >m/s</span
            ></span
          >
          <span class="wind">{{ nowcast.wind.toLocaleString('no-NB') }}<span class="unit">m/s</span></span>
        </div>
      </div>
      <h1>I dag 01. januar</h1>
      <table class="forecast-table">
        <thead>
          <tr>
            <th class="time"><i class="far fa-clock"></i> Klokkeslett</th>
            <th>Vær</th>
            <th><i aria-hidden="true" class="fas fa-thermometer-three-quarters"></i> Temp.</th>
            <th><i aria-hidden="true" class="fas fa-umbrella"></i> Nedbør</th>
            <th><i aria-hidden="true" class="fas fa-wind"></i> Vind</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="forecast in todayForecast">
            <td class="time">
              {{ forecast.from }}
            </td>
            <td><img :src="forecast.weatherImg" alt="" class="weathertype"></td>
            <td class="temp">
              {{ forecast.temperature.toLocaleString('no-NB') }} &deg;C
            </td>
            <td class="rain" v-if="forecast.rain > 0">
              {{ forecast.rain.toLocaleString('no-NB') }} mm
            </td>
            <td class="rain" v-else></td>
            <td class="wind">
              {{ forecast.wind.toLocaleString('no-NB') }} m/s
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="src/index.js"></script>
  </body>

M src/index.js => src/index.js +1 -3
@@ 36,8 36,6 @@ var app = new Vue({
      var retrivedData = localStorage.getItem("localData");

      this.setWeather(JSON.parse(retrivedData).properties);

      console.log(this.todayForecast[0].weatherType);
    },
    setWeather: function (weatherData) {
      this.setNowCast(weatherData);


@@ 81,7 79,7 @@ var app = new Vue({
            } else {
              forecastTo = forecastFrom + 1;
            }
            console.log(forecastFrom);

            this.todayForecast.push({
              id: index,
              from: forecastFrom,