From 8e96d3834d2aad416a84ba5dfb788d84894a5eef Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Thu, 19 Mar 2015 16:26:27 +0700
Subject: [PATCH] Grid fix

---
 app/css/charts.css                        | 24 ++++++++++++++++++-----
 app/css/menu.css                          |  2 +-
 app/jsx/app/dashboard.jsx                 |  1 +
 app/jsx/charts/bc/bar_chart.jsx           |  2 +-
 app/jsx/charts/sac/stacked_area_chart.jsx |  2 +-
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/css/charts.css b/app/css/charts.css
index 3a6a43c..b065d88 100644
--- a/app/css/charts.css
+++ b/app/css/charts.css
@@ -49,7 +49,7 @@
     content: '';
     width: 16px;
     height: 16px;
-    margin: 1px 5px 0 0;
+    margin: 2px 5px 0 0;
     border-radius: 8px;
 }
 .sac .legend li {
@@ -133,18 +133,21 @@
 
 .whatsgoingon {
     color: #444;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     line-height: 24px;
     min-height: 72px; /* 3*line-height */
 }
+.whatsgoingon span {
+    line-height: 24px;
+}
 
 .whatsgoingon em {
     display: inline-block;
     line-height: 16px;
     color: #000;
     font-style: normal;
-    margin: 3px 0 0;
-    padding: 3px 6px;
+    margin: 4px 0;
+    padding: 0px 3px;
     background-color: #f0f0f0;
     border-radius: 2px;
 }
@@ -177,11 +180,13 @@
 }
 
 .week-selector .selector em {
+    display: inline-block;
+    padding: 3px;
     width: 100%;
 }
 .week-selector .selector select {
     position: absolute;
-    top: 5px;
+    top: 4px;
     left: 5%;
     width: 90%;
     margin: 0;
@@ -214,3 +219,12 @@
 .sac .dot text {
     text-anchor: middle;
 }
+hr {
+    margin: 20px 20px 30px 0;
+    height: 1px;
+    color: #aaa;
+    background-color: #ccc;
+    border: 0 none;
+    clear: both;
+}
+
diff --git a/app/css/menu.css b/app/css/menu.css
index 71d5f08..b4e7a93 100644
--- a/app/css/menu.css
+++ b/app/css/menu.css
@@ -18,7 +18,7 @@
     .menu .empact {
         height: 40px;
         padding: 5px 0;
-        margin-bottom: 21px;
+        margin-bottom: 20px;
     }
     .menu .nav.header {
         color: #444;
diff --git a/app/jsx/app/dashboard.jsx b/app/jsx/app/dashboard.jsx
index 2f2fcc1..aaa45bd 100644
--- a/app/jsx/app/dashboard.jsx
+++ b/app/jsx/app/dashboard.jsx
@@ -43,6 +43,7 @@ var Dashboard = React.createClass({
             <div className="content">
                 <InfoBlock image={infoImage} className={infoImageClass} title={infoTitle} />
                 <StackedAreaChart api={sacApi} params={this.getParams()} items={sacItems} />
+                <hr />
                 <BarChart api={bcApi} params={this.getParams()} items={bcItems} />
             </div>
         );
diff --git a/app/jsx/charts/bc/bar_chart.jsx b/app/jsx/charts/bc/bar_chart.jsx
index fdce7a7..c03e58f 100644
--- a/app/jsx/charts/bc/bar_chart.jsx
+++ b/app/jsx/charts/bc/bar_chart.jsx
@@ -143,7 +143,7 @@ var BarChart = React.createClass({
         return (
             <div className="barchart-container">
                 <div className="whatsgoingon">
-                    This bar chart shows <em>{words.values[this.state.sort]}</em> {words.actions[this.state.item +'-'+ this.state.sort]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]} <WeekIntervalSelector />
+                    This bar chart shows <em>{words.values[this.state.sort]}</em> {words.actions[this.state.item +'-'+ this.state.sort]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]}<br /><WeekIntervalSelector />
                 </div>
                 <div className="filters">
                     <Selector thing="sort"
diff --git a/app/jsx/charts/sac/stacked_area_chart.jsx b/app/jsx/charts/sac/stacked_area_chart.jsx
index 0386d05..3cfa122 100644
--- a/app/jsx/charts/sac/stacked_area_chart.jsx
+++ b/app/jsx/charts/sac/stacked_area_chart.jsx
@@ -300,7 +300,7 @@ var StackedAreaChart = React.createClass({
         return (
             <div ref="container" className="sac">
                 <div className="whatsgoingon">
-                    This stacked area chart shows <em>the number of commits</em> {words.actions[this.state.item]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]} <WeekIntervalSelector />
+                    This stacked area chart shows <em>the number of commits</em> {words.actions[this.state.item]} <em>{words.items[this.state.item]}</em> {words.whatHappened[this.state.item +'-'+ target]} <em>{subject}</em> {words.targetSuffix[target]}<br /><WeekIntervalSelector />
                 </div>
                 <div className="filters">
                     <Selector thing="sort"