2015-05-19 17:13:09 +02:00
|
|
|
import React from 'react';
|
2015-05-26 13:33:35 +02:00
|
|
|
import ImageViewer from './ascribe_media/image_viewer';
|
2015-05-19 17:13:09 +02:00
|
|
|
|
2015-05-26 10:41:41 +02:00
|
|
|
/**
|
2015-05-26 10:52:20 +02:00
|
|
|
* This is the component that implements display-specific functionality
|
2015-05-26 10:41:41 +02:00
|
|
|
*/
|
2015-05-26 13:48:46 +02:00
|
|
|
let Edition = React.createClass({
|
2015-05-26 13:33:35 +02:00
|
|
|
//propTypes: {
|
|
|
|
// title: React.PropTypes.string.isRequired
|
|
|
|
//},
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div className="col-md-7">
|
2015-05-26 13:48:46 +02:00
|
|
|
<ImageViewer thumbnail={this.props.edition.thumbnail}/>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
<div className="col-md-5">
|
2015-05-26 14:58:11 +02:00
|
|
|
<EditionHeader edition={this.props.edition}/>
|
|
|
|
<EditionDetails edition={this.props.edition}/>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-05-26 13:48:46 +02:00
|
|
|
let EditionHeader = React.createClass({
|
2015-05-26 13:33:35 +02:00
|
|
|
//propTypes: {
|
|
|
|
// title: React.PropTypes.string.isRequired
|
|
|
|
//},
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className="ascribe-detail-header">
|
|
|
|
<div className="row">
|
|
|
|
<div className="row-same-height">
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-2 col-xs-height col-bottom">
|
2015-05-26 13:33:35 +02:00
|
|
|
<div>TITLE:</div>
|
|
|
|
</div>
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-10 col-xs-height col-bottom">
|
2015-05-26 13:48:46 +02:00
|
|
|
<div className="ascribe-detail-title">{this.props.edition.title}</div>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="row">
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-2">
|
2015-05-26 13:33:35 +02:00
|
|
|
<div>BY:</div>
|
|
|
|
</div>
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-10">
|
2015-05-26 13:48:46 +02:00
|
|
|
<div>{this.props.edition.artist_name}</div>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="row">
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-2">
|
2015-05-26 13:33:35 +02:00
|
|
|
<div>DATE:</div>
|
|
|
|
</div>
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-10">
|
2015-05-26 13:48:46 +02:00
|
|
|
<div>{ this.props.edition.date_created.slice(0,4) }</div>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2015-05-19 17:13:09 +02:00
|
|
|
});
|
|
|
|
|
2015-05-26 13:48:46 +02:00
|
|
|
let EditionDetails = React.createClass({
|
2015-05-26 13:33:35 +02:00
|
|
|
//propTypes: {
|
|
|
|
// title: React.PropTypes.string.isRequired
|
|
|
|
//},
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className="ascribe-detail-header">
|
|
|
|
<div className="row">
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-2">
|
2015-05-26 13:33:35 +02:00
|
|
|
<div>EDITION:</div>
|
|
|
|
</div>
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-10">
|
2015-05-26 13:48:46 +02:00
|
|
|
<div>{ this.props.edition.edition_number } of {this.props.edition.num_editions}</div>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="row">
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-2">
|
2015-05-26 13:33:35 +02:00
|
|
|
<div>ID:</div>
|
|
|
|
</div>
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-10">
|
2015-05-26 13:48:46 +02:00
|
|
|
<div>{ this.props.edition.bitcoin_id }</div>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="row">
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-2">
|
2015-05-26 13:33:35 +02:00
|
|
|
<div>OWNER:</div>
|
|
|
|
</div>
|
2015-05-26 14:58:11 +02:00
|
|
|
<div className="col-xs-10">
|
2015-05-26 13:48:46 +02:00
|
|
|
<div>{ this.props.edition.owner }</div>
|
2015-05-26 13:33:35 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2015-05-26 13:48:46 +02:00
|
|
|
export default Edition;
|