version 1.3.0

StompRocket · Aug 28, 2018 · aa870e9 · aa870e9
1 parent b080488
commit aa870e9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "myst",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/src/assets/forecast.scss b/src/assets/forecast.scss
@@ -2,14 +2,16 @@
   display: grid;
   height: 100%;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr 2fr;
+  grid-template-rows: auto auto;
 }
 
 .current {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-bottom: 4%;
+  margin-top: 4%;
 }
 
 .current__temp {
@@ -33,23 +35,26 @@
 
 .current__summary {
   margin-top: 4%;
-  font-size: 0.9em;
+  font-size: 1em;
 }
 
 .futureContainer {
+  margin-top: 0;
   padding: 4%;
+  min-height: 60vh;
+  margin-bottom: 2%;
 }
 
 .future {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   border-radius: 15px;
-  height: 100%;
   padding: 7%;
   padding-bottom: 1%;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1.3em auto;
-  overflow: hidden;
+  margin: 2% 0;
+}
+
+.future__summary {
+  font-size: 0.7em;
 }
 
 .future__type {
@@ -61,7 +66,7 @@
 .future__forecast {
   overflow-y: scroll;
   overflow-x: hidden;
-  padding: 5% 4%;
+  padding: 5% 0%;
   .day {
     margin: 2% 0;
     display: grid;

diff --git a/src/views/forecast.vue b/src/views/forecast.vue
@@ -4,11 +4,25 @@
     <div v-if="!loading" class="current">
       <p class="current__temp">{{data.currently.temperature}}&#176;</p>
       <p class="current__feels"> <i class="wi" :class="iconClass(data.currently.icon)"></i> {{data.currently.summary}}</p>
-      <p class="current__summary">{{data.hourly.summary}}</p>
+      <p class="current__summary">{{data.minutely.summary}}</p>
     </div>
     <div v-if="!loading" class="futureContainer">
+       <div  class="future">
+           <h1 class="future__type">Next 14 hours</h1>
+          <p class="future__summary">{{data.hourly.summary}}</p>
+          <p class="forecastLoading" v-if="!data">Loading...</p>
+          <div v-if="data" class="future__forecast">
+            <div v-for="item in data.hourly.data" :key="item.dateTime" class="day">
+              <p>{{hour(item.time)}}</p>
+              <i class="wi" :class="iconClass(item.icon)"></i>
+              <p>{{Math.round(item.apparentTemperature)}}&#176;</p>
+
+            </div>
+          </div>
+        </div>
       <div  class="future">
-          <h1 class="future__type">Weekly</h1>
+        <h1 class="future__type">Next Week</h1>
+          <p class="future__summary">{{data.daily.summary}}</p>
           <p class="forecastLoading" v-if="!data">Loading...</p>
           <div v-if="data" class="future__forecast">
             <div v-for="item in data.daily.data" :key="item.dateTime._i" class="day">
@@ -29,7 +43,7 @@ import loading from '@/components/loading.vue'
 import '@/assets/forecast.scss'
 import moment from 'moment'
 DarkSkyApi.apiKey = 'babc1caef4868b2b54563b4140f75c64';
-DarkSkyApi.extendHourly(true);
+DarkSkyApi.extendHourly(false);
 export default {
   name: 'forecast',
   components: {
@@ -44,6 +58,7 @@ export default {
         this.data = result;
         this.loading = false
         this.data.currently.temperature = Math.round(this.data.currently.temperature)
+        this.data.hourly.data = this.data.hourly.data.slice(0, 14);
         });
     } else {
       this.$parent.checkLoc = true
@@ -81,6 +96,9 @@ iconClass(i) {
    },
      day(time) {
       return moment(time).format('ddd')
+    },
+    hour(hr) {
+      return moment.unix(hr).format('ha')
     }
    
   }