1
0
Fork 0

Week selector draft

This commit is contained in:
Gregory Eremin 2015-03-15 17:39:33 +07:00
parent 1ed7522189
commit 8c62239b53
2 changed files with 51 additions and 44 deletions

View File

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

View File

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