From 1a1ba8bbb1f2849f781c9dc02f3266e7b3bc5f35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 27 Jul 2015 18:19:55 +0200
Subject: [PATCH] add ellipsis again

---
 .../accordion_list_item.js                    | 72 +++++++++----------
 .../ascribe_detail/detail_property.js         | 19 +++--
 js/components/ascribe_detail/edition.js       |  3 +-
 js/components/ascribe_detail/piece.js         |  3 +-
 js/components/whitelabel/prize/routes.js      |  2 +-
 sass/ascribe_accordion_list.scss              |  3 +
 sass/main.scss                                |  7 +-
 7 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js
index ede61501..5c47d060 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item.js
@@ -20,8 +20,6 @@ import EditionListActions from '../../actions/edition_list_actions';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import FlowType from '../react_flow_type/react_flow_type';
-
 import AclProxy from '../acl_proxy';
 import SubmitToPrizeButton from '../ascribe_buttons/submit_to_prize_button';
 
@@ -161,46 +159,42 @@ let AccordionListItem = React.createClass({
                             </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">
-                            <FlowType
-                                minimum={350}
-                                maximum={500}>
-                                <Link {...linkData}>
-                                    <h1>{this.props.content.title}</h1>
-                                </Link>
+                            <Link {...linkData}>
+                                <h1>{this.props.content.title}</h1>
+                            </Link>
 
-                                <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
+                            <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
 
-                                <div>
-                                    <span className="pull-left">{this.props.content.date_created.split('-')[0]}</span>
+                            <div>
+                                <span className="pull-left">{this.props.content.date_created.split('-')[0]}</span>
 
-                                    <AclProxy
-                                        aclObject={this.props.content.acl}
-                                        aclName="acl_view_editions">
-                                        <AccordionListItemEditionWidget
-                                            className="pull-right"
-                                            piece={this.props.content}
-                                            toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
-                                            onPollingSuccess={this.onPollingSuccess}/>
-                                    </AclProxy>
-                                    <AclProxy
-                                        show={this.props.content.prize === null}>
-                                        <SubmitToPrizeButton
-                                            className="pull-right"
-                                            piece={this.props.content}
-                                            handleSuccess={this.handleSubmitPrizeSuccess}/>
-                                    </AclProxy>
-                                    <AclProxy
-                                        show={this.props.content.prize}>
-                                        <button
-                                            disabled
-                                            className="btn btn-default btn-xs pull-right">
-                                            {getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
-                                                                                      aria-hidden="true"></span>
-                                        </button>
-                                    </AclProxy>
-                                    {this.getLicences()}
-                                </div>
-                            </FlowType>
+                                <AclProxy
+                                    aclObject={this.props.content.acl}
+                                    aclName="acl_view_editions">
+                                    <AccordionListItemEditionWidget
+                                        className="pull-right"
+                                        piece={this.props.content}
+                                        toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
+                                        onPollingSuccess={this.onPollingSuccess}/>
+                                </AclProxy>
+                                <AclProxy
+                                    show={this.props.content.prize === null}>
+                                    <SubmitToPrizeButton
+                                        className="pull-right"
+                                        piece={this.props.content}
+                                        handleSuccess={this.handleSubmitPrizeSuccess}/>
+                                </AclProxy>
+                                <AclProxy
+                                    show={this.props.content.prize}>
+                                    <button
+                                        disabled
+                                        className="btn btn-default btn-xs pull-right">
+                                        {getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
+                                                                                  aria-hidden="true"></span>
+                                    </button>
+                                </AclProxy>
+                                {this.getLicences()}
+                            </div>
                         </div>
                         <span style={{'clear': 'both'}}></span>
 
diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js
index d293f6a3..e6e12ec5 100644
--- a/js/components/ascribe_detail/detail_property.js
+++ b/js/components/ascribe_detail/detail_property.js
@@ -11,26 +11,35 @@ 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',
-            valueClassName: 'col-xs-9 col-sm-8 col-md-9 col-lg-9'
+            labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2',
+            valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10'
         };
     },
 
     render() {
         let value = this.props.value;
+        let style;
+
+        if(this.props.breakWord) {
+            style = {
+                wordBreak: 'break-all'
+            };
+        }
+
         if (this.props.children){
             value = (
                 <div className="row-same-height">
                     <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={style}>
                         { this.props.children }
                     </div>
                 </div>);
@@ -41,7 +50,7 @@ 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 style={style} className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}>
                         {value}
                     </div>
                 </div>
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 409f94b9..98bfe654 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -98,7 +98,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/>
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index 94ac82a4..e73984a9 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/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}
diff --git a/js/components/whitelabel/prize/routes.js b/js/components/whitelabel/prize/routes.js
index 72513419..ac490c4e 100644
--- a/js/components/whitelabel/prize/routes.js
+++ b/js/components/whitelabel/prize/routes.js
@@ -39,4 +39,4 @@ function getRoutes(commonRoutes) {
 }
 
 
-export default getRoutes;
+export default getRoutes;
\ No newline at end of file
diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss
index 33cf18a8..74ae86af 100644
--- a/sass/ascribe_accordion_list.scss
+++ b/sass/ascribe_accordion_list.scss
@@ -48,6 +48,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;
diff --git a/sass/main.scss b/sass/main.scss
index 473e57d4..2b6a15e6 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -215,7 +215,8 @@ hr {
 
 .ascribe-detail-title {
     font-size: 2em;
-    margin-bottom: -0.2em;
+    font-weight: bold;
+    margin-top: 0;
 }
 
 .ascribe-detail-property {
@@ -227,8 +228,8 @@ hr {
 }
 
 .ascribe-detail-property-value {
-    white-space: nowrap;
-    overflow: hidden;
+    /* white-space: nowrap;
+    overflow: hidden; */
     text-overflow: ellipsis;
 }