scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #114 from mewtaylor/issue/103-truncate-thumb-username

Browse source 
use ellipsis if text overflows
This commit is contained in:
Matthew Taylor 2015-10-21 16:22:54 -04:00
commit 1c567574d5
2 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/thumbnail/thumbnail.jsx
View file

@ -26,21 +26,31 @@ var Thumbnail = React.createClass({
);
var extra = [];
if (this.props.creator) {
extra.push(<div key="creator" className="thumbnail-creator">by {this.props.creator}</div>);
extra.push(
<div key="creator" className="thumbnail-creator">
by <a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
</div>
);
}
if (this.props.loves && this.props.showLoves) {
extra.push(
<div key="loves" className="thumbnail-loves"
title={this.props.loves + ' loves'}>
{this.props.loves}
<div
key="loves"
className="thumbnail-loves"
title={this.props.loves + ' loves'}>
{this.props.loves}
</div>
);
}
if (this.props.remixes && this.props.showRemixes) {
extra.push(
<div key="remixes" className="thumbnail-remixes"
title={this.props.remixes + ' remixes'}>
{this.props.remixes}
<div
key="remixes"
className="thumbnail-remixes"
title={this.props.remixes + ' remixes'}>
{this.props.remixes}
</div>
);
}
@ -49,7 +59,9 @@ var Thumbnail = React.createClass({
<a className="thumbnail-image" href={this.props.href}>
<img src={this.props.src} />
</a>
<div className="thumbnail-title"><a href={this.props.href}>{this.props.title}</a></div>
<div className="thumbnail-title">
<a href={this.props.href}>{this.props.title}</a>
</div>
{extra}
</div>
);

12
src/components/thumbnail/thumbnail.scss
View file

@ -16,12 +16,6 @@
#{$extras} {
line-height: normal;
word-wrap: break-word;
}
.thumbnail-title {
margin-bottom: 1px;
font-size: .9230em;
font-weight: 800;
a {
display: block;
@ -31,6 +25,12 @@
}
}
.thumbnail-title {
margin-bottom: 1px;
font-size: .9230em;
font-weight: 800;
}
#{$extras} {
color: $type-gray;
font-size: .8462em;