diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 96fe619c..5c47d060 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/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({ -
+
-

{this.props.content.title}

+

{this.props.content.title}

{getLangText('by %s', this.props.content.artist_name)}

diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js index d293f6a3..b2d8170d 100644 --- a/js/components/ascribe_detail/detail_property.js +++ b/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', - 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; + if (this.props.children){ value = (
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index acb76875..a7221910 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -107,7 +107,8 @@ let Edition = React.createClass({
- {this.props.edition.title}
} /> +

{this.props.edition.title}

+

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({
- {this.props.piece.title}
} /> +

{this.props.piece.title}

+
{this.props.piece.num_editions > 0 ? : null} diff --git a/js/components/react_flow_type/react_flow_type.js b/js/components/react_flow_type/react_flow_type.js new file mode 100644 index 00000000..063eaf1c --- /dev/null +++ b/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 ( +
+ {this.props.children} +
+ ); + } +}); + +export default FlowType; \ No newline at end of file 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 6e3edaee..f3ce7fe8 100644 --- a/sass/ascribe_accordion_list.scss +++ b/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; diff --git a/sass/main.scss b/sass/main.scss index b0f3a856..d8e5e7ff 100644 --- a/sass/main.scss +++ b/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; - overflow: hidden; + /* white-space: nowrap; + overflow: hidden; */ text-overflow: ellipsis; }