Rebuilt selectors

app/scripts/src/charts/bar_chart.jsx

@@ -123,14 +123,16 @@ var BarChart = React.createClass({
                     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>
                 </div>
                 <div className="filters">
-                    <Selector thing="item"
-                        items={this.props.items}
-                        value={this.state.item}
-                        onChange={this.handleFilter.bind(this, 'item')} />
                     <Selector thing="sort"
+                        title="Show"
                         items={this.sorts}
                         value={this.state.sort}
                         onChange={this.handleFilter.bind(this, 'sort')} />
+                    <Selector thing="item"
+                        title="Grouped by"
+                        items={this.props.items}
+                        value={this.state.item}
+                        onChange={this.handleFilter.bind(this, 'item')} />
                 </div>
                 <svg ref="svg" className="barchart" key="barchart-svg"
                     width="100%" height={this.height()}

app/scripts/src/charts/selector.jsx

@@ -20,9 +20,12 @@ var Selector = React.createClass({
 
     render: function() {
         return (
-            <ul className={this.props.thing}>
-                {this.props.items.map(this.renderItem)}
-            </ul>
+            <div className="selector">
+                <div className="title">{this.props.title}</div>
+                <ul className="items">
+                    {this.props.items.map(this.renderItem)}
+                </ul>
+            </div>
         );
     }
 });

app/scripts/src/charts/stacked_area_chart.jsx

@@ -199,13 +199,15 @@ var StackedAreaChart = React.createClass({
                     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>
                 </div>
                 <div className="filters">
+                    <Selector thing="sort"
+                        title="Show"
+                        items={['commits']}
+                        value={'commits'} />
                     <Selector thing="item"
+                        title="Grouped by"
                         items={this.props.items}
                         value={this.state.item}
                         onChange={this.handleFilter.bind(this, 'item')} />
-                    <Selector thing="sort"
-                        items={['commits']}
-                        value={'commits'} />
                 </div>
                 <svg ref="svg" className="sachart" key="sachart-svg"
                     width="100%" height={maxHeight}

app/styles/app.css

@@ -29,7 +29,7 @@
     background-position: center;
     background-size: 100% auto;
     margin-right: 10px;
-    border-radius: 3px;
+    border-radius: 2px;
 }
 
 .info-block h1 {

app/styles/charts.css

@@ -54,39 +54,37 @@
     margin: 10px 15px 0 0;
 }
 
-.filters {
+.selector {
     width: 100%;
+    height: 22px;
+    font-size: 16px;
+    line-height: 21px;
+    margin-bottom: 8px;
 }
-.filters .item {
-    margin: 0;
-    padding: 0;
+.selector .title {
+    width: auto;
     float: left;
+    font-weight: 400;
+    margin-right: 8px;
 }
-.filters .item li {
-    margin-right: 10px;
-}
-.filters .sort li {
-    margin-left: 10px;
-}
-.filters .sort {
+.selector .items {
+    display: block;
+    float: left;
     margin: 0;
     padding: 0;
-    float: right;
 }
-.filters li {
+.selector li {
     display: inline-block;
-    font-size: 18px;
-    line-height: 32px;
     font-weight: 300;
     color: #aaa;
     cursor: pointer;
-    text-decoration: underline;
+    margin-right: 8px;
 }
-.filters li.active {
+.selector li.active {
     font-weight: 400;
     color: #222;
     cursor: default;
-    text-decoration: none;
+    border-bottom: #222 1px solid;
 }
 
 .whatsgoingon {
@@ -103,5 +101,5 @@
     margin: 3px 0 0;
     padding: 3px 6px;
     background-color: #eaeaea;
-    border-radius: 4px;
+    border-radius: 2px;
 }