Week selector draft

app/scripts/src/app.jsx

@@ -72,11 +72,13 @@ var App = React.createClass({
 
     render: function(){
         return (
-            <section className="app">
-                <Menu orgs={this.state.orgs} teams={this.state.teams} />
+            <div className="master">
+                <div className="app" id="app">
+                    <Menu orgs={this.state.orgs} teams={this.state.teams} />
+                    <Router.RouteHandler />
+                </div>
                 <WeekIntervalSelector />
-                <Router.RouteHandler />
-            </section>
+            </div>
         );
     }
 });
@@ -100,7 +102,7 @@ var Menu = React.createClass({
             )
         };
         return (
-            <section className="menu">
+            <div className="menu">
                 <ul>
                     <li key="empact">
                         <Link to="org" params={this.getParams()} className="logo-button">
@@ -117,7 +119,7 @@ var Menu = React.createClass({
                     <li key="teams-header" className="nav header">Teams:</li>
                     {this.props.teams.map(renderTeam)}
                 </ul>
-            </section>
+            </div>
         );
     }
 });
@@ -170,11 +172,11 @@ var Dashboard = React.createClass({
         }
 
         return (
-            <section className="content">
+            <div className="content">
                 <InfoBlock image={infoImage} title={infoTitle} />
                 <BarChart api={bcApi} params={this.getParams()} items={bcItems} />
                 <StackedAreaChart api={sacApi} params={this.getParams()} items={sacItems} />
-            </section>
+            </div>
         );
     }
 });
@@ -182,7 +184,7 @@ var Dashboard = React.createClass({
 var NotFound = React.createClass({
     render: function(){
         return (
-            <section className="content">NOT FOUND :(</section>
+            <div className="content">NOT FOUND :(</div>
         );
     }
 });
@@ -190,7 +192,7 @@ var NotFound = React.createClass({
 var SelectOrg = React.createClass({
     render: function(){
         return (
-            <section className="content">Please select organization from the menu!</section>
+            <div className="content">Please select organization from the menu!</div>
         );
     }
 });
@@ -215,14 +217,19 @@ var WeekIntervalSelector = React.createClass({
         'Oct', 'Nov', 'Dec'
     ],
 
-    componentDidMount: function() {
-        this.resize();
-        window.addEventListener('resize', this.resize);
+    getInitialState: function() {
+        return {
+            from: 0,
+            to: 0
+        };
     },
 
-    resize: function() {
-        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-        this.refs.selector.getDOMNode().style.height = ''+ (h - 40) +'px';
+    componentDidMount: function() {
+        // window.addEventListener('resize', this.resize);
+    },
+
+    showSelector: function() {
+
     },
 
     render: function() {
@@ -243,20 +250,28 @@ var WeekIntervalSelector = React.createClass({
         var renderWeek = function(week, i) {
             var d = new Date(week*ms),
                 month = this.monthNames[d.getMonth()],
+                season = this.seasons[d.getMonth()],
                 day = d.getDate();
 
             return (
-                <div key={'week-'+ i} className="week">
+                <div key={'week-'+ i} ref="blocks" className="week">
                     <div key={''+ i +'-week'} className="square">{day}</div>
-                    <div key={''+ i +'-month'} className="square">{month}</div>
+                    <div key={''+ i +'-month'} className={'square '+ season}>{month}</div>
                     <div key={''+ i +'-day'} className="square">{day}</div>
                 </div>
             )
         }.bind(this);
+
         return (
-            <section ref="selector" className="week-selector">
-                {weeks.map(renderWeek)}
-            </section>
+            <div className="week-selector">
+                <div className="week">
+                    Mar 9
+                </div>
+                &mdash;
+                <div className="week">
+                    Apr 27
+                </div>
+            </div>
         );
     }
 });

app/styles/app.css

@@ -2,15 +2,12 @@
     box-sizing: border-box;
 }
 
-section {
-    float: left;
-}
-
 .app {
     width: 100%;
 }
 
 .menu {
+    float: left;
     width: 200px;
     margin: 20px;
 }
@@ -63,6 +60,7 @@ section {
     background-color: #f9d4be;
 }
 .content {
+    float: left;
     width: calc(100% - 240px);
     margin-top: 20px;
 }
@@ -95,27 +93,21 @@ section {
 }
 
 .week-selector {
-    display: none;
     position: absolute;
-    top: 50%;
-    width: 100%;
-    height: 100%;
-    float: left;
-    margin: 20px 20px 20px 0;
+    top: 20px;
+    right: 20px;
+    font-size: 32px;
+    line-height: 50px;
+    color: #666;
 }
 .week-selector .week {
-    float: left;
-    width: 20px;
-    font-size: 8px;
-    line-height: 10px;
-    margin: 0 0 1px;
+    display: inline-block;
+    padding: 0 6px;
+    margin: 0 3px;
 }
-.week-selector .week .square {
-    float: left;
-    width: 20px;
-    height: 20px;
-    border: #aaa 1px solid;
-    text-align: center;
-    line-height: 20px;
-    background-color: #fff;
+.week-selector .week:hover {
+    background-color: #eaeaea;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #000;
 }