Info block
This commit is contained in:
parent
af8b9fc08a
commit
5f5ee4125e
|
@ -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}>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue