Many little changes. Icons for rain, better card sizes

Still plenty broken though

start.sh

+cd weather
+meteor --settings config/settings.json
+cd ..

weather/client/main.css

@@ -36,7 +36,7 @@
 .out-of-focus-card.mdl-card {
     margin: auto;
     width: auto;
-    height: 30px;
+    /* height: 30px; */
 }
 
 .hourly-table.mdl-data-table {
@@ -47,3 +47,37 @@
 .table-full-width {
     width: 100%;
 }
+
+.degree0.mdl-card {
+    background-color: #000000;
+}
+.degree10.mdl-card {
+    background-color: #222222;
+}
+.degree20.mdl-card {
+    background-color: #444444;
+}
+.degree30.mdl-card {
+    background-color: #666666;
+}
+.degree40.mdl-card {
+    background-color: #777777;
+}
+.degree50.mdl-card {
+    background-color: #888888;
+}
+.degree60.mdl-card {
+    background-color: #999999;
+}
+.degree70.mdl-card {
+    background-color: #aaaaaa;
+}
+.degree80.mdl-card {
+    background-color: #bbbbbb;
+}
+.degree90.mdl-card {
+    background-color: #dddddd;
+}
+.degree100.mdl-card {
+    background-color: #ffffff;
+}

weather/client/views/footer/footer.html

 <template name="footer">
     <footer class="mdl-mini-footer">
         <div class="mdl-mini-footer__left-section">
-            <div class="mdl-logo">SRCT Weather</div>
+            <div class="mdl-logo">SRCT Weather | Powered by <a href="https://darksky.net/">Dark Sky</a></div>
+
         </div>
         <div class="mdl-mini-footer__right-section" style="align: right">
             A project of Mason <a href="http://srct.gmu.edu/"><strong>SRCT</strong></a>, a registered student org.

weather/client/views/weather/weather.html

 
 <template name="weather">
     <div class="mdl-grid">
-        <div class="mdl-cell mdl-cell--6-col">
+        <div class="mdl-cell mdl-cell--12-col">
             <div class="weather-card mdl-card mdl-shadow--4dp">
                 <div class="mdl-card__title">
                     <h1 class="mdl-card__title-text">Current Conditions<br /></h1>
@@ -13,7 +13,7 @@
                     </div>
                     <div class="detail-size">
                         Feels like {{roundNumber weatherData.data.currently.apparentTemperature}}<i class="wi wi-fahrenheit"></i>
-                        <br /><br /><i class="wi wi-cloud"></i> {{precipitationWords}}  &nbsp;&nbsp;&nbsp;<i class="wi wi-wind wi-towards-{{windDirectionClass}}"></i> {{roundNumber weatherData.data.currently.windSpeed}}mph {{windDirection}}
+                        <br /><br /><i class="wi wi-{{precipitationIcons}}"></i> {{precipitationWords}}  &nbsp;&nbsp;&nbsp;<i class="wi wi-wind wi-towards-{{windDirectionClass}}"></i> {{roundNumber weatherData.data.currently.windSpeed}}mph {{windDirection}}
                         <!-- TODO: Change the icon based on time -->
                         <br /><br /><i class="wi wi-sunset"></i> {{formatTimestamp weatherData.data.currently.time}}
                     </div>
@@ -46,7 +46,7 @@
         </div>
         {{#each dayWeather in weatherData.data.daily.data}}
         <div class="mdl-cell mdl-cell--4-col">
-            <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
+            <div class="{{getColorStyle roundNumber dayWeather.temperatureMax}} out-of-focus-card mdl-card mdl-shadow--4dp">
                 <div class="mdl-card__title">
                     <h1 class="mdl-card__title-text">{{getDayNameFromTime dayWeather.time}}<br /></h1>
                 </div>
@@ -57,7 +57,7 @@
                     </div>
                     <div class="detail-size">
                         <br />
-                        {{precipitationWords dayWeather.precipProbability}}
+                        <i class="wi wi-{{precipitationIcons dayWeather.precipProbability}}"></i> {{precipitationWords dayWeather.precipProbability}}
                         <br /><br />
                     </div>
                 </div>

weather/client/views/weather/weather.js

@@ -10,10 +10,22 @@ Template.weather.helpers({
     if(weatherData === undefined) return "...";
     var precipProb = weatherData.data.currently.precipProbability;
     if(precipProb === 0) return "No Rain Expected";
+    if(precipProb > 50 && precipProb < 95) return "Potential for Rain";
     if(precipProb > 95) return "Bring an Umbrella";
     if(precipProb > 100) return "Wat."; //Wait.
     return precipProb+"% Precipitation"; // Otherwise, return the percentage
   },
+  //Convert precipitation percentage to icons
+  precipitationIcons: function() {
+    weatherDataDependency.depend();
+    if(weatherData === undefined) return "...";
+    var precipProb = weatherData.data.currently.precipProbability;
+    if(precipProb === 0) return "cloud";
+    if(precipProb > 50 && precipProb < 95) return "showers";
+    if(precipProb > 95) return "umbrella";
+    if(precipProb > 100) return "alien"; //Wait.
+    return precipProb+"% Precipitation"; // Otherwise, return the percentage
+  },
   //Converts degrees to words
   windDirection: function() {
     weatherDataDependency.depend();
@@ -89,6 +101,42 @@ Template.weather.helpers({
       var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
 
       return days[ given.getDay() ];
+  },
+  getColorStyle: function(temp) {
+      var returning = "degree";
+      if(temp < 10) {
+          return returning + "0";
+      }
+      else if(temp >= 10 && temp < 20) {
+          return returning + "10";
+      }
+      else if(temp >= 20 && temp < 30) {
+          return returning + "20";
+      }
+      else if(temp >= 30 && temp < 40) {
+          return returning + "30";
+      }
+      else if(temp >= 40 && temp < 50) {
+          return returning + "40";
+      }
+      else if(temp >= 50 && temp < 60) {
+          return returning + "50";
+      }
+      else if(temp >= 60 && temp < 70) {
+          return returning + "60";
+      }
+      else if(temp >= 70 && temp < 80) {
+          return returning + "70";
+      }
+      else if(temp >= 80 && temp < 90) {
+          return returning + "80";
+      }
+      else if(temp >= 90 && temp < 100) {
+          return returning + "90";
+      }
+      else if(temp >= 100) {
+          return returning + "100";
+      }
   }
 });
 

weather/config/settings.json

 {
-  "weatherCacheExpireTime": "3600"
+  "weatherCacheExpireTime": "1800"
 }