diff --git a/src/js/services/lastfm/actions.js b/src/js/services/lastfm/actions.js index b83c0590..ca43ba06 100755 --- a/src/js/services/lastfm/actions.js +++ b/src/js/services/lastfm/actions.js @@ -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 } }); } diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index 4f96880f..7e7ac218 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -132,12 +132,12 @@ class Artist extends React.Component{ ) }else if( this.state.sub_view == 'about' ){ return ( -
+
- {this.props.artist.followers ?
{this.props.artist.followers.total.toLocaleString() } followers
: null} - {this.props.artist.popularity ?
{this.props.artist.popularity }% popularity
: null} - {this.props.artist.listeners ?
{ this.props.artist.listeners.toLocaleString() } listeners
: null } + {this.props.artist.followers ?
{this.props.artist.followers.total.toLocaleString() } followers
: null} + {this.props.artist.popularity ?
{this.props.artist.popularity }% popularity
: null} + {this.props.artist.listeners ?
{ this.props.artist.listeners.toLocaleString() } listeners
: null }
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss index 935bee27..7e3544fc 100755 --- a/src/scss/components/_images.scss +++ b/src/scss/components/_images.scss @@ -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; + } + } + } } } \ No newline at end of file diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index 6c7114f1..01747dfe 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -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; + } + } } } }