Merged in AD-601-in-piece_detail-longer-titles-are (pull request #22)

Ad 601 in piece_detail longer titles are

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -14,7 +14,6 @@ import PieceListActions from '../../actions/piece_list_actions';
 import PieceListStore from '../../stores/piece_list_store';
 
 import WhitelabelStore from '../../stores/whitelabel_store';
-import WhitelabelActions from '../../actions/whitelabel_actions';
 
 import EditionListActions from '../../actions/edition_list_actions';
 
@@ -94,7 +93,7 @@ let AccordionListItem = React.createClass({
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    onPollingSuccess(pieceId, numEditions) {
+    onPollingSuccess(pieceId) {
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
         EditionListActions.toggleEditionList(pieceId);
 
@@ -159,10 +158,9 @@ let AccordionListItem = React.createClass({
                                 </Link>
                             </div>
                         </div>
-                        <div
+                        <div className="col-xs-8 col-sm-9 col-md-9 col-lg-9 col-md-offset-1 col-lg-offset-1 accordion-list-item-header">
-                            className="col-xs-8 col-sm-9 col-md-9 col-lg-9 col-md-offset-1 col-lg-offset-1 accordion-list-item-header">
                             <Link {...linkData}>
-                                <h1 className="truncate">{this.props.content.title}</h1>
+                                <h1>{this.props.content.title}</h1>
                             </Link>
 
                             <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>

js/components/ascribe_detail/detail_property.js

@@ -11,19 +11,21 @@ let DetailProperty = React.createClass({
         ]),
         separator: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
-        valueClassName: React.PropTypes.string
+        valueClassName: React.PropTypes.string,
+        breakWord: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
             separator: ':',
-            labelClassName: 'col-xs-3 col-sm-4 col-md-3 col-lg-3',
+            labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2',
-            valueClassName: 'col-xs-9 col-sm-8 col-md-9 col-lg-9'
+            valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10'
         };
     },
 
     render() {
         let value = this.props.value;
+
         if (this.props.children){
             value = (
                 <div className="row-same-height">

js/components/ascribe_detail/edition.js

@@ -107,7 +107,8 @@ let Edition = React.createClass({
                 </Col>
                 <Col md={6} className="ascribe-edition-details">
                     <div className="ascribe-detail-header">
-                        <EditionDetailProperty label="TITLE" value={<div className="ascribe-detail-title">{this.props.edition.title}</div>} />
+                        <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
+                        <hr/>
                         <EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
                         <EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } />
                         <hr/>

js/components/ascribe_detail/piece.js

@@ -131,7 +131,8 @@ let Piece = React.createClass({
                 </Col>
                 <Col md={6} className="ascribe-edition-details">
                     <div className="ascribe-detail-header">
-                        <EditionDetailProperty label="TITLE" value={<div className="ascribe-detail-title">{this.props.piece.title}</div>} />
+                        <h1 className="ascribe-detail-title">{this.props.piece.title}</h1>
+                        <hr/>
                         <EditionDetailProperty label="BY" value={this.props.piece.artist_name} />
                         <EditionDetailProperty label="DATE" value={ this.props.piece.date_created.slice(0, 4) } />
                         {this.props.piece.num_editions > 0 ? <EditionDetailProperty label="EDITIONS" value={ this.props.piece.num_editions } /> : null}

js/components/react_flow_type/react_flow_type.js

@@ -0,0 +1,92 @@
+'use strict';
+/**
+ * This component is essentially a port of https://github.com/simplefocus/FlowType.JS
+ * to Reactjs in order to not being forced to use jQuery
+ *
+ * Author: Tim Daubenschütz
+ *
+ * Thanks to the guys at Simple Focus http://simplefocus.com/
+ */
+
+import React from 'react';
+import ReactAddons from 'react/addons';
+
+let FlowType = React.createClass({
+    propTypes: {
+
+        // standard FlowTypes.JS options
+        maximum: React.PropTypes.number,
+        minimum: React.PropTypes.number,
+        maxFont: React.PropTypes.number,
+        minFont: React.PropTypes.number,
+        fontRatio: React.PropTypes.number,
+
+        // react specific options
+        children: React.PropTypes.element.isRequired // only supporting one child element at once right now
+    },
+
+    getDefaultProps() {
+        return {
+            maximum: 9999,
+            minimum: 1,
+            maxFont: 9999,
+            minFont: 1,
+            fontRatio: 35
+        };
+    },
+
+    getInitialState() {
+        return {
+            // 32 because that's the default font display size
+            // doesn't really matter though
+            fontSize: 0
+        };
+    },
+
+    componentDidMount() {
+        // Make changes upon resize, calculate changes and rerender
+        this.handleResize();
+        window.addEventListener('resize', this.handleResize);
+    },
+
+    componentWillUnmount() {
+        // stop listening to window once the component was unmounted
+        window.removeEventListener('resize', this.handleResize);
+    },
+
+    handleResize() {
+        let elemWidth = this.refs.flowTypeElement.getDOMNode().offsetWidth;
+        let width = elemWidth > this.props.maximum ? this.props.maximum : elemWidth < this.props.minimum ? this.props.minimum : elemWidth;
+        let fontBase = width / this.props.fontRatio;
+        let fontSize = fontBase > this.props.maxFont ? this.props.maxFont : fontBase < this.props.minFont ? this.props.minFont : fontBase;
+
+        this.setState({ fontSize });
+    },
+
+    // The child the user passes to this component needs to have it's
+    // style.fontSize property to be updated
+    renderChildren() {
+        return ReactAddons.Children.map(this.props.children, (child) => {
+            return ReactAddons.addons.cloneWithProps(child, {
+                ref: 'flowTypeFontElement',
+                
+            });
+        });
+    },
+
+    render() {
+        return (
+            <div
+                ref="flowTypeElement"
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    fontSize: this.state.fontSize
+                }}>
+                {this.props.children}
+            </div>
+        );
+    }
+});
+
+export default FlowType;

sass/ascribe_accordion_list.scss

@@ -53,6 +53,9 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
             margin: .1em 0 .1em 0;
             font-size: 2.2em;
             cursor: pointer;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         h3 {
             font-size: 1.3em;

sass/main.scss

@@ -215,7 +215,7 @@ hr {
 
 .ascribe-detail-title {
     font-size: 2em;
-    margin-bottom: -0.2em;
+    margin-top: 0;
 }
 
 .ascribe-detail-property {
@@ -227,8 +227,8 @@ hr {
 }
 
 .ascribe-detail-property-value {
-    white-space: nowrap;
+    /* white-space: nowrap;
-    overflow: hidden;
+    overflow: hidden; */
     text-overflow: ellipsis;
 }