Merge pull request #83 from JulianNorton/development

metric/celsius buttons to production

README.md

@@ -1,8 +1,8 @@
 # http://wxkb.io/
-### Weather forecast in under 10kb.
+#### Weather forecast in under 10kb.
 Loads in less than 10kb (excluding favicons) without any client side javascript.
 
-## Run wxkb.io locally
+# Run wxkb.io locally
 1. [Install node.js](https://nodejs.org/en/download/)
   * if you have [homebrew](http://brew.sh/), `brew install node`
 1. clone repo via terminal: `git clone https://github.com/JulianNorton/weather-10kb.git`
@@ -20,14 +20,14 @@ Loads in less than 10kb (excluding favicons) without any client side javascript.
 1. [Submit any bugs, questions, or ideas you have!](https://github.com/JulianNorton/weather-10kb/issues)
 
 
-### Modify & Compile CSS
+## Modify & Compile CSS
   * `styles-compiler.scss` compiles into `main.css` using [node-sass](https://npmjs.org/package/node-sass)
   * `npm run watch-css` Automatically compiles css whenever there's a change to the `.scss`
   * `npm run build-css` If you want to compile css once 
   * `npm rebuild node-sass` if you're switching branches a lot this can fix node-sass crashes.
 
 
-### Please fork, modify, and use this project!
+## Please fork, modify, and use this project!
 Open source, General Public License v2. Basically do whatever you want with it. Pull requests must keep these tenants in mind:
 
 #### Accessibility (a11y)
@@ -45,8 +45,4 @@ Open source, General Public License v2. Basically do whatever you want with it.
 * Vote for wkxb on a-k-apart.com!
   * https://a-k-apart.com/gallery/wxkb-io-A-super-fast-weat
 * [Sublime text syntax package for `.ejs` files](https://packagecontrol.io/packages/EJS%202)
-* Use [EditorConfig](http://editorconfig.org/) to maintain a consistent coding style between contributors. Use EditorConfig with your editor: [the plugin section](http://editorconfig.org/#download).
-
-### Pull requestsAccessibility
-Cross-browser compatibility (I'll open it in lynx)
-Performance (shouldn't be a problem here)
+* Use [EditorConfig](http://editorconfig.org/) to maintain a consistent coding style between contributors. See [EditorConfig plugins](http://editorconfig.org/#download).

index.js

@@ -1,5 +1,6 @@
 var compression = require('compression');
 var express = require('express');
+var cookieParser = require('cookie-parser');
 var moment = require('moment-timezone');
 var minifyHTML = require('express-minify-html');
 var weather10kb = require('./weather10kb');
@@ -22,6 +23,7 @@ app.use(minifyHTML({
   }
 }));
 app.use(express.static(__dirname + '/public'));
+app.use(cookieParser());
 app.use('/', weather10kb);
 // Add the Opbeat middleware after your regular middleware
 app.use(opbeat.middleware.express()) // injects opbeat, if error, registers in opbeat

package.json

@@ -13,11 +13,12 @@
   },
   "dependencies": {
     "compression": "^1.6.2",
+    "cookie-parser": "^1.4.3",
+    "dark-sky": "^1.0.9",
     "dateformat": "^1.0.12",
     "ejs": "^2.5.1",
     "express": "^4.13.3",
     "express-minify-html": "^0.6.0",
-    "dark-sky": "^1.0.9",
     "geoip-lite": "^1.1.8",
     "google-timezone-api": "^1.0.1",
     "moment-timezone": "^0.5.5",

public/style/styles-compiler.scss

@@ -189,6 +189,29 @@ label {
   }
 }
 
+.btn-secondary {
+  background: lighten($brand-primary, 55%);
+  border: none;
+  color: $gray;
+  cursor: pointer;
+  font-size: .8em;
+  padding: .3em .4em;
+  &:hover, &:active, &:focus {
+    background-color: lighten($brand-primary, 40%);
+  }
+
+  &.current {
+    background: $brand-primary;
+    color: $gray-lighter;
+  }
+}
+
+.btn-wrap {
+  .btn-secondary, .btn {
+    margin-right: $unit-spacing;
+  }
+}
+
 .card {
   margin-bottom: $unit-spacing;
   border: $border;
@@ -368,11 +391,17 @@ svg .bolt {
 /* ---------------------------------------- */
 /* Utilities */
 
+// flex utilities
+
 .flex {
   display: flex;
   align-items: flex-start;
 }
 
+.f-1 {
+  flex: 1;
+}
+
 .wrap {
   flex-wrap: wrap;
 }
@@ -381,6 +410,12 @@ svg .bolt {
   align-self: center;
 }
 
+.center-h {
+  justify-content: center;
+}
+
+// spacing utilties
+
 .p-a-1 {
   padding: $unit-spacing;
 
@@ -403,6 +438,8 @@ svg .bolt {
   margin-bottom: $unit-spacing / 2;
 }
 
+// 
+
 .nowrap {
   white-space: nowrap;
 }

views/pages/index.ejs

@@ -18,7 +18,7 @@
 
   <body id="wxkb_io" class="container">
     <header class="flex wrap" style="justify-content: space-between">
-      <h1 class="m-a-1 data-secondary">Weather for <%= params.formatted_location %> <a class="m-x-1 nowrap" href="#change-location">Change location</a></h1>
+      <h1 class="m-a-1 data-secondary">Weather for <%= params.formatted_location %> <a class="m-x-1 nowrap" href="#change-location">Change location and units</a></h1>
       <h2 class="m-a-1 data-secondary" style="margin-right: 1em;" title="wxkb.io automatically refreshes every 10 minutes.">wxkb.io</h2>
     </header>
     <main>
@@ -62,16 +62,7 @@
       </article>
       <section class="card">
         <%- include('../partials/change-location')%>
-        <nav>
-          <h3 class="sr-only">Current units</h3>
-          <% if (params.scale === 'F') { %>
-          Imperial (°F)
-          <a class="small m-x-1" href="/<%= params.location %>/c">Switch to Metric units (°C &amp; m/s)</a>
-          <% } else {%>
-          Metric (°C)
-          <a class="small m-x-1" href="/<%= params.location %>">Switch to Imperial units (°F &amp; mph)</a>
-          <% } %>
-        </nav>
+        <%- include('../partials/switch-units')%>
       </section>
     </main>
     <hr class="sr-only" />

views/partials/change-location.ejs

@@ -4,7 +4,7 @@
     <label for="change-location">Enter a city, place, or zipcode</label>
     <span class="flex wrap m-b-xs">
       <input type="search" id="change-location" name="location" placeholder="New York, NY" />
-      <button class="btn" type="submit">Change location</button>
+      <button class="btn large" type="submit">Change location</button>
     </span>
   </form>
 </nav>

views/partials/summary.ejs

@@ -1,29 +1,41 @@
 <span><%= data.summary.charAt(0).toUpperCase() + data.summary.slice(1).toLowerCase() %></span>
 
+<% isWindSpeedBelowMph = function(mphValue) {
+	if (params.windUnit === 'm/s' && data.windSpeed < mphValue*0.447) {
+		return true;
+	}
+	if (params.windUnit === 'km/h' && data.windSpeed < mphValue*1.609) {
+		return true;
+	}
+	if (params.windUnit === 'mph' && data.windSpeed < mphValue) {
+		return true;
+	}
+	return false;
+}%>
+
 <% if (Math.abs(data.temperature - data.apparentTemperature) > 3 ) { %>
 	<span>
-		feels like 
+		feels like
 		<%= Math.round(data.apparentTemperature) %>°
 	</span>
 <% } %>
 
-<% if (params.units === 'si' && data.windSpeed < 0.894 || data.windSpeed < 2) { %>
-	<!--<span>with no wind.</span>-->
+<span>with
+<% if (isWindSpeedBelowMph(2)) { %>
+	no wind
 <% } else { %>
-	<span>
-		with a
-		<%= Math.round(data.windSpeed) %>
-		<span><%= (params.units === 'si') ? 'm/s' :'mph' %>
-		<% if (params.units === 'si' && data.windSpeed < 13.9 || data.windSpeed < 32) { %>
+	a <%= Math.round(data.windSpeed) %>
+		<span><%= params.windUnit %>
+		<% if (isWindSpeedBelowMph(32)) { %>
 			breeze
-		<% } else if (params.units === 'si' && data.windSpeed < 17.2 || data.windSpeed < 39) { %>
+		<% } else if (isWindSpeedBelowMph(39)) { %>
 			wind
 		<% } else { %>
 			gale
 		<% } %>
 		</span>
-	</span>
 <% } %>
+</span>
 
 <% if (data.precipProbability > 5) { %>
 	<span><%= Math.round(100 * data.precipProbability) %>% chance of</span>

views/partials/switch-units.ejs

@@ -0,0 +1,12 @@
+<h4 class="sr-only">Switch units</h4>
+<form action="/<%= params.locationSearch %>" method="get">
+  <ul class="flex wrap m-b-xs center-h btn-wrap">
+    <% for (var unitProp in params.defaultUnits) { %>
+      <li>
+        <label id="<%= unitProp %>-label" class="sr-only"><%= params.defaultUnits[unitProp].desc %><%= params.units === unitProp ? ' (current)' : '' %></label>
+        <button type="submit" value="<%= unitProp %>" class="btn-secondary<%= params.units === unitProp ? ' current' : '' %>" aria-labelledby="<%= unitProp %>-label" name="units"><span aria-hidden="true">°<%= params.defaultUnits[unitProp].scale %>, <%= params.defaultUnits[unitProp].speed %></span></button>
+      </li>
+    <% } %>
+  </ul>
+</form>
+