From e3c115897f1d054291f9363363211e59e56a76d7 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Tue, 26 May 2015 15:31:28 +0200
Subject: [PATCH] refactored edition properties

---
 css/main.css             |  4 ++
 js/components/edition.js | 83 ++++++++++++----------------------------
 2 files changed, 29 insertions(+), 58 deletions(-)

diff --git a/css/main.css b/css/main.css
index 1676fc84..4ecb7e62 100644
--- a/css/main.css
+++ b/css/main.css
@@ -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 {
diff --git a/js/components/edition.js b/js/components/edition.js
index 336bacff..a0f1dd76 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -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;
\ No newline at end of file