growbot-web 0.0.1

data/lib/growbot/web/views/sass/neat/grid/_row.scss

@@ -0,0 +1,17 @@
+@mixin row($display: block, $direction: $default-layout-direction) {
+  @include clearfix;
+  $layout-direction: $direction !global;
+
+  @if $display == table {
+    display: table;
+    @include fill-parent;
+    table-layout: fixed;
+    $container-display-table: true !global;
+  }
+
+  @else {
+    display: block;
+    $container-display-table: false !global;
+  }
+}
+

data/lib/growbot/web/views/sass/neat/grid/_shift.scss

@@ -0,0 +1,16 @@
+@mixin shift($n-columns: 1) {
+  @include shift-in-context($n-columns);
+}
+
+@mixin shift-in-context($shift: $columns of $container-columns) {
+  $n-columns: nth($shift, 1);
+  $parent-columns: container-shift($shift) !global;
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+
+  // Reset nesting context
+  $parent-columns: $grid-columns !global;
+}

data/lib/growbot/web/views/sass/neat/grid/_span-columns.scss

@@ -0,0 +1,43 @@
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
+
+  // Set nesting context (used by shift())
+  $parent-columns: get-parent-columns($container-columns) !global;
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  $display-table: is-display-table($container-display-table, $display);
+
+  @if $display-table  {
+    display: table-cell;
+    width: percentage($columns / $container-columns);
+  } @else {
+    float: #{$opposite-direction};
+
+    @if $display != no-display {
+      display: block;
+    }
+
+    @if $display == collapse {
+      @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead."
+    }
+
+    @if $display == collapse or $display == block-collapse {
+      width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+      &:last-child {
+        width: flex-grid($columns, $container-columns);
+      }
+
+    } @else {
+      margin-#{$direction}: flex-gutter($container-columns);
+      width: flex-grid($columns, $container-columns);
+
+      &:last-child {
+        margin-#{$direction}: 0;
+      }
+    }
+  }
+}

data/lib/growbot/web/views/sass/neat/grid/_to-deprecate.scss

@@ -0,0 +1,57 @@
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+  @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}
+
+@mixin nth-omega($nth, $display: block, $direction: default) {
+  @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
+  @include omega($nth $display, $direction);
+}

data/lib/growbot/web/views/sass/neat/grid/_visual-grid.scss

@@ -0,0 +1,41 @@
+@mixin grid-column-gradient($values...) {
+  background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
+  background-image:  -webkit-linear-gradient(left, $values);
+  background-image:     -moz-linear-gradient(left, $values);
+  background-image:      -ms-linear-gradient(left, $values);
+  background-image:       -o-linear-gradient(left, $values);
+  background-image: unquote("linear-gradient(left, #{$values})");
+}
+
+@if $visual-grid == true or $visual-grid == yes {
+  body:before {
+    content: '';
+    display: inline-block;
+    @include grid-column-gradient(gradient-stops($grid-columns));
+    height: 100%;
+    left: 0;
+    margin: 0 auto;
+    max-width: $max-width;
+    opacity: $visual-grid-opacity;
+    position: fixed;
+    right: 0;
+    width: 100%;
+    pointer-events: none;
+
+    @if $visual-grid-index == back {
+      z-index: -1;
+    }
+
+    @else if $visual-grid-index == front {
+      z-index: 9999;
+    }
+
+    @each $breakpoint in $visual-grid-breakpoints {
+      @if $breakpoint != nil {
+        @include media($breakpoint) {
+          @include grid-column-gradient(gradient-stops($grid-columns));
+        }
+      }
+    }
+  }
+}

data/lib/growbot/web/views/sass/neat/settings/_grid.scss

@@ -0,0 +1,7 @@
+$column: golden-ratio(1em, 3) !default; // Column width
+$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
+$grid-columns: 12 !default; // Total number of columns in the grid
+$max-width: em(1088) !default; // Max-width of the outer container
+$border-box-sizing: true !default; // Makes all elements have a border-box layout
+$default-feature: min-width; // Default @media feature for the breakpoint() mixin
+$default-layout-direction: LTR !default;

data/lib/growbot/web/views/sass/neat/settings/_visual-grid.scss

@@ -0,0 +1,5 @@
+$visual-grid: false !default; // Display the base grid
+$visual-grid-color: #EEE !default;
+$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
+$visual-grid-opacity: 0.4 !default;
+$visual-grid-breakpoints: () !default;

data/lib/growbot/web/views/sass/refills/_navigation.scss

@@ -0,0 +1,190 @@
+header.navigation {
+  $navigation-background: $dark-gray;
+  $navigation-color: transparentize(white, 0.3);
+  $navigation-color-hover: white;
+  $navigation-height: 60px;
+  $navigation-nav-button-background: $base-accent-color;
+  $navigation-nav-button-background-hover: lighten($navigation-background, 10);
+  $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
+  $navigation-search-background: lighten($navigation-background, 5);
+  $navigation-search-border: 1px solid darken($navigation-background, 5);
+
+  background-color: $navigation-background;
+  border-bottom: 1px solid darken($navigation-background, 10);
+  font-family: $sans-serif;
+  height: $navigation-height;
+  width: 100%;
+  z-index: 999;
+
+  .menu-wrapper {
+    @include outer-container;
+    position: relative;
+    z-index: 9999;
+  }
+
+  .logo {
+    float: left;
+    max-height: $navigation-height;
+    padding-right: 2em;
+    color: white;
+    font-weight: bold;
+    font-size: 1.5em;
+    line-height: $navigation-height;
+
+
+    img {
+      max-height: $navigation-height;
+      padding: .8em 0;
+    }
+  }
+
+  .navigation-menu-button {
+    color: $navigation-color;
+    cursor: pointer;
+    display: block;
+    float: right;
+    font-family: $sans-serif;
+    font-weight: 700;
+    line-height: $navigation-height;
+    margin: 0;
+    padding-right: 1em;
+    text-transform: uppercase;
+
+    @include media ($large-screen) {
+      display: none;
+    }
+
+    &:hover {
+      color: $navigation-color-hover;
+    }
+  }
+
+  .nav {
+    @include media ($large-screen) {
+      float: left;
+    }
+  }
+
+  ul#navigation-menu {
+    clear: both;
+    -webkit-transform-style: preserve-3d;
+// stop webkit flicker
+    display: none;
+    margin: 0 auto;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+    z-index: 9999;
+
+    @include media ($large-screen) {
+      display: inline;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  ul li {
+    background: $navigation-background;
+    display: block;
+    line-height: $navigation-height;
+    overflow: hidden;
+    padding-right: .8em;
+    text-align: right;
+    width: 100%;
+    z-index: 9999;
+
+    @include media ($large-screen) {
+      background: transparent;
+      display: inline;
+      line-height: $navigation-height;
+      padding-right: 2em;
+      text-decoration: none;
+      width: auto;
+    }
+
+    a {
+      font-weight: 400;
+      color: $navigation-color;
+
+      &:hover {
+        color: $navigation-color-hover;
+      }
+    }
+  }
+
+  .sign-up, .take-reading {
+    @include media ($large-screen) {
+      @include position(absolute, 0px 0px 0 0);
+      padding-right: 1em;
+
+      a {
+        @include transition (all 0.2s ease-in-out);
+        background: $navigation-nav-button-background;
+        border-radius: $base-border-radius;
+        color: white;
+        font-size: .8em;
+        font-weight: 800;
+        padding: .6em 1em;
+        text-transform: uppercase;
+
+        &:hover {
+          background: lighten($navigation-nav-button-background, 10);
+        }
+      }
+    }
+  }
+
+  li.navigation-search-bar {
+    display: none;
+
+    @include media($large-screen) {
+      @include position(absolute, 0px 76px 0 0);
+      display: inline-block;
+      line-height: 0 !important;
+      padding: 13px 30px;
+// this to get around Firefox/Opera line-height "bug"
+    }
+  }
+
+  .search-bar {
+    $search-bar-border-color: $base-border-color;
+    $search-bar-border: 1px solid $search-bar-border-color;
+    $search-bar-background: lighten($search-bar-border-color, 10);
+
+    width: 19em;
+    position: relative;
+    display: inline-block;
+
+    input {
+      @include box-sizing(border-box);
+      display: block;
+    }
+
+    .search-and-submit {
+      position: relative;
+
+      input[type=search] {
+        background: $navigation-search-background;
+        border: $navigation-search-border;
+        padding: .6em .8em;
+        font-size: .9em;
+        font-style: italic;
+        color: $navigation-color;
+        border-radius: $base-border-radius * 2;
+        margin: 0;
+      }
+
+      button[type=submit] {
+        @include button(simple, lighten($navigation-search-background, 10));
+        @include position(absolute, 0.3em 0.3em 0.3em 0);
+        outline: none;
+        padding: 5px 15px;
+
+        img {
+          height: 12px;
+          opacity: .7;
+        }
+      }
+    }
+  }
+}

data/lib/growbot/web/views/sass/refills/_refills.scss

@@ -0,0 +1 @@
+@import 'navigation';

data/lib/growbot/web/views/sass/widgets/_big-number.scss

@@ -0,0 +1,21 @@
+.widget.big-number {
+  $stats-color: $base-accent-color;
+
+  border: 2px solid $medium-gray;
+  background: $dark-gray;
+  border-radius: 1em;
+  padding: 0.8em 0;
+
+
+  text-align: center;
+  .number {
+    font-size: 3.5em;
+    font-weight: 800;
+    line-height: 0.8em;
+    color: $stats-color;
+  }
+  .label {
+    font-size: 0.7em;
+    color: $light-gray;
+  }
+}

data/lib/growbot/web/views/sass/widgets/_widgets.scss

@@ -0,0 +1 @@
+@import 'big-number';

data/public/javascripts/app.js

@@ -0,0 +1,150 @@
+(function() {
+  var displayError, drawAverages, drawLine, getContainerWidth, menu, menuToggle;
+
+  menu = $('#navigation-menu');
+
+  menuToggle = $('#js-mobile-menu');
+
+  alert('Hello');
+
+  menuToggle.on('click', function(e) {
+    e.preventDefault();
+    return menu.slideToggle(function() {
+      if (menu.is(':hidden')) {
+        return menu.removeAttr('style');
+      }
+    });
+  });
+
+  displayError = function() {
+    var error, text;
+    error = document.createElement('div');
+    error.classList.add('error');
+    text = document.createElement('span');
+    text.innerText = 'An error has occurred. Please try again later.';
+    error.appendChild(text);
+    return document.querySelector('.message-center').appendChild(error);
+  };
+
+  drawAverages = function(rawData) {
+    var averageLevels, data, hourAgo, totalLevels;
+    hourAgo = new Date();
+    hourAgo.setHours(hourAgo.getHours() - 1);
+    data = rawData.filter(function(d) {
+      return d.time >= hourAgo;
+    });
+    if (!data.length) {
+      return;
+    }
+    totalLevels = data.reduce((function(p, c) {
+      p.moisture += c.moisture;
+      p.light += c.light;
+      return p;
+    }), {
+      moisture: 0,
+      light: 0
+    });
+    averageLevels = {
+      moisture: Math.floor(totalLevels.moisture / data.length),
+      light: Math.floor(totalLevels.light / data.length)
+    };
+    d3.select('#moistureWidget .number').text(averageLevels.moisture);
+    return d3.select('#lightWidget .number').text(averageLevels.light);
+  };
+
+  getContainerWidth = function(container) {
+    return $(container).innerWidth();
+  };
+
+  drawLine = function(data, container, xKey, yKey, scales) {
+    var chart, h, line, m, w, width, xAxis, yAxis;
+    if (xKey == null) {
+      xKey = 'x';
+    }
+    if (yKey == null) {
+      yKey = 'y';
+    }
+    width = getContainerWidth(container);
+    m = [15, 80, 15, 80];
+    w = width - m[1] - m[3];
+    h = 400 - m[0] - m[2];
+    chart = d3.select(container).append('svg').attr('width', w + m[1] + m[3]).attr('height', h + m[0] + m[1]).append('g').attr('transform', "translate(" + m[3] + ", " + m[0] + ")");
+    scales.x.range([0, w]);
+    scales.y.range([0, h]);
+    xAxis = d3.svg.axis().scale(scales.x);
+    yAxis = d3.svg.axis().scale(scales.y).orient('left');
+    chart.append('g').attr('class', 'x axis').attr('transform', "translate(0, " + h + ")").call(xAxis);
+    chart.append('g').attr('class', 'y axis').attr('transform', "translate(0, 0)").call(yAxis);
+    line = d3.svg.line().x(function(d) {
+      return scales.x(d[xKey]);
+    }).y(function(d) {
+      return scales.y(d[yKey]);
+    });
+    return chart.append('path').attr('d', line(data));
+  };
+
+  d3.json('/data.json').get(function(error, data) {
+    var chart, colorScale, h, lightLine, m, max, min, moistureLine, scales, w, width, xAxis, yAxis;
+    data = data.map(function(d) {
+      d.time = new Date(d.time);
+      d.x = d.time;
+      return d;
+    });
+    min = {
+      time: d3.min(data, function(d) {
+        return d.time;
+      }),
+      light: d3.min(data, function(d) {
+        return d.light;
+      }),
+      moisture: d3.min(data, function(d) {
+        return d.moisture;
+      })
+    };
+    max = {
+      time: d3.max(data, function(d) {
+        return d.time;
+      }),
+      light: d3.max(data, function(d) {
+        return d.light;
+      }),
+      moisture: d3.max(data, function(d) {
+        return d.moisture;
+      })
+    };
+    drawAverages(data);
+    width = getContainerWidth('#lineChart');
+    m = [15, 80, 15, 80];
+    w = width - m[1] - m[3];
+    h = 300 - m[0] - m[2];
+    scales = {
+      x: d3.time.scale().domain([min.time, max.time]).range([0, w]),
+      y: d3.scale.linear().range([0, h])
+    };
+    if (max.light > max.moisture) {
+      scales.y.domain([max.light, 0]);
+    } else {
+      scales.y.domain([max.moisture, 0]);
+    }
+    chart = d3.select('#lineChart').append('svg').attr('width', w + m[1] + m[3]).attr('height', h + m[0] + m[1]).append('g').attr('transform', "translate(" + m[3] + ", " + m[0] + ")");
+    xAxis = d3.svg.axis().scale(scales.x);
+    yAxis = d3.svg.axis().scale(scales.y).orient('left');
+    chart.append('g').attr('class', 'x axis').attr('transform', "translate(0, " + h + ")").call(xAxis);
+    chart.append('g').attr('class', 'y axis').attr('transform', 'translate(0, 0)').call(yAxis);
+    moistureLine = d3.svg.line().x(function(d) {
+      return scales.x(d.time);
+    }).y(function(d) {
+      return scales.y(d.moisture);
+    });
+    lightLine = d3.svg.line().x(function(d) {
+      return scales.x(d.time);
+    }).y(function(d) {
+      return scales.y(d.light);
+    });
+    colorScale = d3.scale.category10();
+    console.log(colorScale);
+    chart.append('path').attr('d', moistureLine(data)).style('stroke', colorScale(0));
+    return chart.append('path').attr('d', lightLine(data)).style('stroke', colorScale(1));
+  });
+
+}).call(this);