localhots/empact
1
0
Fork 0
Code Releases Activity

Info block

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/scripts/app.jsx
View File

@ -14,7 +14,7 @@ var App = React.createClass({
});
var Menu = React.createClass({
mixins: [Router.Navigation, Router.State],
mixins: [Router.State],
api_url: "/api/teams?org=",
getInitialState: function() {
@ -65,7 +65,7 @@ var Org = React.createClass({
});
var OrgStats = React.createClass({
mixins: [Router.Navigation, Router.State],
mixins: [Router.State],
render: function(){
return (
<section className="content">
@ -77,11 +77,15 @@ var OrgStats = React.createClass({
});
var TeamStats = React.createClass({
mixins: [Router.Navigation, Router.State],
mixins: [Router.State],
render: function(){
return (
<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"]} />
</section>
);
@ -89,7 +93,7 @@ var TeamStats = React.createClass({
});
var UserStats = React.createClass({
mixins: [Router.Navigation, Router.State],
mixins: [Router.State],
render: function(){
return (
<section className="content">
@ -101,7 +105,7 @@ var UserStats = React.createClass({
});
var RepoStats = React.createClass({
mixins: [Router.Navigation, Router.State],
mixins: [Router.State],
render: function(){
return (
<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 = [
<Router.Route name="root" path="/app/" handler={App}>
<Router.Route name="org" path=":org" handler={Org}>

27
app/styles/app.css
View File

@ -35,3 +35,30 @@ li.nav {
float: left;
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;
}