feat(dashboard-title): use styles instead of hardcoded value for dash…

…board header

src/browser/components/Dashboard.jsx

@@ -1,11 +1,29 @@
-var React          = require('react');
-var _              = require('lodash');
-var Reflux         = require('reflux');
-var Widget         = require('./Widget.jsx');
-var DashboardStore = require('./../stores/DashboardStore');
+import React, { PropTypes } from 'react';
+import _                    from 'lodash';
+import { ListenerMixin }    from 'reflux';
+import Widget               from './Widget.jsx';
+import DashboardStore       from './../stores/DashboardStore';
 
-var Dashboard = React.createClass({
-    mixins: [Reflux.ListenerMixin],
+
+const Dashboard = React.createClass({
+    displayName: 'Dashboard',
+
+    propTypes: {
+        dashboard: PropTypes.shape({
+            title:   PropTypes.string,
+            columns: PropTypes.number.isRequired,
+            rows:    PropTypes.number.isRequired,
+            widgets: PropTypes.arrayOf(PropTypes.shape({
+                type:    PropTypes.string.isRequired,
+                x:       PropTypes.number.isRequired,
+                y:       PropTypes.number.isRequired,
+                columns: PropTypes.number.isRequired,
+                rows:    PropTypes.number.isRequired
+            })).isRequired
+        }).isRequired
+    },
+
+    mixins:[ListenerMixin],
 
     getInitialState() {
         return {
@@ -18,57 +36,56 @@ var Dashboard = React.createClass({
     },
 
     onDashboardStoreUpdate(index) {
+        const { dashboard } = this.props;
+
         this.setState({
-            isCurrent: index === this.props.dashboard.index
+            isCurrent: index === dashboard.index
         });
     },
 
     render() {
-        var columns        = this.props.dashboard.columns;
-        var rows           = this.props.dashboard.rows;
-        var title          = this.props.dashboard.title || '';
-        var titleHeight    = 10;
-
-        var widgetNodes = _.map(this.props.dashboard.widgets, (widget, index) => {
-            var widgetHeight = widget.rows / rows * 100 + '%';
-            var widgetY = widget.y / rows * 100 + '%';
-            if (title) {
-              widgetHeight = 'calc(' + widgetHeight + ' - ' + (titleHeight / rows) + 'vmin)';
-              widgetY = 'calc(' + widgetY + ' + ' + (titleHeight / (widget.y === 0 ? 1 : rows)) + 'vmin)';
-            }
-
-            var props = _.extend({}, _.omit(widget, ['columns', 'rows']), {
-                key:  index,
+        const { dashboard: { columns, rows, widgets, title } } = this.props;
+        const { isCurrent }                                    = this.state;
+
+        const widgetNodes = widgets.map((widget, index) => {
+            const props = _.extend({}, _.omit(widget, ['columns', 'rows']), {
+                key:  `widget.${index}`,
                 type: widget.type,
-                w:    (widget.columns / columns * 100) + '%',
-                h:    widgetHeight,
-                x:    (widget.x       / columns * 100) + '%',
-                y:    widgetY
+                w:    `${ widget.columns / columns * 100 }%`,
+                h:    `${ widget.rows    / rows    * 100 }%`,
+                x:    `${ widget.x       / columns * 100 }%`,
+                y:    `${ widget.y       / rows    * 100 }%`
             });
 
             return React.createElement(Widget, props);
         });
 
-        var cssClasses = 'dashboard__sheet';
-        if (this.state.isCurrent) {
+        let cssClasses     = 'dashboard__sheet';
+        let bodyCssClasses = 'dashboard__body';
+        if (isCurrent) {
             cssClasses += ' _is-current';
         }
 
-        var titleNode = null;
-
+        let titleNode = null;
         if (title) {
-          titleNode = (
-            <div className="dashboard__title">{title}</div>
-          );
+            bodyCssClasses += ' dashboard__body--with-header';
+            titleNode = (
+                <div className="dashboard__title">
+                    {title}
+                </div>
+            );
         }
 
         return (
             <div className={cssClasses}>
                 {titleNode}
-                {widgetNodes}
+                <div className={bodyCssClasses}>
+                    {widgetNodes}
+                </div>
             </div>
         );
     }
 });
 
-module.exports = Dashboard;
+
+export default Dashboard;

src/styl/__vars.styl

@@ -1,14 +1,16 @@
 // GENERIC
 $main-bg-color                  = #fff
 $main-txt-color                 = #555
-$main-title-color               = #fafafa
-$main-title-font                = normal normal 400 unquote("4vmin/8vmin") "Open sans", sans-serif
-$main-margin                    = 4vmin
+$main-margin                    = 1vmin
 $main-font                      = normal normal 400 unquote("2.4vmin/3.6vmin") "Open sans", sans-serif
 
+// DASHBOARD
+$dashboard-header-height        = 8vmin
+$dashboard-header-txt-color     = #eee
+$dashboard-header-font          = normal normal 400 unquote("4vmin/8vmin") "Open sans", sans-serif
 
 // WIDGET
-$widget-spacing                 = 2vmin
+$widget-spacing                 = 1.6vmin
 $widget-bg-color                = #fff
 $widget-shadow                  = none
 $widget-border                  = none

src/styl/_main.styl

@@ -1,61 +1,32 @@
 html, body
   font $main-font
-
   background $main-bg-color
   color      $main-txt-color
-
+  margin 0
   height 100%
   width  100%
-
   overflow hidden
 
 *, *:before, *:after
   box-sizing border-box
 
-#hotboard {
-  position: absolute;
-
-  top:    ($main-margin - $widget-spacing / 2);
-  right:  ($main-margin - $widget-spacing / 2);
-  bottom: ($main-margin - $widget-spacing / 2);
-  left:   ($main-margin - $widget-spacing / 2);
-}
-
-.histogram {
-  &__axis {
-    &__legend {
-      font-size: 14px;
-      fill: $chart-axis-txt-color;
-    }
-  }
-}
+.histogram
+  &__axis
+    &__legend
+      font-size 14px
+      fill $chart-axis-txt-color
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Montserrat", sans-serif;
-  text-transform: uppercase;
-  font-weight: 400;
-}
+h1, h2, h3, h4, h5, h6
+  font-family "Montserrat", sans-serif
+  text-transform uppercase
+  font-weight 400
 
-.txt--success {
-  color $success-color;
-}
+.txt--success
+  color $success-color
 
-.prop {
-  &__key {
-    color: $prop-key-txt-color;
-  }
-  &__value {
-    color: $prop-value-txt-color;
-  }
-}
+.prop
+  &__key
+    color $prop-key-txt-color
 
-.dashboard__title {
-  color: $main-title-color;
-  font: $main-title-font;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 1vmin 3vmin;
-  height: 10vmin;
-}
+  &__value
+    color $prop-value-txt-color

src/styl/components/_dashboard.styl

@@ -2,52 +2,54 @@
   height 100%
   width  100%
 
+  &__title
+    position absolute
+    top   ($widget-spacing / 2)
+    right ($widget-spacing / 2)
+    left  ($widget-spacing / 2)
+    height $dashboard-header-height
+    color $dashboard-header-txt-color
+    font  $dashboard-header-font
+    padding 0 3vmin
+
+  &__body
+    position absolute
+    width 100%
+    top    0
+    bottom 0
+    left   0
+
+    &--with-header
+      top $dashboard-header-height + $widget-spacing
+
   &__wrapper
     height 100%
     width  100%
 
   &__timeline
     width  100%
     height 4px
-
     position absolute
-
     top -8px
     left 0
-
     padding 0 $widget-spacing / 2
 
     &__progress
       height 100%
       width  100%
-
       background-color: #e0c671
 
-
   &__sheet
-    height 100%
-    width  100%
-
     position absolute
-
-    top  0
-    left 0
-
+    top    $main-margin
+    right  $main-margin
+    bottom $main-margin
+    left   $main-margin
     opacity 0
-
     padding 20px
-
     transition(all 800ms)
-
-    //transform: scale(0.8);
-
     z-index 1
 
     &._is-current
-      left 0
-
       z-index 2
-
       opacity 1
-
-      //transform: scale(1);

src/themes/bordeau/_dashboard.styl

@@ -0,0 +1,7 @@
+.dashboard__title
+  text-transform uppercase
+  background $widget-bg-color
+  border-radius $widget-header-border-radius
+  padding 0 2vmin
+  box-shadow $widget-header-shadow,
+             $widget-shadow

src/themes/bordeau/_list.styl

@@ -1,12 +1,8 @@
-.list__item {
-  &__time {
-    font-style italic;
-    color hsl(0, 52%, 60%);
-  }
+.list__item
+  &__time
+    font-style italic
+    color hsl(0, 52%, 60%)
 
-  &--with-status {
-    &:before {
-      box-shadow 0 1px 1px $main-bg-color;
-    }
-  }
-}
+  &--with-status
+    &:before
+      box-shadow 0 1px 1px $main-bg-color

src/themes/bordeau/_vars.styl

@@ -3,12 +3,16 @@
 // GENERIC
 $main-bg-color                  = rgb(40, 18, 18)
 $main-txt-color                 = hsl(6, 26%, 67%)
-$main-margin                    = 6vmin
+$main-margin                    = 4vmin
 $main-font                      = normal normal 400 unquote("2vmin/3vmin") "Open sans", sans-serif
 
+// DASHBOARD
+$dashboard-header-height        = 6vmin
+$dashboard-header-txt-color     = hsl(0, 52%, 60%)
+$dashboard-header-font          = normal normal 300 unquote("2.6vmin/6vmin") "Roboto Slab", sans-serif
 
 // WIDGET
-$widget-spacing                 = 2px
+$widget-spacing                 = 0.4vmin
 $widget-bg-color                = rgb(69, 23, 23)
 $widget-border-radius           = 0
 

src/themes/bordeau/_widget.styl

@@ -1,12 +1,8 @@
-.widget {
-  &__header {
-    &__count {
-      font-weight 300;
-    }
+.widget
+  &__header
+    &__count
+      font-weight 300
 
-    &__subject {
-      color #fff;
-      font-weight 300;
-    }
-  }
-}
+    &__subject
+      color #fff
+      font-weight 300

src/themes/bordeau/index.styl

@@ -1,3 +1,4 @@
-@require '_widget.styl';
-@require '_list.styl';
-@require 'time/_clock.styl';
+@require '_dashboard'
+@require '_widget'
+@require '_list'
+@require 'time/_clock'

src/themes/light-grey/_dashboard.styl

@@ -0,0 +1,3 @@
+.dashboard__title
+  text-align center
+  text-transform uppercase

src/themes/light-grey/_vars.styl

@@ -4,6 +4,10 @@
 $main-bg-color                  = #eee
 $main-txt-color                 = #555
 
+// DASHBOARD
+$dashboard-header-height        = 6vmin
+$dashboard-header-txt-color     = #333
+$dashboard-header-font          = normal normal 300 unquote("4vmin/6vmin") "Lato", sans-serif
 
 // WIDGET
 $widget-spacing                 = 1.6vmin