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;
}
.ascribe-detail-property > .row-same-height > .col-xs-2 {
text-transform: uppercase;
}
/* columns of same height styles */
/* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
.row-full-height {

83
js/components/edition.js
View File

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