ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-30 21:52:08 +02:00
Code Issues Releases Wiki Activity

add ellipsis again

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
js/components/ascribe_accordion_list/accordion_list_item.js
View File

@ -20,8 +20,6 @@ import EditionListActions from '../../actions/edition_list_actions';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
import FlowType from '../react_flow_type/react_flow_type';
import AclProxy from '../acl_proxy'; import AclProxy from '../acl_proxy';
import SubmitToPrizeButton from '../ascribe_buttons/submit_to_prize_button'; import SubmitToPrizeButton from '../ascribe_buttons/submit_to_prize_button';
@ -161,46 +159,42 @@ let AccordionListItem = React.createClass({
</div> </div>
</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"> <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 <Link {...linkData}>
minimum={350} <h1>{this.props.content.title}</h1>
maximum={500}> </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> <div>
<span className="pull-left">{this.props.content.date_created.split('-')[0]}</span> <span className="pull-left">{this.props.content.date_created.split('-')[0]}</span>
<AclProxy <AclProxy
aclObject={this.props.content.acl} aclObject={this.props.content.acl}
aclName="acl_view_editions"> aclName="acl_view_editions">
<AccordionListItemEditionWidget <AccordionListItemEditionWidget
className="pull-right" className="pull-right"
piece={this.props.content} piece={this.props.content}
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog} toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
onPollingSuccess={this.onPollingSuccess}/> onPollingSuccess={this.onPollingSuccess}/>
</AclProxy> </AclProxy>
<AclProxy <AclProxy
show={this.props.content.prize === null}> show={this.props.content.prize === null}>
<SubmitToPrizeButton <SubmitToPrizeButton
className="pull-right" className="pull-right"
piece={this.props.content} piece={this.props.content}
handleSuccess={this.handleSubmitPrizeSuccess}/> handleSuccess={this.handleSubmitPrizeSuccess}/>
</AclProxy> </AclProxy>
<AclProxy <AclProxy
show={this.props.content.prize}> show={this.props.content.prize}>
<button <button
disabled disabled
className="btn btn-default btn-xs pull-right"> className="btn btn-default btn-xs pull-right">
{getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok" {getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
aria-hidden="true"></span> aria-hidden="true"></span>
</button> </button>
</AclProxy> </AclProxy>
{this.getLicences()} {this.getLicences()}
</div> </div>
</FlowType>
</div> </div>
<span style={{'clear': 'both'}}></span> <span style={{'clear': 'both'}}></span>

19
js/components/ascribe_detail/detail_property.js
View File

@ -11,26 +11,35 @@ let DetailProperty = React.createClass({
]), ]),
separator: React.PropTypes.string, separator: React.PropTypes.string,
labelClassName: React.PropTypes.string, labelClassName: React.PropTypes.string,
valueClassName: React.PropTypes.string valueClassName: React.PropTypes.string,
breakWord: React.PropTypes.bool
}, },
getDefaultProps() { getDefaultProps() {
return { return {
separator: ':', separator: ':',
labelClassName: 'col-xs-3 col-sm-4 col-md-3 col-lg-3', labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2',
valueClassName: 'col-xs-9 col-sm-8 col-md-9 col-lg-9' valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10'
}; };
}, },
render() { render() {
let value = this.props.value; let value = this.props.value;
let style;
if(this.props.breakWord) {
style = {
wordBreak: 'break-all'
};
}
if (this.props.children){ if (this.props.children){
value = ( value = (
<div className="row-same-height"> <div className="row-same-height">
<div className="col-xs-6 col-xs-height col-bottom no-padding"> <div className="col-xs-6 col-xs-height col-bottom no-padding">
{ this.props.value } { this.props.value }
</div> </div>
<div className="col-xs-6 col-xs-height"> <div className="col-xs-6 col-xs-height" style={style}>
{ this.props.children } { this.props.children }
</div> </div>
</div>); </div>);
@ -41,7 +50,7 @@ let DetailProperty = React.createClass({
<div className={this.props.labelClassName + ' col-xs-height col-bottom ascribe-detail-property-label'}> <div className={this.props.labelClassName + ' col-xs-height col-bottom ascribe-detail-property-label'}>
{ this.props.label + this.props.separator} { this.props.label + this.props.separator}
</div> </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} {value}
</div> </div>
</div> </div>

3
js/components/ascribe_detail/edition.js
View File

@ -98,7 +98,8 @@ let Edition = React.createClass({
</Col> </Col>
<Col md={6} className="ascribe-edition-details"> <Col md={6} className="ascribe-edition-details">
<div className="ascribe-detail-header"> <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="BY" value={this.props.edition.artist_name} />
<EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } /> <EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } />
<hr/> <hr/>

3
js/components/ascribe_detail/piece.js
View File

@ -131,7 +131,8 @@ let Piece = React.createClass({
</Col> </Col>
<Col md={6} className="ascribe-edition-details"> <Col md={6} className="ascribe-edition-details">
<div className="ascribe-detail-header"> <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="BY" value={this.props.piece.artist_name} />
<EditionDetailProperty label="DATE" value={ this.props.piece.date_created.slice(0, 4) } /> <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} {this.props.piece.num_editions > 0 ? <EditionDetailProperty label="EDITIONS" value={ this.props.piece.num_editions } /> : null}

2
js/components/whitelabel/prize/routes.js
View File

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

3
sass/ascribe_accordion_list.scss
View File

@ -48,6 +48,9 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
margin: .1em 0 .1em 0; margin: .1em 0 .1em 0;
font-size: 2.2em; font-size: 2.2em;
cursor: pointer; cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
h3 { h3 {
font-size: 1.3em; font-size: 1.3em;

7
sass/main.scss
View File

@ -215,7 +215,8 @@ hr {
.ascribe-detail-title { .ascribe-detail-title {
font-size: 2em; font-size: 2em;
margin-bottom: -0.2em; font-weight: bold;
margin-top: 0;
} }
.ascribe-detail-property { .ascribe-detail-property {
@ -227,8 +228,8 @@ hr {
} }
.ascribe-detail-property-value { .ascribe-detail-property-value {
white-space: nowrap; /* white-space: nowrap;
overflow: hidden; overflow: hidden; */
text-overflow: ellipsis; text-overflow: ellipsis;
} }