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

Polishing artist disc; About artist tiles

Browse Source
This commit is contained in:
James Barnsley
2017-02-08 19:31:36 +13:00
parent d08a054748
commit 1239895e88
5 changed files with 69 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,24 +132,22 @@ class Artist extends React.Component{
)
}else if( this.state.sub_view == 'about' ){
return (
<div className="body about">
<h4 className="left-padding">Biography</h4>
<div className="body about row">
<ul className="details">
<li>
{ this.props.artist.followers ? <span>{ this.props.artist.followers.total.toLocaleString() } followers,&nbsp;</span> : null }
{ this.props.artist.popularity ? <span>{ this.props.artist.popularity }% popularity</span> : null }
{ this.props.artist.listeners && scheme == 'local' ? <span>{ this.props.artist.listeners.toLocaleString() } listeners</span> : null }
</li>
{ scheme == 'spotify' ? <li><FontAwesome name='spotify' /> Spotify artist</li> : null }
{ scheme == 'local' ? <li><FontAwesome name='folder' /> Local artist</li> : null }
</ul>
<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 }
</div>
<section className="text-wrapper no-top-padding">
{ this.props.artist.bio ? <div><p>{this.props.artist.bio.content}</p><br />
<div className="grey-text">Published: { this.props.artist.bio.published }</div>
<div className="grey-text">Origin: <a href={ this.props.artist.bio.links.link.href } target="_blank">{ this.props.artist.bio.links.link.href }</a></div></div> : null }
</section>
<div className="col w60 biography">
<h4 className="left-padding">Biography</h4>
<section className="text-wrapper no-top-padding">
{ this.props.artist.bio ? <div><p>{this.props.artist.bio.content}</p><br />
<div className="grey-text">Published: { this.props.artist.bio.published }</div>
<div className="grey-text">Origin: <a href={ this.props.artist.bio.links.link.href } target="_blank">{ this.props.artist.bio.links.link.href }</a></div></div> : null }
</section>
</div>
</div>
)
}
@ -195,10 +193,7 @@ class Artist extends React.Component{
<div className="liner">
<Thumbnail image={image} circle />
<h1>{ this.props.artist.name }</h1>
<div className="actions">
{ scheme == 'spotify' ? <button className="primary rounded" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : null }
{ scheme == 'spotify' ? <FollowButton className="outline rounded white" uri={this.props.params.uri} removeText="Unfollow" addText="Follow" is_following={this.props.artist.is_following} /> : null }
</div>
{ scheme == 'spotify' ? <div className="actions"><button className="primary rounded" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button><FollowButton className="outline rounded white" uri={this.props.params.uri} removeText="Unfollow" addText="Follow" is_following={this.props.artist.is_following} /></div> : null}
{ this.renderSubViewMenu() }
</div>
</div>

15
src/scss/components/_grid.scss
View File

@ -1,19 +1,4 @@
@mixin grid_item( $cols, $gap: 2% ){
width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
box-sizing: border-box;
margin: 0 $gap 3%;
&:nth-child(#{$cols}n-#{$cols}) {
margin-right: 0;
@include clearfix;
}
&:nth-child(#{$cols}n-#{$cols - 1}) {
margin-left: 0;
}
}
.grid {
.grid-item-wrapper {

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

@ -66,4 +66,34 @@
opacity: 0.5;
}
}
}
.tile {
@include grid_item( 2 );
color: $dark_grey;
text-align: center;
position: relative;
z-index: 1;
float: left;
padding-top: 16%;
font-size: 16px;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
padding-bottom: 100%;
background: $light_grey;
z-index: -1;
}
.fa {
display: block;
font-size: 40px;
opacity: 0.2;
z-index: 0;
padding-bottom: 10px;
}
}

15
src/scss/global/_variables.scss
View File

@ -66,6 +66,21 @@ $bp_shallow: 650px;
filter: blur( $size );
}
@mixin grid_item( $cols, $gap: 2% ){
width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
box-sizing: border-box;
margin: 0 $gap 3%;
&:nth-child(#{$cols}n-#{$cols}) {
margin-right: 0;
@include clearfix;
}
&:nth-child(#{$cols}n-#{$cols - 1}) {
margin-left: 0;
}
}
@mixin responsive( $max_width: null, $min_width: null, $max_height: null, $min_height: null ){
@if $max_width and $max_height {
@media( max-width: $max_width ), ( max-height: $max_height ){

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

@ -2,7 +2,7 @@
.artist-view {
.intro {
position: relative;
@include clearfix;
@include clearfix();
margin-bottom: 40px;
.parallax {
@ -18,13 +18,13 @@
.liner {
position: relative;
z-index: 1;
padding: 20vh 40px 0 40px;
padding: 20vh 40px 0 220px;
.thumbnail {
position: relative;
position: absolute;
z-index: 2;
float: left;
margin-right: 35px;
left: 40px;
bottom: 20px;
max-width: 144px;
}
@ -43,12 +43,11 @@
.sub-views {
color: #FFFFFF;
margin-left: -12px;
.option {
display: inline-block;
padding: 8px 0;
margin: 0 12px 0;
margin-right: 15px;
font-size: 18px;
font-weight: 400;
border-bottom: 4px solid transparent;
@ -67,8 +66,8 @@
}
.artist-list {
padding-top: 15px;
.body.about {
padding: 0 40px 40px 40px;
}
@include responsive( $bp_medium ){
@ -80,6 +79,7 @@
padding-top: 10vh;
.thumbnail {
position: static;
float: none;
margin: 0 auto 20px;
max-width: 100px;