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

bold titles, better image sizes, minor rework of homepage

Browse source
This commit is contained in:
Jeremy Kauffman 2016-07-13 21:46:26 -04:00
parent 49eaa25423
commit 5d7f920bc6
1 changed files with 32 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
js/page/home.js
View file

@ -43,30 +43,30 @@ var SearchNoResults = React.createClass({
var SearchResults = React.createClass({ var SearchResults = React.createClass({
render: function() { render: function() {
var rows = []; var rows = [];
console.log('results');
console.log('made it here');
this.props.results.forEach(function(result) { this.props.results.forEach(function(result) {
rows.push( rows.push(
<SearchResultRow name={result.name} title={result.title} imgUrl={result.thumbnail} <SearchResultRow name={result.name} title={result.title} imgUrl={result.thumbnail}
description={result.description} cost_est={result.cost_est} /> description={result.description} cost_est={result.cost_est} />
); );
}); });
console.log(this.props.results);
console.log(rows);
console.log('done');
return ( return (
<section>{rows}</section> <section>{rows}</section>
); );
} }
}); });
var searchRowImgStyle = { var
maxHeight: '100px', searchRowImgStyle = {
maxWidth: '100%',
maxHeight: '250px',
display: 'block', display: 'block',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
float: 'left' float: 'left'
}, },
searchRowTitleStyle = {
fontWeight: 'bold'
},
searchRowCostStyle = { searchRowCostStyle = {
float: 'right', float: 'right',
marginLeft: '20px', marginLeft: '20px',
@ -102,7 +102,7 @@ var SearchResultRow = React.createClass({
<span style={searchRowCostStyle}> <span style={searchRowCostStyle}>
<CreditAmount amount={this.props.cost_est} isEstimate={true}/> <CreditAmount amount={this.props.cost_est} isEstimate={true}/>
</span> </span>
<h2>{this.props.title}</h2> <h2 style={searchRowTitleStyle}>{this.props.title}</h2>
<div style={searchRowNameStyle}>lbry://{this.props.name}</div> <div style={searchRowNameStyle}>lbry://{this.props.name}</div>
<p style={searchRowDescriptionStyle}>{this.props.description}</p> <p style={searchRowDescriptionStyle}>{this.props.description}</p>
<div> <div>
@ -118,23 +118,26 @@ var SearchResultRow = React.createClass({
var featuredContentItemStyle = { var featuredContentItemStyle = {
fontSize: '0.95em', fontSize: '0.95em',
marginTop: '10px', marginTop: '10px',
minHeight: '130px', maxHeight: '220px'
}, featuredContentItemImgStyle = { }, featuredContentItemImgStyle = {
maxHeight: '90px', maxWidth: '100%',
maxWidth: '126px', maxHeight: '100%',
display: 'block', display: 'block',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
marginTop: '5px', marginTop: '5px',
}, featuredContentHeaderStyle = {
fontWeight: 'bold',
marginBottom: '5px'
}, featuredContentSubheaderStyle = {
marginBottom: '10px',
fontSize: '0.9em'
}, featuredContentItemDescriptionStyle = { }, featuredContentItemDescriptionStyle = {
color: '#444', color: '#444',
marginBottom: '5px', marginBottom: '5px',
fontSize: '0.9em', fontSize: '0.9em',
minHeight: '74px',
}, featuredContentItemCostStyle = { }, featuredContentItemCostStyle = {
display: 'block', float: 'right'
float: 'right',
fontSize: '0.95em',
}; };
var FeaturedContentItem = React.createClass({ var FeaturedContentItem = React.createClass({
@ -188,14 +191,14 @@ var FeaturedContentItem = React.createClass({
<img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={thumbStyle} /> <img src={metadata.thumbnail} alt={'Photo for ' + this.state.title} style={thumbStyle} />
</div> </div>
<div className="span8"> <div className="span8">
<h4>{this.state.title}</h4> <h4 style={featuredContentHeaderStyle}>{this.state.title}</h4>
<p style={featuredContentItemDescriptionStyle}>{metadata.description}</p> <div style={featuredContentSubheaderStyle}>
<div>
<WatchLink streamName={this.props.name} />
{ ' ' }
<DownloadLink streamName={this.props.name} />
<div style={featuredContentItemCostStyle}><CreditAmount amount={this.state.amount} isEstimate={true}/></div> <div style={featuredContentItemCostStyle}><CreditAmount amount={this.state.amount} isEstimate={true}/></div>
<WatchLink streamName={this.props.name} />
&nbsp;&nbsp;&nbsp;
<DownloadLink streamName={this.props.name} />
</div> </div>
<p style={featuredContentItemDescriptionStyle}>{metadata.description}</p>
</div> </div>
</div>); </div>);
} }
@ -209,14 +212,20 @@ var featuredContentStyle = {
var FeaturedContent = React.createClass({ var FeaturedContent = React.createClass({
render: function() { render: function() {
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"> <div className="span6">
<FeaturedContentItem name="what" /> <FeaturedContentItem name="what" />
<FeaturedContentItem name="keynesvhayek" />
</div> </div>
<div className="span6"> <div className="span6">
<FeaturedContentItem name="itsadisaster" narrow /> <FeaturedContentItem name="itsadisaster" narrow />
</div>
</div>
<div className="row-fluid">
<div className="span6">
<FeaturedContentItem name="keynesvhayek" />
</div>
<div className="span6">
<FeaturedContentItem name="meetlbry1" /> <FeaturedContentItem name="meetlbry1" />
</div> </div>
</div> </div>