secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

About tiles

Browse Source
This commit is contained in:
James Barnsley
2017-02-08 20:05:37 +13:00
parent 1239895e88
commit 8891bb0a8e
4 changed files with 80 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/services/lastfm/actions.js
View File

@ -44,7 +44,10 @@ export function getArtist( uri, artist, mbid = false ){
key: uri,
artist: {
images: response.artist.image,
bio: response.artist.bio
bio: response.artist.bio,
listeners: parseInt(response.artist.stats.listeners),
play_count: parseInt(response.artist.stats.playcount),
on_tour: response.artist.stats.ontour
}
});
}

8
src/js/views/Artist.js
View File

@ -132,12 +132,12 @@ class Artist extends React.Component{
)
}else if( this.state.sub_view == 'about' ){
return (
<div className="body about row">
<div className="body about">
<div className="col w40 tiles">
{this.props.artist.followers ? <div className="tile"><FontAwesome name="users" />{this.props.artist.followers.total.toLocaleString() } followers</div> : null}
{this.props.artist.popularity ? <div className="tile"><FontAwesome name="fire" />{this.props.artist.popularity }% popularity</div> : null}
{this.props.artist.listeners ? <div className="tile"><FontAwesome name="headphones" />{ this.props.artist.listeners.toLocaleString() } listeners</div> : null }
{this.props.artist.followers ? <div className="tile"><span className="text"><FontAwesome name="users" />{this.props.artist.followers.total.toLocaleString() } followers</span></div> : null}
{this.props.artist.popularity ? <div className="tile"><span className="text"><FontAwesome name="fire" />{this.props.artist.popularity }% popularity</span></div> : null}
{this.props.artist.listeners ? <div className="tile"><span className="text"><FontAwesome name="headphones" />{ this.props.artist.listeners.toLocaleString() } listeners</span></div> : null }
</div>
<div className="col w60 biography">

85
src/scss/components/_images.scss
View File

@ -68,32 +68,67 @@
}
}
.tile {
@include grid_item( 2 );
color: $dark_grey;
text-align: center;
position: relative;
z-index: 1;
float: left;
padding-top: 16%;
font-size: 16px;
.tiles {
padding-bottom: 60px;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
padding-bottom: 100%;
background: $light_grey;
z-index: -1;
}
.tile {
color: $dark_grey;
text-align: center;
position: relative;
z-index: 1;
float: left;
overflow: hidden;
.fa {
display: block;
font-size: 40px;
opacity: 0.2;
z-index: 0;
padding-bottom: 10px;
.text {
display: block;
position: absolute;
top: 50%;
left: 10%;
right: 10%;
vertical-align: top;
margin-top: -12px;
font-size: 16px;
z-index: 2;
.fa {
display: block;
position: absolute;
top: 50%;
left: 10%;
right: 10%;
text-align: center;
margin-top: -27px;
font-size: 60px;
z-index: -1;
color: $faint_grey;
}
}
&:before {
content: '';
display: block;
width: 100%;
padding-bottom: 100%;
background: $light_grey;
z-index: -2;
}
@include responsive( null, $bp_medium ){
@include grid_item( 2 );
}
@include responsive( $bp_medium ){
@include grid_item( 3 );
}
@include responsive( $bp_narrow ){
.text {
font-size: 14px;
.fa {
font-size: 28px;
margin-top: -12px;
}
}
}
}
}

14
src/scss/views/_artist.scss
View File

@ -47,7 +47,7 @@
.option {
display: inline-block;
padding: 8px 0;
margin-right: 15px;
margin-right: 25px;
font-size: 18px;
font-weight: 400;
border-bottom: 4px solid transparent;
@ -66,7 +66,8 @@
}
.body.about {
.body.about {
@include clearfix();
padding: 0 40px 40px 40px;
}
@ -104,6 +105,15 @@
display: none;
}
}
&.about {
.col.w40,
.col.w60 {
@include clearfix();
width: 100%;
float: none;
}
}
}
}
}