1
0
Fork 0

New time selector proto

This commit is contained in:
Gregory Eremin 2015-03-16 17:46:18 +07:00
parent fe4cc7b845
commit 5a716f8338
6 changed files with 31 additions and 16 deletions

View File

@ -77,7 +77,6 @@ var App = React.createClass({
<Menu orgs={this.state.orgs} teams={this.state.teams} />
<Router.RouteHandler />
</div>
<WeekIntervalSelector />
</div>
);
}
@ -112,7 +111,7 @@ var Menu = React.createClass({
return (
<div className="menu">
<ul>
<li key="empact">
<li className="empact">
<Link to="org" params={this.getParams()} className="logo-button">
<div className="logo e">e</div>
<div className="logo m">m</div>
@ -122,9 +121,9 @@ var Menu = React.createClass({
<div className="logo t">t</div>
</Link>
</li>
<li key="orgs-header" className="nav header">Organizations:</li>
<li className="nav header">Organizations:</li>
{this.props.orgs.map(renderOrg)}
<li key="teams-header" className="nav header">Teams:</li>
<li className="nav header">Teams:</li>
{this.props.teams.map(renderTeam)}
</ul>
</div>

View File

@ -120,7 +120,7 @@ var BarChart = React.createClass({
return (
<div className="barchart-container">
<div className="whatsgoingon">
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>
This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em className="date">Mar 9</em> to <em className="date">Apr 27</em>
</div>
<div className="filters">
<Selector thing="sort"

View File

@ -196,7 +196,7 @@ var StackedAreaChart = React.createClass({
return (
<div className="sachart-container">
<div className="whatsgoingon">
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>
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 className="date">Mar 9</em> to <em className="date">Apr 27</em>
</div>
<div className="filters">
<Selector thing="sort"

View File

@ -21,13 +21,13 @@
.info-block {
width: 100%;
height: 50px;
height: 40px;
margin-bottom: 20px;
}
.info-block .img {
float: left;
width: 50px;
height: 50px;
width: 40px;
height: 40px;
background-color: #ddd;
background-position: center;
background-size: 100% auto;
@ -36,8 +36,8 @@
}
.info-block h1 {
font-size: 32px;
line-height: 50px;
font-size: 30px;
line-height: 40px;
margin: 0;
font-weight: 400;
}
@ -46,8 +46,8 @@
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
line-height: 50px;
font-size: 30px;
line-height: 40px;
color: #666;
}
.week-selector .week {

View File

@ -100,6 +100,19 @@
font-style: normal;
margin: 3px 0 0;
padding: 3px 6px;
background-color: #eaeaea;
background-color: #f0f0f0;
border-radius: 2px;
}
.whatsgoingon em.date {
background-color: #d0f0f0;
}
.whatsgoingon em.date:before {
content: '';
display: inline-block;
margin: 0 3px -1px 0;
width: 14px;
height: 14px;
background-size: 14px 14px;
/* Source: https://github.com/github/octicons/blob/master/svg/calendar.svg */
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik03MDQgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNTEyaC02NHYxMjhoNjRWNTEyek03MDQgMzIwaC02NHYxMjhoNjRWMzIwek04MzIgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNzA0aC02NHYxMjhoNjRWNzA0ek03NjggMGgtNjR2MTI4aDY0VjB6TTI1NiAwaC02NHYxMjhoNjRWMHpNODMyIDMyMGgtNjR2MTI4aDY0VjMyMHpNNTc2IDMyMGgtNjR2MTI4aDY0VjMyMHpNMzIwIDcwNGgtNjR2MTI4aDY0VjcwNHpNMTkyIDUxMmgtNjR2MTI4aDY0VjUxMnpNMzIwIDUxMmgtNjR2MTI4aDY0VjUxMnpNODMyIDY0djEyOEg2NDBWNjRIMzIwdjEyOEgxMjhWNjRIMHY4OTZoOTYwVjY0SDgzMnpNODk2IDg5Nkg2NFYyNTZoODMyVjg5NnpNMTkyIDcwNGgtNjR2MTI4aDY0VjcwNHpNNDQ4IDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDcwNGgtNjR2MTI4aDY0VjcwNHpNMzIwIDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDUxMmgtNjR2MTI4aDY0VjUxMnpNNzA0IDcwNGgtNjR2MTI4aDY0VjcwNHoiIC8+Cjwvc3ZnPg==");
}

View File

@ -15,8 +15,10 @@
.menu .nav {
margin-bottom: 5px;
}
.menu .nav.empact {
font-weight: 600;
.menu .empact {
height: 40px;
padding: 5px 0;
margin-bottom: 21px;
}
.menu .nav.header {
color: #444;
@ -24,6 +26,7 @@
cursor: default;
margin-top: 20px;
margin-bottom: 10px;
line-height: 24px;
}
.menu .nav a {
display: inline-block;