add manifest.json + meta, update icons

README.md

@@ -2,7 +2,7 @@
 
 Simple dashboard that taps into the [opensensemap](http://opensensemap.org/) api to show the measurements for a specific [sensebox](www.sensebox.de/en/).
 
-![devseed-sense-dashboard.png](devseed-sense-dashboard.png)
+![devseed-sense-dashboard.png](app/assets/graphics/meta/default-meta-image.png)
 
 ## Development environment
 To set up the development environment for this website, you'll need to install the following on your system:

app/assets/graphics/layout/devseed-logo-symbol.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#D04003" d="M512 32c0-17.7-14.3-32-32-32h-448c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32v-448z"/><path fill="#fff" d="M289.5 434.7c-.1-10.3 2.6-19.2 7-28.5-9.2 8.1-12.8 17.3-16.2 29.8.9-14.6 8-110.4 8-115.2 24.5-70 13.6-279 44.8-305.1-36 6.5-48.2 43.3-59.7 72.5-11.4-34.3-2.4-56.1-40.2-68.1 30.2 25.6 24.2 47.6 30.4 83-18.1-23.5-12.5-52.8-33.3-76.8-5.9-6.1-25.5-21-25.5-21 0 .9 15.7 32.3 18.6 48.9 2.9 16.6 9.8 49.8 8.8 62 2.6 67.8 19.6 133.5 31.3 200 2 11.4 7.8 44.5 7.8 44.5l1.3 13.8c-2.1-9.1-4.1-17.3-5.2-20.8-3.4-10-11.8-35.4-13.7-45.8-28.5-58.6-80.6-173.5-150.2-190.4 39.5 35 82 81.2 91.5 125.8-21.2-29.8-104.6-93.4-138.5-116.6 63.9 66.3 115.2 135 170.8 208.7 16.2 21 36.3 63.3 37.7 72.9 1.1 7.1 2.4 33.6 3.2 49.9-31.1-75.1-48.1-113.2-105.5-146.8-9.8-5.2-40.2-15.7-40.2-15.7 13.8 15.2 30.7 16.1 43.3 37.3-26.1-17.1-53.2-20.1-83-21.1 95.7 49.5 147.5 63.3 179.7 158.4 2.6 15.6-1.4 27.8-1 41.8h21.2c-.1-10 .1-19.6 0-21.6 1.1-6.6 1.3-26.6 4.2-32.7 10-25.4 26.2-37.4 48.8-52.2-20.3 6.6-30.6 4-46.2 29.1zm94.5-224.2c-7.8 7.4-31.3 37.2-31.3 37.2 1.3-42 11.9-87 38.7-118.4-37.3 24.4-58.3 84.6-68 121.4-3.8 14.8-47.9 100.7-27.4 146.7 4-16.8 13.5-33.1 24-47.6 4.9-6.6 25.5-39.3 46-86 18.1-47 47.8-74.5 89.6-97.8-31.6 4.8-49.6 23-71.6 44.5zm7.3-81.2z"/></svg>

app/assets/graphics/layout/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.3 210.3"><defs><clipPath id="a"><path d="M1776.56 314.36L1578 115.76l-198.6 198.6L1578 512.92l198.56-198.57"/></clipPath></defs><path d="M150.45 165c-11.77-11.13-27.6-18.02-45.07-18.02-17.6 0-33.56 6.96-45.34 18.2l45.1 45.12 45.3-45.3" fill="#4ebe4b"/><path d="M105.5 50.1c-14.2 0-27.3-4.68-37.92-12.5L105.16 0l37.92 37.92c-10.56 7.64-23.53 12.17-37.58 12.17" fill="#fff200"/><path d="M100.9 65.68c.67 4.1-2.1 7.9-6.16 8.55-4.07.65-7.9-2.12-8.53-6.16-.66-4.08 2.1-7.9 6.18-8.55 4.06-.66 7.9 2.1 8.53 6.16m-.02 31.42c.7 4.06-2.1 7.88-6.16 8.52-4.07.67-7.88-2.1-8.53-6.16-.65-4.08 2.12-7.9 6.17-8.55 4.07-.65 7.9 2.12 8.54 6.2m24.24 26.55c.64 4.06-2.1 7.9-6.2 8.55-4.07.64-7.88-2.1-8.53-6.17-.66-4.08 2.1-7.9 6.17-8.55 4.07-.66 7.88 2.12 8.56 6.18m7.44-41.49a7.44 7.44 0 0 1-6.2 8.53c-4.05.68-7.86-2.1-8.53-6.17-.66-4.06 2.13-7.9 6.18-8.54 4.07-.66 7.9 2.1 8.55 6.18m40.35 60.48l-13.62-13.62 14.1-14.1H145.2l-9.76-9.78 9.5-9.5h28.75l-14.4-14.4 13.66-13.62L210.3 105l-37.35 37.66" fill="#45beed"/><g clip-path="url(#a)" transform="matrix(.52953 0 0 -.52953 -730.44 271.592)"><path d="M1413.8 344.72l-8.6-8.58c6.06-6.06 9.03-13.9 9.05-21.83-.02-7.93-3-15.75-9.02-21.78-6.06-6.05-13.9-9.02-21.82-9.04-7.94.02-15.77 3-21.83 9.05-6.04 6.04-9.02 13.87-9.03 21.8 0 7.94 3 15.76 9.03 21.8l.3.3-.3-.3c6.06 6.05 13.9 9.03 21.83 9.04 7.94 0 15.76-2.98 21.8-9.03l8.6 8.58 8.57 8.57a54.931 54.931 0 0 1-38.97 16.14 55.05 55.05 0 0 1-39-16.14l.33.32-.32-.32a55.021 55.021 0 0 1-16.13-38.97c0-14.06 5.4-28.24 16.14-38.97a55.078 55.078 0 0 1 39-16.15 55.17 55.17 0 0 1 39 16.15c10.72 10.72 16.13 24.9 16.12 38.96 0 14.07-5.4 28.26-16.15 39l.32-.32-.33.3-8.58-8.56" fill="#4abeea"/><path d="M1444.18 375.13l-8.58-8.58c14.45-14.46 21.62-33.28 21.63-52.22 0-18.93-7.2-37.76-21.63-52.2-14.44-14.44-33.28-21.62-52.22-21.64-18.93 0-37.75 7.17-52.2 21.62-14.45 14.45-21.6 33.26-21.63 52.18.02 18.94 7.2 37.77 21.65 52.22 14.46 14.45 33.28 21.63 52.22 21.65 18.92-.02 37.72-7.18 52.18-21.62l8.58 8.58 8.58 8.58c-19.13 19.14-44.3 28.75-69.34 28.74-25.08 0-50.26-9.62-69.38-28.76-19.14-19.12-28.77-44.3-28.76-69.38 0-25.05 9.6-50.22 28.74-69.35 19.13-19.13 44.3-28.74 69.36-28.73 25.08 0 50.26 9.6 69.38 28.73 19.13 19.13 28.76 44.3 28.74 69.38.02 25.07-9.6 50.25-28.74 69.38l-8.58-8.57" fill="#4abeea"/><path d="M1474.57 405.52l-8.58-8.58c22.84-22.85 34.2-52.66 34.22-82.6 0-29.93-11.4-59.77-34.23-82.6-22.85-22.84-52.68-34.22-82.62-34.23-29.92.02-59.74 11.38-82.6 34.23-22.83 22.84-34.2 52.64-34.2 82.56 0 29.94 11.4 59.77 34.23 82.63 22.85 22.83 52.68 34.2 82.62 34.22 29.92 0 59.73-11.37 82.57-34.2l8.57 8.57 8.58 8.58c-27.5 27.54-63.68 41.34-99.73 41.33-36.07 0-72.25-13.82-99.77-41.34-27.54-27.54-41.36-63.73-41.35-99.8 0-36.06 13.8-72.23 41.33-99.74 27.52-27.53 63.7-41.34 99.75-41.33 36.07 0 72.25 13.8 99.77 41.33 27.53 27.53 41.35 63.7 41.34 99.8 0 36.05-13.8 72.22-41.35 99.74l.45-.44-.45.44-8.58-8.58" fill="#4abeea"/><path d="M1395.06 317.23a15.44 15.44 0 0 0-12.83-17.75c-8.44-1.35-16.37 4.42-17.72 12.8-1.36 8.47 4.4 16.4 12.84 17.74 8.44 1.37 16.37-4.38 17.72-12.8" fill="#45beed"/></g></svg>

app/assets/scripts/views/app.js

@@ -2,6 +2,8 @@
 import React from 'react';
 import config from '../config';
 
+document.title += ` - ${config.title}`;
+
 var App = React.createClass({
   displayName: 'App',
 
@@ -27,7 +29,7 @@ var App = React.createClass({
           {this.props.children}
         </main>
         <footer className='site-footer' role='footer'>
-          <p> Made with love by <a href='https://developmentseed.org' title='Visit Development Seed website' target="_blank">Development Seed</a> using <a href={'https://opensensemap.org/explore/' + config.senseBox.id} title='Visit openSenseMap website' target="_blank">openSenseMap</a> data </p>
+          <p>by <a href='https://developmentseed.org' title='Visit Development Seed website' target="_blank">Development Seed</a> using <a href={'https://opensensemap.org/explore/' + config.senseBox.id} title='Visit openSenseMap website' target="_blank">openSenseMap</a> data.</p>
         </footer>
       </div>
     );

app/assets/scripts/views/home.js

@@ -150,8 +150,8 @@ var Home = React.createClass({
     let sensorTemperatureData = this.prepareData(this.props.sensorTemperature.data);
     let sensorHumidityData = this.prepareData(this.props.sensorHumidity.data);
     let sensorUvData = this.prepareData(this.props.sensorUv.data);
-    let sensorLuminosityData = this.prepareData(this.props.sensorLuminosity.data);
-    let sensorPressureData = this.prepareData(this.props.sensorPressure.data);
+    // let sensorLuminosityData = this.prepareData(this.props.sensorLuminosity.data);
+    // let sensorPressureData = this.prepareData(this.props.sensorPressure.data);
     let sensorPm10Data = this.prepareData(this.props.sensorPm10.data);
     let sensorPm25Data = this.prepareData(this.props.sensorPm25.data);
 
@@ -211,7 +211,7 @@ var Home = React.createClass({
                 unit=' μW/cm²'
               />
 
-              <SensorWidget
+              {/* <SensorWidget
                 className='card--lux'
                 fetching={this.props.sensorLuminosity.fetching}
                 fetched={this.props.sensorLuminosity.fetched}
@@ -237,7 +237,7 @@ var Home = React.createClass({
                 axisLineVal={1010}
                 axisLineMin={1000}
                 unit=' hPa'
-              />
+              /> */}
 
               <SensorWidget
                 className='card--pm'

app/assets/styles/_variables.scss

@@ -2,7 +2,7 @@
    Colors
    ========================================================================== */
 $base-color: #2c3e50;                   // Midnight blue
-$primary-color: #16a085;                // Belize Hole
+$primary-color: #31acaa;                // Belize Hole
 $secondary-color: #3498db;              // Purple
 // $tertiary-color: #ffffff;            // Undefined
 

app/index.html

@@ -4,44 +4,30 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="description" content="Devseed sense dashboards" />
+    <meta name="description" content="openSenseMap measurement dashboard" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
-    <title>Begga Weer</title>
-
-    <!-- Twitter -->
-    <!-- <meta name="twitter:card" content="summary" /> -->
-    <!-- <meta name="twitter:site" content="@developmentseed" /> -->
-    <!-- <meta name="twitter:title" content="Devseed Sense - Lisbon"> -->
-    <!-- <meta name="twitter:description" content="Devseed sense dashboards." /> -->
-    <!-- <meta name="twitter:image:src" content="assets/graphics/meta/default-meta-image.png" / -->
-    <!--/ Twitter -->
+    <title>openSenseMap dashboard</title>
 
     <!-- OG -->
-    <meta property="og:site_name" content="Devseed Sense - Lisbon" />
-    <meta property="og:title" content="Devseed Sense - Lisbon" />
+    <meta property="og:site_name" content="openSenseMap dashboard" />
+    <meta property="og:title" content="openSenseMap dashboard" />
     <meta property="og:url" content="" />
     <meta property="og:type" content="website" />
-    <meta property="og:description" content="Devseed sense dashboards." />
+    <meta property="og:description" content="latest sensor readings from openSenseMap.org" />
     <meta property="og:image" content="assets/graphics/meta/default-meta-image.png" />
     <!--/ OG -->
 
+    <link rel="manifest" href="manifest.json" />
     <link rel="shortcut icon" href="assets/graphics/meta/favicon.ico" type="image/x-icon" />
     <link rel="apple-touch-icon" href="assets/graphics/meta/apple-touch-icon.png" />
-    <link rel="apple-touch-icon" sizes="57x57" href="assets/graphics/meta/apple-touch-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="assets/graphics/meta/apple-touch-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="assets/graphics/meta/apple-touch-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="assets/graphics/meta/apple-touch-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="assets/graphics/meta/apple-touch-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="assets/graphics/meta/apple-touch-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="assets/graphics/meta/apple-touch-icon-152x152.png" />
 
     <!-- build:css assets/styles/main.css -->
     <link rel="stylesheet" href="assets/styles/main.css">
     <!-- endbuild -->
     <link rel="author" type="text/plain" href="humans.txt" />
 
-    <link href='https://fonts.googleapis.com/css?family=Exo+2:400,400italic,300italic,300,700,700italic' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Exo+2:400,400italic,300italic,300,700,700italic" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <!--[if lt IE 10]>

app/manifest.json

@@ -0,0 +1,16 @@
+{
+  "short_name": "openSenseMap dashboard",
+  "name": "openSenseMap dashboard",
+  "icons": [
+    {
+      "src":"assets/graphics/meta/apple-touch-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./?utm_source=homescreen",
+  "scoe": "./",
+  "background_color": "#ffffff",
+  "theme_color": "#4EAF47",
+  "display": "standalone"
+}