1
0
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:
Tim Daubenschütz 2015-07-27 18:19:55 +02:00
parent c2d76034af
commit 1a1ba8bbb1
7 changed files with 59 additions and 50 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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/>

View File

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

View File

@ -39,4 +39,4 @@ function getRoutes(commonRoutes) {
}
export default getRoutes;
export default getRoutes;

View File

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

View File

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