ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00
Code Issues Releases Wiki Activity

refactored edition properties

Browse Source
This commit is contained in:
ddejongh 2015-05-26 15:31:28 +02:00
parent dc33c74da6
commit e3c115897f
2 changed files with 29 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -70,6 +70,10 @@
margin-bottom: -0.2em; margin-bottom: -0.2em;
} }
.ascribe-detail-property > .row-same-height > .col-xs-2 {
text-transform: uppercase;
}
/* columns of same height styles */ /* columns of same height styles */
/* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */ /* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
.row-full-height { .row-full-height {

83
js/components/edition.js
View File

@ -25,39 +25,13 @@ let Edition = React.createClass({
}); });
let EditionHeader = React.createClass({ let EditionHeader = React.createClass({
//propTypes: {
// title: React.PropTypes.string.isRequired
//},
render() { render() {
var title_html = <div className="ascribe-detail-title">{this.props.edition.title}</div>;
return ( return (
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<div className="row"> <EditionDetailProperty label="title" value={title_html} />
<div className="row-same-height"> <EditionDetailProperty label="by" value={this.props.edition.artist_name} />
<div className="col-xs-2 col-xs-height col-bottom"> <EditionDetailProperty label="date" value={ this.props.edition.date_created.slice(0,4) } />
<div>TITLE:</div>
</div>
<div className="col-xs-10 col-xs-height col-bottom">
<div className="ascribe-detail-title">{this.props.edition.title}</div>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-2">
<div>BY:</div>
</div>
<div className="col-xs-10">
<div>{this.props.edition.artist_name}</div>
</div>
</div>
<div className="row">
<div className="col-xs-2">
<div>DATE:</div>
</div>
<div className="col-xs-10">
<div>{ this.props.edition.date_created.slice(0,4) }</div>
</div>
</div>
<hr/> <hr/>
</div> </div>
); );
@ -65,42 +39,35 @@ let EditionHeader = React.createClass({
}); });
let EditionDetails = React.createClass({ let EditionDetails = React.createClass({
//propTypes: {
// title: React.PropTypes.string.isRequired
//},
render() { render() {
return ( return (
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<div className="row"> <EditionDetailProperty label="edition"
<div className="col-xs-2"> value={this.props.edition.edition_number + " of " + this.props.edition.num_editions} />
<div>EDITION:</div> <EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } />
</div> <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
<div className="col-xs-10">
<div>{ this.props.edition.edition_number } of {this.props.edition.num_editions}</div>
</div>
</div>
<div className="row">
<div className="col-xs-2">
<div>ID:</div>
</div>
<div className="col-xs-10">
<div>{ this.props.edition.bitcoin_id }</div>
</div>
</div>
<div className="row">
<div className="col-xs-2">
<div>OWNER:</div>
</div>
<div className="col-xs-10">
<div>{ this.props.edition.owner }</div>
</div>
</div>
<hr/> <hr/>
</div> </div>
); );
} }
}); });
let EditionDetailProperty = React.createClass({
render() {
return (
<div className="row ascribe-detail-property">
<div className="row-same-height">
<div className="col-xs-2 col-xs-height col-bottom">
<div>{ this.props.label }:</div>
</div>
<div className="col-xs-10 col-xs-height col-bottom">
<div>{ this.props.value }</div>
</div>
</div>
</div>
);
}
});
export default Edition; export default Edition;