Updates

Author: Daniel Wheeler

README.md

@@ -0,0 +1,16 @@
+(function(angular) {
+
+  'use strict';
+
+  angular.module('app', [
+    'd3',
+    'oilPricesService',
+    'routes',
+    'lineChart',
+    'filters',
+    'navigation',
+    'content',
+    'footer'
+  ]);
+
+})(window.angular);

app/app.module.js

@@ -0,0 +1,22 @@
+(function(angular) {
+
+  'use strict';
+
+  angular.module('routes', [
+    'ngComponentRouter'
+  ])
+
+  .value('$routerRootComponent', 'app')
+
+  .directive('app', [function() {
+    return {
+      restrict: 'EA',
+      template: [
+        '<navigation></navigation>',
+        '<content><ng-outlet></ng-outlet></content>',
+        '<footer></footer>'
+      ].join('')
+    };
+  }]);
+
+})(window.angular);

app/app.routes.js

@@ -177,51 +177,133 @@ html {
 *, *::after, *::before {
   box-sizing: inherit; }
 
-.Page {
+.Content {
+  padding-top: 2rem;
+  padding-bottom: 5rem; }
+
+.Content {
+  padding-top: 2rem;
+  padding-bottom: 5rem; }
+
+.Navigation {
+  border-top-color: #8e44ad;
+  border-top-style: solid;
+  border-top-width: 6px;
+  background-color: #333; }
+  .Navigation-list {
+    max-width: 68em;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+    list-style-type: none;
+    overflow: hidden; }
+    .Navigation-list::after {
+      clear: both;
+      content: "";
+      display: table; }
+  .Navigation-listItem {
+    background-color: #333;
+    float: left; }
+    .Navigation-listItem a {
+      padding: 20px 22px;
+      display: block;
+      color: #fff;
+      text-align: center;
+      text-decoration: none;
+      text-transform: uppercase;
+      font-weight: 700;
+      font-size: .85rem;
+      letter-spacing: 1px; }
+    .Navigation-listItem:hover {
+      background-color: #222; }
+    .Navigation-listItem .is-active {
+      background-color: #2ecc71; }
+
+.Footer {
+  border-top-color: #ddd;
+  border-top-style: solid;
+  border-top-width: 1px;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-align: center; }
+  .Footer-content {
+    color: #999;
+    font-size: 14px;
+    line-height: 150%; }
+
+.Chart {
   max-width: 68em;
   margin-left: auto;
   margin-right: auto; }
-  .Page::after {
+  .Chart::after {
     clear: both;
     content: "";
     display: table; }
-
-.Filters {
-  padding: 1.5rem; }
-
-.rzslider .rz-pointer {
+  .Chart-filters {
+    border-color: #ddd;
+    border-style: solid;
+    border-width: 1px;
+    padding: 1.25rem;
+    background-color: #fff;
+    margin-bottom: 1rem; }
+  .Chart-display {
+    border-color: #ddd;
+    border-style: solid;
+    border-width: 1px;
+    padding: 1.25rem;
+    background-color: #fff; }
+
+.Filters .rzslider .rz-pointer {
+  top: -10px;
+  height: 24px;
+  width: 24px;
   background: #8e44ad; }
-  .rzslider .rz-pointer.rz-active:after {
+  .Filters .rzslider .rz-pointer:after {
+    top: 8px;
+    left: 8px; }
+  .Filters .rzslider .rz-pointer.rz-active:after {
     background: #2ecc71; }
 
-.rzslider .rz-bar.rz-selection {
+.Filters .rzslider .rz-bar.rz-selection {
   background: #8e44ad; }
 
-.rzslider .rz-ticks .rz-tick.rz-selected {
+.Filters .rzslider .rz-ticks .rz-tick.rz-selected {
   background: #8e44ad; }
 
-.rzslider .rz-ticks .rz-tick .rz-tick-value {
+.Filters .rzslider .rz-ticks .rz-tick .rz-tick-value {
   color: #999;
+  font-size: 14px;
   font-weight: 700;
   top: -38px; }
 
 body {
-  max-width: 68em;
-  margin-left: auto;
-  margin-right: auto;
-  background: #f5f5f5; }
-  body::after {
-    clear: both;
-    content: "";
-    display: table; }
-
-.Data {
-  border-left-color: #553982;
-  border-left-width: 6px;
-  border-left-style: solid;
-  -webkit-transition: all 0.25s ease-in-out;
-  -moz-transition: all 0.25s ease-in-out;
-  transition: all 0.25s ease-in-out;
-  margin-bottom: 1rem;
-  padding: 1rem;
-  background-color: #fff; }
+  margin: 0;
+  padding: 0;
+  background: #ecf0f1; }
+
+/* D3 styles below */
+path {
+  stroke: #3498db;
+  stroke-width: 1;
+  fill: none; }
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #ddd;
+  stroke-width: 1; }
+
+.axis text {
+  font-size: 13px;
+  font-color: #ddd; }
+
+div.tooltip {
+  position: absolute;
+  text-align: center;
+  width: 60px;
+  height: 28px;
+  padding: 2px;
+  font: 12px sans-serif;
+  background: lightsteelblue;
+  border: 0px;
+  border-radius: 8px; }

app/stylesheets/main.css app/assets/css/main.cssapp/stylesheets/main.css renamed to app/assets/css/main.css

@@ -0,0 +1,51 @@
+@import 'vendor/bourbon/bourbon';
+@import 'vendor/base/base';
+@import 'vendor/neat/neat';
+@import 'mixins/display_panel';
+@import 'components/content';
+
+@import 'app/shared/content/content';
+@import 'app/shared/navigation/navigation';
+@import 'app/shared/footer/footer';
+
+@import 'app/components/chart/chart';
+@import 'app/components/filter/filter';
+
+body {
+  $background-color: #ecf0f1;
+  @include margin(0);
+  @include padding(0);
+  background: $background-color;
+}
+
+/* D3 styles below */
+
+path {
+  stroke: #3498db;
+  stroke-width: 1;
+  fill: none;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #ddd;
+  stroke-width: 1;
+}
+
+.axis text {
+  font-size: 13px;
+  font-color: #ddd;
+}
+
+div.tooltip {
+  position: absolute;
+  text-align: center;
+  width: 60px;
+  height: 28px;
+  padding: 2px;
+  font: 12px sans-serif;
+  background: lightsteelblue;
+  border: 0px;
+  border-radius: 8px;
+}

app/assets/css/main.scss

@@ -0,0 +1,10 @@
+@mixin displayPanel {
+  $background-color: #fff;
+  $border-color: #ddd;
+  @include border-color($border-color);
+  @include border-style(solid);
+  @include border-width(1px);
+  @include padding(1.25rem);
+  background-color: $background-color;
+  @content;
+}