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

22
public/images/eq.svg Normal file
View file

@ -0,0 +1,22 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="5" width="4" height="20" fill="#FE4365">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0s" dur="0.45s" repeatCount="indefinite" />
</rect>
<rect x="10" y="5" width="4" height="20" fill="#FE4365">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0.15s" dur="0.45s" repeatCount="indefinite" />
</rect>
<rect x="20" y="5" width="4" height="20" fill="#FE4365">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0.3s" dur="0.45s" repeatCount="indefinite" />
</rect>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 979 B

26
public/stylesheets/style.css
View file

@ -134,17 +134,33 @@ h3 {
border-radius: 5px; border-radius: 5px;
background: #eee; background: #eee;
} }
.album-artwork {
.artwork {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
margin-bottom: 10px; margin-bottom: 10px;
background-repeat: none;
background-size: cover;
border-radius: 5px;
} }
.not-found { .not-found {
opacity: 0.3; opacity: 0.2;
}
.loading-wrap {
position: absolute;
top: 0;left: 0;
background: #fff;
height: 100%;
width: 100%;
opacity: 0.8;
} }
.loading { .loading {
position: absolute; position: absolute;
top: 33%; top: 35%;
left: 33%; left: 40%;
width: 33%; width: 20%;
} }
.service-link { .service-link {
text-align: center; text-align: center;

4
views/home.jsx
View file

@ -31,7 +31,9 @@ var RecentItem = React.createClass({
} }
return ( return (
<div className="col-sm-4 col-xs-6"> <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> </div>
); );
} }

14
views/share.jsx
View file

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