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;
}