piece_detail thumb + header

css/main.css

@@ -56,3 +56,74 @@
     background-color: rgba(2, 182, 163, 0.5);
     border-color: rgba(2, 182, 163, 0.5);
 }
+
+.ascribe-detail-header{
+    margin-top: 2em;
+}
+
+.ascribe-detail-header > div{
+    padding-bottom: 0.4em;
+}
+
+.ascribe-detail-title {
+    font-size: 2em;
+    margin-bottom: -0.2em;
+}
+
+/* columns of same height styles */
+/* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
+.row-full-height {
+    height: 100%;
+}
+
+.col-full-height {
+    height: 100%;
+    vertical-align: middle;
+}
+
+.row-same-height {
+    display: table;
+    width: 100%;
+    /* fix overflow */
+    table-layout: fixed;
+}
+
+.col-xs-height {
+    display: table-cell;
+    float: none !important;
+}
+
+@media (min-width: 768px) {
+    .col-sm-height {
+        display: table-cell;
+        float: none !important;
+    }
+}
+
+@media (min-width: 992px) {
+    .col-md-height {
+        display: table-cell;
+        float: none !important;
+    }
+}
+
+@media (min-width: 1200px) {
+    .col-lg-height {
+        display: table-cell;
+        float: none !important;
+    }
+}
+
+/* vertical alignment styles */
+
+.col-top {
+    vertical-align: top;
+}
+
+.col-middle {
+    vertical-align: middle;
+}
+
+.col-bottom {
+    vertical-align: bottom;
+}

js/actions/edition_list_actions.js

@@ -19,6 +19,6 @@ class EditionListActions {
                 console.log(err);
             });
     }
-};
+}
 
 export default alt.createActions(EditionListActions);

js/actions/piece_actions.js

@@ -18,6 +18,6 @@ class PieceActions {
                 console.log(err);           
             });
     }
-};
+}
 
 export default alt.createActions(PieceActions);

js/components/ascribe_media/image_viewer.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * This is the component that implements display-specific functionality
+ */
+let ImageViewer = React.createClass({
+    propTypes: {
+        thumbnail: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        let thumbnail = <img className="img-responsive" src={this.props.thumbnail}/>;
+        let aligner = <span className="vcenter"></span>;
+        return (
+            <div>
+                <div>
+                {aligner}
+                {thumbnail}
+                </div>
+            </div>
+        );
+    }
+});
+
+export default ImageViewer;

js/components/piece.js

@@ -1,18 +1,106 @@
 import React from 'react';
+import ImageViewer from './ascribe_media/image_viewer';
 
 /**
  * This is the component that implements display-specific functionality
  */
 let Piece = React.createClass({
-  propTypes: {
+    //propTypes: {
-    title: React.PropTypes.string.isRequired
+    //    title: React.PropTypes.string.isRequired
-  },
+    //},
 
     render() {
         return (
-      <p>Title: {this.props.title}</p>
+            <div>
+                <div className="col-md-7">
+                    <ImageViewer thumbnail={this.props.piece.thumbnail}/>
+                </div>
+                <div className="col-md-5">
+                    <PieceHeader piece={this.props.piece}/>
+                    <PieceEdition piece={this.props.piece}/>
+                </div>
+            </div>
         );
     }
 });
 
+let PieceHeader = React.createClass({
+    //propTypes: {
+    //    title: React.PropTypes.string.isRequired
+    //},
+
+    render() {
+        return (
+            <div className="ascribe-detail-header">
+                <div className="row">
+                    <div className="row-same-height">
+                        <div className="col-md-2 col-xs-height col-bottom">
+                            <div>TITLE:</div>
+                        </div>
+                        <div className="col-md-10 col-xs-height col-bottom">
+                            <div className="ascribe-detail-title">{this.props.piece.title}</div>
+                        </div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-2">
+                        <div>BY:</div>
+                    </div>
+                    <div className="col-md-10">
+                        <div>{this.props.piece.artist_name}</div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-2">
+                        <div>DATE:</div>
+                    </div>
+                    <div className="col-md-10">
+                        <div>{ this.props.piece.date_created.slice(0,4) }</div>
+                    </div>
+                </div>
+                <hr/>
+            </div>
+        );
+    }
+});
+
+let PieceEdition = React.createClass({
+    //propTypes: {
+    //    title: React.PropTypes.string.isRequired
+    //},
+
+    render() {
+        return (
+            <div className="ascribe-detail-header">
+                <div className="row">
+                    <div className="col-md-2">
+                        <div>EDITION:</div>
+                    </div>
+                    <div className="col-md-10">
+                        <div>{ this.props.piece.edition_number } of {this.props.piece.num_editions}</div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-2">
+                        <div>ID:</div>
+                    </div>
+                    <div className="col-md-10">
+                        <div>{ this.props.piece.bitcoin_id }</div>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-md-2">
+                        <div>OWNER:</div>
+                    </div>
+                    <div className="col-md-10">
+                        <div>{ this.props.piece.owner }</div>
+                    </div>
+                </div>
+                <hr/>
+            </div>
+        );
+    }
+});
+
+
 export default Piece;

js/components/piece_container.js

@@ -31,7 +31,7 @@ let PieceContainer = React.createClass({
 
         if('title' in this.state.piece) {
             return (
-                <Piece title={this.state.piece.title}></Piece>
+                <Piece piece={this.state.piece}></Piece>
             );
         } else {
             return (

js/fetchers/piece_fetcher.js

@@ -11,7 +11,7 @@ let PieceFetcher = {
      * 
      */
     fetchOne(pieceId) {
-        return fetch(AppConstants.baseUrl + 'pieces/' + pieceId + '/', {
+        return fetch(AppConstants.baseUrl + 'editions/' + pieceId + '/', {
             headers: {
                 'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
             }

js/stores/piece_store.js

@@ -4,13 +4,13 @@ import PieceAction from '../actions/piece_actions';
 
 class PieceStore {
     constructor() {
-        this.piece = {}
+        this.piece = {};
         this.bindActions(PieceAction);
     }
 
     onUpdatePiece(piece) {
         this.piece = piece;
     }
-};
+}
 
 export default alt.createStore(PieceStore);

js/utils/general_utils.js

@@ -35,6 +35,7 @@ let GeneralUtils = {
         l.forEach((num) => sum += parseFloat(num) || 0);
         return sum;
     }
+
 };
 
 export default GeneralUtils;