From 5a716f8338ecf57beab7e62cac9a23bd02444954 Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Mon, 16 Mar 2015 17:46:18 +0700
Subject: [PATCH] New time selector proto

---
 app/scripts/src/app.jsx                       |  7 +++----
 app/scripts/src/charts/bar_chart.jsx          |  2 +-
 app/scripts/src/charts/stacked_area_chart.jsx |  2 +-
 app/styles/app.css                            | 14 +++++++-------
 app/styles/charts.css                         | 15 ++++++++++++++-
 app/styles/menu.css                           |  7 +++++--
 6 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/app/scripts/src/app.jsx b/app/scripts/src/app.jsx
index c49f909..3686946 100644
--- a/app/scripts/src/app.jsx
+++ b/app/scripts/src/app.jsx
@@ -77,7 +77,6 @@ var App = React.createClass({
                     <Menu orgs={this.state.orgs} teams={this.state.teams} />
                     <Router.RouteHandler />
                 </div>
-                <WeekIntervalSelector />
             </div>
         );
     }
@@ -112,7 +111,7 @@ var Menu = React.createClass({
         return (
             <div className="menu">
                 <ul>
-                    <li key="empact">
+                    <li className="empact">
                         <Link to="org" params={this.getParams()} className="logo-button">
                             <div className="logo e">e</div>
                             <div className="logo m">m</div>
@@ -122,9 +121,9 @@ var Menu = React.createClass({
                             <div className="logo t">t</div>
                         </Link>
                     </li>
-                    <li key="orgs-header" className="nav header">Organizations:</li>
+                    <li className="nav header">Organizations:</li>
                     {this.props.orgs.map(renderOrg)}
-                    <li key="teams-header" className="nav header">Teams:</li>
+                    <li className="nav header">Teams:</li>
                     {this.props.teams.map(renderTeam)}
                 </ul>
             </div>
diff --git a/app/scripts/src/charts/bar_chart.jsx b/app/scripts/src/charts/bar_chart.jsx
index d41ab5c..da571d4 100644
--- a/app/scripts/src/charts/bar_chart.jsx
+++ b/app/scripts/src/charts/bar_chart.jsx
@@ -120,7 +120,7 @@ var BarChart = React.createClass({
         return (
             <div className="barchart-container">
                 <div className="whatsgoingon">
-                    This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em>W11, Mar 9</em> to <em>W18, Apr 27</em>
+                    This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em className="date">Mar 9</em> to <em className="date">Apr 27</em>
                 </div>
                 <div className="filters">
                     <Selector thing="sort"
diff --git a/app/scripts/src/charts/stacked_area_chart.jsx b/app/scripts/src/charts/stacked_area_chart.jsx
index 175f4f2..a53857a 100644
--- a/app/scripts/src/charts/stacked_area_chart.jsx
+++ b/app/scripts/src/charts/stacked_area_chart.jsx
@@ -196,7 +196,7 @@ var StackedAreaChart = React.createClass({
         return (
             <div className="sachart-container">
                 <div className="whatsgoingon">
-                    This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em>W11, Mar 9</em> to <em>W18, Apr 27</em>
+                    This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em className="date">Mar 9</em> to <em className="date">Apr 27</em>
                 </div>
                 <div className="filters">
                     <Selector thing="sort"
diff --git a/app/styles/app.css b/app/styles/app.css
index b6a1dc2..afb816e 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -21,13 +21,13 @@
 
 .info-block {
     width: 100%;
-    height: 50px;
+    height: 40px;
     margin-bottom: 20px;
 }
 .info-block .img {
     float: left;
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
     background-color: #ddd;
     background-position: center;
     background-size: 100% auto;
@@ -36,8 +36,8 @@
 }
 
 .info-block h1 {
-    font-size: 32px;
-    line-height: 50px;
+    font-size: 30px;
+    line-height: 40px;
     margin: 0;
     font-weight: 400;
 }
@@ -46,8 +46,8 @@
     position: absolute;
     top: 20px;
     right: 20px;
-    font-size: 32px;
-    line-height: 50px;
+    font-size: 30px;
+    line-height: 40px;
     color: #666;
 }
 .week-selector .week {
diff --git a/app/styles/charts.css b/app/styles/charts.css
index 74349db..cd86ca6 100644
--- a/app/styles/charts.css
+++ b/app/styles/charts.css
@@ -100,6 +100,19 @@
     font-style: normal;
     margin: 3px 0 0;
     padding: 3px 6px;
-    background-color: #eaeaea;
+    background-color: #f0f0f0;
     border-radius: 2px;
 }
+.whatsgoingon em.date {
+    background-color: #d0f0f0;
+}
+.whatsgoingon em.date:before {
+    content: '';
+    display: inline-block;
+    margin: 0 3px -1px 0;
+    width: 14px;
+    height: 14px;
+    background-size: 14px 14px;
+    /* Source: https://github.com/github/octicons/blob/master/svg/calendar.svg */
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik03MDQgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNTEyaC02NHYxMjhoNjRWNTEyek03MDQgMzIwaC02NHYxMjhoNjRWMzIwek04MzIgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNzA0aC02NHYxMjhoNjRWNzA0ek03NjggMGgtNjR2MTI4aDY0VjB6TTI1NiAwaC02NHYxMjhoNjRWMHpNODMyIDMyMGgtNjR2MTI4aDY0VjMyMHpNNTc2IDMyMGgtNjR2MTI4aDY0VjMyMHpNMzIwIDcwNGgtNjR2MTI4aDY0VjcwNHpNMTkyIDUxMmgtNjR2MTI4aDY0VjUxMnpNMzIwIDUxMmgtNjR2MTI4aDY0VjUxMnpNODMyIDY0djEyOEg2NDBWNjRIMzIwdjEyOEgxMjhWNjRIMHY4OTZoOTYwVjY0SDgzMnpNODk2IDg5Nkg2NFYyNTZoODMyVjg5NnpNMTkyIDcwNGgtNjR2MTI4aDY0VjcwNHpNNDQ4IDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDcwNGgtNjR2MTI4aDY0VjcwNHpNMzIwIDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDUxMmgtNjR2MTI4aDY0VjUxMnpNNzA0IDcwNGgtNjR2MTI4aDY0VjcwNHoiIC8+Cjwvc3ZnPg==");
+}
diff --git a/app/styles/menu.css b/app/styles/menu.css
index cdc2976..71d5f08 100644
--- a/app/styles/menu.css
+++ b/app/styles/menu.css
@@ -15,8 +15,10 @@
 .menu .nav {
     margin-bottom: 5px;
 }
-    .menu .nav.empact {
-        font-weight: 600;
+    .menu .empact {
+        height: 40px;
+        padding: 5px 0;
+        margin-bottom: 21px;
     }
     .menu .nav.header {
         color: #444;
@@ -24,6 +26,7 @@
         cursor: default;
         margin-top: 20px;
         margin-bottom: 10px;
+        line-height: 24px;
     }
     .menu .nav a {
         display: inline-block;