diff --git a/app/scripts/src/app.jsx b/app/scripts/src/app.jsx index bb22dad..bcdef76 100644 --- a/app/scripts/src/app.jsx +++ b/app/scripts/src/app.jsx @@ -72,11 +72,13 @@ var App = React.createClass({ render: function(){ return ( -
- +
+
+ + +
- -
+ ); } }); @@ -100,7 +102,7 @@ var Menu = React.createClass({ ) }; return ( -
+
-
+ ); } }); @@ -170,11 +172,11 @@ var Dashboard = React.createClass({ } return ( -
+
-
+ ); } }); @@ -182,7 +184,7 @@ var Dashboard = React.createClass({ var NotFound = React.createClass({ render: function(){ return ( -
NOT FOUND :(
+
NOT FOUND :(
); } }); @@ -190,7 +192,7 @@ var NotFound = React.createClass({ var SelectOrg = React.createClass({ render: function(){ return ( -
Please select organization from the menu!
+
Please select organization from the menu!
); } }); @@ -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 ( -
+
{day}
-
{month}
+
{month}
{day}
) }.bind(this); + return ( -
- {weeks.map(renderWeek)} -
+
+
+ Mar 9 +
+ — +
+ Apr 27 +
+
); } }); diff --git a/app/styles/app.css b/app/styles/app.css index 0d72956..6d2bf34 100644 --- a/app/styles/app.css +++ b/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; }