Skip to content

Instantly share code, notes, and snippets.

@benhoyle

benhoyle/index.html

Created November 22, 2016 17:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benhoyle/3f49ec045d166e6222ece5d837475628 to your computer and use it in GitHub Desktop.
Save benhoyle/3f49ec045d166e6222ece5d837475628 to your computer and use it in GitHub Desktop.
Download ZIP
Person Data Panels
Raw
index.html
<body>
<div class="container-fluid" id="container">
</div>
</body>
Raw
person-data-panels.markdown
Raw
script.babel
var data = [1111, "BH", 2222, "Ben Hoyle", "http://www.eip.com/images/people/trans/ben_hoyle.png", [
["Company X Inc", 20],
["Company Y Limited", 15],
["Company Z Limited", 13],
["Company A, Inc", 11],
["Company B Corp", 9],
["Company C Ltd", 8]
]]
var datalist = [data, data, data, data, data, data, data, data, data, data, data, data]
function List(props) {
// props - list = [[Company, %], []. []] and title
var listitems = [];
props.list.forEach(function(listitem) {
listitems.push(<li>{listitem[0]} - {listitem[1]}%</li>);
});
return (
<ul className="list-unstyled"><h4><b>{props.title}</b></h4>
{listitems}
</ul>
)
}
function Image(props) {
return (
<img src={props.url} className="img-rounded" alt={props.alttext} width={props.width} height={props.height}/>
)
}
class EmployeePanel extends React.Component {
//Props = name, imageurl, list
render() {
return (
<div className="panel panel-default">
<div className="panel-heading text-center">
<b>{this.props.name}</b>
</div>
<div className="panel-body text-center">
<Image url={this.props.imageurl} width={"150"} height={"150"} alttext={this.props.name} />
</div>
<div className="panel-body text-center">
<List title={"Companies"} list={this.props.list} />
</div>
</div>
);
}
}
class PanelSet extends React.Component {
// Props = datalist col_width
// Can do modulo split into div rows here
// sm can fit 3 (i.e. width 4), md 4 (i.e. width 3), lg 6 (i.e. width 2)
render() {
var panels = [];
this.props.datalist.forEach(function(data) {
panels.push(
<div className="col-sm-4 col-md-3 col-lg-2">
<EmployeePanel name={data[3]} list={data[5]} imageurl={data[4]}/>
</div>
);
});
return (
<div className="row top-padding" >
{panels}
</div>
)
}
}
ReactDOM.render(
<PanelSet datalist={datalist} />,
document.getElementById("container")
);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
Raw
style.css
.top-padding {
padding-top: 25px
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment