1
0
Fork 0

Info block

This commit is contained in:
Gregory Eremin 2015-03-10 15:24:19 +07:00
parent af8b9fc08a
commit 5f5ee4125e
2 changed files with 50 additions and 6 deletions

View File

@ -14,7 +14,7 @@ var App = React.createClass({
}); });
var Menu = React.createClass({ var Menu = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.State],
api_url: "/api/teams?org=", api_url: "/api/teams?org=",
getInitialState: function() { getInitialState: function() {
@ -65,7 +65,7 @@ var Org = React.createClass({
}); });
var OrgStats = React.createClass({ var OrgStats = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.State],
render: function(){ render: function(){
return ( return (
<section className="content"> <section className="content">
@ -77,11 +77,15 @@ var OrgStats = React.createClass({
}); });
var TeamStats = React.createClass({ var TeamStats = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.State],
render: function(){ render: function(){
return ( return (
<section className="content"> <section className="content">
<BarChart key={this.getParams().team} api="/api/stat/teams/top" <InfoBlock key={"info-block-"+ this.getParams().team}
image="https://media.licdn.com/mpr/mpr/p/8/005/058/14b/0088c48.jpg"
title={this.getParams().team}
text={"The most awesome team in "+ this.getParams().org} />
<BarChart key={"bar-chart"+ this.getParams().team} api="/api/stat/teams/top"
params={this.getParams()} items={["repo", "user"]} /> params={this.getParams()} items={["repo", "user"]} />
</section> </section>
); );
@ -89,7 +93,7 @@ var TeamStats = React.createClass({
}); });
var UserStats = React.createClass({ var UserStats = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.State],
render: function(){ render: function(){
return ( return (
<section className="content"> <section className="content">
@ -101,7 +105,7 @@ var UserStats = React.createClass({
}); });
var RepoStats = React.createClass({ var RepoStats = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.State],
render: function(){ render: function(){
return ( return (
<section className="content"> <section className="content">
@ -120,6 +124,19 @@ var NotFound = React.createClass({
} }
}); });
var InfoBlock = React.createClass({
render: function() {
var img = <div className="img" style={{backgroundImage: "url("+ this.props.image +")"}} />;
return (
<div className="info-block">
{ this.props.image ? img : null }
<h1>{this.props.title}</h1>
<p>{this.props.text}</p>
</div>
)
}
});
var routes = [ var routes = [
<Router.Route name="root" path="/app/" handler={App}> <Router.Route name="root" path="/app/" handler={App}>
<Router.Route name="org" path=":org" handler={Org}> <Router.Route name="org" path=":org" handler={Org}>

View File

@ -35,3 +35,30 @@ li.nav {
float: left; float: left;
width: 50%; width: 50%;
} }
.info-block {
width: 100%;
height: 100px;
margin-bottom: 20px;
}
.info-block .img {
float: left;
width: 100px;
height: 100px;
background-position: center;
background-size: 100% auto;
margin-right: 20px;
border-radius: 3px;
}
.info-block h1 {
font-weight: 400;
}
.info-block p {
max-width: 100%;
margin-right: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}