Add "compact" option for search result tiles

This commit is contained in:
Alex Liebowitz 2016-09-22 02:41:03 -04:00
parent 4d34bb1599
commit eefc44cfb2
2 changed files with 32 additions and 4 deletions

View file

@ -55,6 +55,9 @@ var
height: (24 * 7) + 'px',
overflowY: 'hidden'
},
searchRowCompactStyle = {
height: '180px',
},
searchRowImgStyle = {
maxWidth: '100%',
maxHeight: (24 * 7) + 'px',
@ -65,6 +68,10 @@ var
searchRowTitleStyle = {
fontWeight: 'bold'
},
searchRowTitleCompactStyle = {
fontSize: '1.25em',
lineHeight: '1.15',
},
searchRowCostStyle = {
float: 'right',
},
@ -94,9 +101,17 @@ var SearchResultRow = React.createClass({
},
render: function() {
var obscureNsfw = !lbry.getClientSetting('showNsfw') && this.props.nsfw;
if (!this.props.compact) {
var style = searchRowStyle;
var titleStyle = searchRowTitleStyle;
} else {
var style = Object.assign({}, searchRowStyle, searchRowCompactStyle);
var titleStyle = Object.assign({}, searchRowTitleStyle, searchRowTitleCompactStyle);
}
return (
<section className={ 'card ' + (obscureNsfw ? 'card-obscured' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<div className="row-fluid card-content" style={searchRowStyle}>
<section className={ 'card ' + (obscureNsfw ? 'card-obscured ' : '') + (this.props.compact ? 'card-compact' : '')} onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<div className="row-fluid card-content" style={style}>
<div className="span3">
<a href={'/?show=' + this.props.name}><img src={this.props.imgUrl || '/img/default-thumb.svg'} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} /></a>
</div>
@ -105,12 +120,22 @@ var SearchResultRow = React.createClass({
<CreditAmount amount={this.props.cost} isEstimate={!this.props.available}/>
</span>
<div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
<h3 style={searchRowTitleStyle}><a href={'/?show=' + this.props.name}>{this.props.title}</a></h3>
<h3 style={titleStyle}>
<a href={'/?show=' + this.props.name}>
<TruncatedText {...this.props.compact ? {limit: 50} : {}}>
{this.props.title}
</TruncatedText>
</a>
</h3>
<div>
{this.props.mediaType == 'video' ? <WatchLink streamName={this.props.name} button="primary" /> : null}
<DownloadLink streamName={this.props.name} button="text" />
</div>
<p style={searchRowDescriptionStyle}>{this.props.description}</p>
<p style={searchRowDescriptionStyle}>
<TruncatedText {... this.props.compact ? {limit: 123} : {}}>
{this.props.description}
</TruncatedText>
</p>
</div>
</div>
{

View file

@ -206,6 +206,9 @@ $header-icon-size: 1.5em;
box-shadow: $default-box-shadow;
border-radius: 2px;
}
.card-compact {
padding: 22px;
}
.card-obscured
{
position: relative;