LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Streamline featured content styles; spacing tweaks

Browse source
This commit is contained in:
Alex Liebowitz 2016-05-20 06:01:17 -04:00
parent f16d9f044b
commit be74a51d9f
1 changed files with 18 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
js/page/home.js
View file

@ -118,25 +118,20 @@ var SearchResultRow = React.createClass({
var featuredContentItemStyle = { var featuredContentItemStyle = {
fontSize: '0.95em', fontSize: '0.95em',
marginBottom: '10px', marginBottom: '10px',
}, featuredContentItemInfoColumnStyle = {
position: 'relative',
left: '26px',
}, featuredContentItemImgStyle = { }, featuredContentItemImgStyle = {
maxHeight: '90px', maxHeight: '90px',
display: 'block', display: 'block',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
marginTop: '5px',
float: 'left', float: 'left',
}, featuredContentItemDescriptionStyle = { }, featuredContentItemDescriptionStyle = {
color: '#444', color: '#444',
marginBottom: '5px', marginBottom: '5px',
fontSize: '0.9em', fontSize: '0.9em',
width: '250px',
}, featuredContentItemCostStyle = { }, featuredContentItemCostStyle = {
display: 'block', display: 'block',
float: 'right', float: 'right',
position: 'relative',
left: '-35px',
fontSize: '0.95em', fontSize: '0.95em',
}; };
@ -166,29 +161,27 @@ var FeaturedContentItem = React.createClass({
var metadata = this.state.metadata; var metadata = this.state.metadata;
return (<div className="row-fluid" style={featuredContentItemStyle}> return (
<div className="span3"> <div className="row-fluid" style={featuredContentItemStyle}>
<img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={featuredContentItemImgStyle} /> <div className="span4">
</div> <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={featuredContentItemImgStyle} />
<div className="span9" style={featuredContentItemInfoColumnStyle}>
<h4>{this.state.title}</h4>
<p style={featuredContentItemDescriptionStyle}>{metadata.description}</p>
<div>
<WatchLink streamName={this.props.name} />
{ ' ' }
<DownloadLink streamName={this.props.name} />
<div style={featuredContentItemCostStyle}><CreditAmount amount={0.0} isEstimate={true}/></div>
</div> </div>
</div> <div className="span8">
</div>); <h4>{this.state.title}</h4>
<p style={featuredContentItemDescriptionStyle}>{metadata.description}</p>
<div>
<WatchLink streamName={this.props.name} />
{ ' ' }
<DownloadLink streamName={this.props.name} />
<div style={featuredContentItemCostStyle}><CreditAmount amount={0.0} isEstimate={true}/></div>
</div>
</div>
</div>);
} }
}); });
var featuredContentStyle = { var featuredContentStyle = {
width: '100%', width: '100%',
},
featuredContentColsStyle = {
marginLeft: '0px',
}; };
var FeaturedContent = React.createClass({ var FeaturedContent = React.createClass({
@ -196,12 +189,12 @@ var FeaturedContent = React.createClass({
return (<section style={featuredContentStyle}> return (<section style={featuredContentStyle}>
<h3>Featured content</h3> <h3>Featured content</h3>
<div className="row-fluid"> <div className="row-fluid">
<div className="span6" style={featuredContentColsStyle}> <div className="span6">
<FeaturedContentItem name="wonderfullife" /> {/* When ready, change to one/two/three/four/five/six */} <FeaturedContentItem name="wonderfullife" /> {/* When ready, change to one/two/three/four/five/six */}
<FeaturedContentItem name="wonderfullife" /> <FeaturedContentItem name="wonderfullife" />
<FeaturedContentItem name="wonderfullife" /> <FeaturedContentItem name="wonderfullife" />
</div> </div>
<div className="span6" style={featuredContentColsStyle}> <div className="span6">
<FeaturedContentItem name="wonderfullife" /> <FeaturedContentItem name="wonderfullife" />
<FeaturedContentItem name="wonderfullife" /> <FeaturedContentItem name="wonderfullife" />
<FeaturedContentItem name="wonderfullife" /> <FeaturedContentItem name="wonderfullife" />