jonathan/combine.fm
jonathan/combine.fm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Improve album artwork, loading animation

Browse source
This commit is contained in:
Jonathan Cremin 2015-01-10 19:39:54 +00:00
parent c56e66e12b
commit 195e116670
4 changed files with 55 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
views/home.jsx
View file

@ -31,7 +31,9 @@ var RecentItem = React.createClass({
}
return (
<div className="col-sm-4 col-xs-6">
<Link to="share" params={this.props.item}><img src={this.props.item.artwork.small} width="100%" /></Link>
<Link to="share" params={this.props.item}>
<div className="artwork" style={{backgroundImage: "url("+this.props.item.artwork.small+")"}}></div>
</Link>
</div>
);
}

14
views/share.jsx
View file

@ -13,8 +13,11 @@ var MusicItem = React.createClass({
return (
<div className="col-md-3 col-xs-6">
<div className="service">
<img src="/images/grid.svg" className="loading" />
<img src={this.props.items[0].artwork.small} className="img-rounded album-artwork incomplete" width="100%" />
<div className="artwork" style={{backgroundImage: "url("+this.props.items[0].artwork.small+")"}}>
</div>
<div className="loading-wrap">
<img src="/images/eq.svg" className="loading" />
</div>
<div className="service-link">
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
</div>
@ -25,8 +28,8 @@ var MusicItem = React.createClass({
return (
<div className="col-md-3 col-xs-6">
<div className="service">
<img src={this.props.items[0].artwork.small} className="img-rounded album-artwork not-found" width="100%" />
<div className="service-link">
<div className="artwork not-found" style={{backgroundImage: "url("+this.props.items[0].artwork.small+")"}}></div>
<div className="service-link not-found">
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />
</div>
</div>
@ -38,7 +41,8 @@ var MusicItem = React.createClass({
<div className={"service" + (this.props.inc == 0 ? " source-service" : "")}>
<div className="matching-from hidden-xs">{this.props.inc == 0 ? "Found matches using this link": ""}</div>
<a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
<img src={this.props.item.artwork.small} className="img-rounded album-artwork" width="100%" /></a>
<div className="artwork" style={{backgroundImage: "url("+this.props.item.artwork.small+")"}}></div>
</a>
<div className="service-link">
<a href={this.props.item.streamUrl || this.props.item.purchaseUrl}>
<img src={"/images/" + this.props.item.service + ".png"} className="img-rounded" />