Add "compact" option for search result tiles
This commit is contained in:
parent
4d34bb1599
commit
eefc44cfb2
2 changed files with 32 additions and 4 deletions
|
@ -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>
|
||||
{
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue