Merge branch 'AD-601-in-piece_detail-longer-titles-are'

Conflicts:
	.gitignore

.gitignore

@@ -18,4 +18,4 @@ node_modules/*
 
 build
 
-.DS_Store
+.DS_Store

README.md

@@ -101,6 +101,9 @@ A: Easily by starting the your gulp process with the following command:
 ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
 ```
 
+Q: I want to know all dependencies that get bundled into the live build.
+A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
+
 Reading list
 ============
 

js/components/ascribe_detail/detail_property.js

@@ -12,7 +12,7 @@ let DetailProperty = React.createClass({
         separator: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
         valueClassName: React.PropTypes.string,
-        breakWord: React.PropTypes.bool
+        ellipsis: React.PropTypes.bool
     },
 
     getDefaultProps() {
@@ -25,6 +25,16 @@ let DetailProperty = React.createClass({
 
     render() {
         let value = this.props.value;
+        let styles = {};
+
+        if(this.props.ellipsis) {
+            styles = {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            };
+        }
+
 
         if (this.props.children){
             value = (
@@ -32,7 +42,9 @@ let DetailProperty = React.createClass({
                     <div className="col-xs-6 col-xs-height col-bottom no-padding">
                         { this.props.value }
                     </div>
-                    <div className="col-xs-6 col-xs-height">
+                    <div
+                        className="col-xs-6 col-xs-height"
+                        style={styles}>
                         { this.props.children }
                     </div>
                 </div>);
@@ -43,7 +55,9 @@ let DetailProperty = React.createClass({
                     <div className={this.props.labelClassName + ' col-xs-height col-bottom ascribe-detail-property-label'}>
                         { this.props.label + this.props.separator}
                     </div>
-                    <div className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}>
+                    <div
+                        className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}
+                        style={styles}>
                         {value}
                     </div>
                 </div>

js/components/ascribe_detail/edition.js

@@ -273,10 +273,16 @@ let EditionSummary = React.createClass({
     render() {
         return (
             <div className="ascribe-detail-header">
-                <EditionDetailProperty label={getLangText('EDITION')}
+                <EditionDetailProperty
+                    label={getLangText('EDITION')}
                     value={this.props.edition.edition_number + ' ' + getLangText('of') + ' ' + this.props.edition.num_editions} />
-                <EditionDetailProperty label={getLangText('ID')} value={ this.props.edition.bitcoin_id } />
-                <EditionDetailProperty label={getLangText('OWNER')} value={ this.props.edition.owner } />
+                <EditionDetailProperty
+                    label={getLangText('ID')}
+                    value={ this.props.edition.bitcoin_id }
+                    ellipsis={true} />
+                <EditionDetailProperty
+                    label={getLangText('OWNER')}
+                    value={ this.props.edition.owner } />
                 {this.getStatus()}
                 {this.getActions()}
                 <hr/>

sass/ascribe_accordion_list.scss

@@ -61,6 +61,9 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
             font-size: 1.3em;
             margin: .2em 0 .3em 0;
             cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         a {
             color: #666;

sass/ascribe_piece_list_toolbar.scss

@@ -1,4 +1,9 @@
 
+.ascribe-piece-list-toolbar {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
 .search-bar {
-    max-width: 200px;
+    max-width: 160px;
 }