mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 09:23:13 +01:00
add ellipsis again
This commit is contained in:
parent
c2d76034af
commit
1a1ba8bbb1
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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/>
|
||||
|
@ -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}
|
||||
|
@ -39,4 +39,4 @@ function getRoutes(commonRoutes) {
|
||||
}
|
||||
|
||||
|
||||
export default getRoutes;
|
||||
export default getRoutes;
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user