New time selector proto
This commit is contained in:
parent
fe4cc7b845
commit
5a716f8338
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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==");
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue