From b4f3362aac5adf4568ee9de368c2832431a5195f Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 21 Jun 2017 09:12:14 +1200
Subject: [PATCH] Fixing search input field; Adding explicit tag, fixes #135

---
 src/js/components/ContextMenu.js |  7 +++---
 src/js/components/SearchForm.js  |  4 +++-
 src/js/components/Sidebar.js     | 37 ++++++++++++++++++++------------
 src/js/components/Track.js       | 22 ++++++++++---------
 src/js/views/Artist.js           |  1 -
 src/scss/components/_header.scss |  4 ++--
 src/scss/components/_lists.scss  |  2 ++
 src/scss/global/_core.scss       | 19 +++++++++++-----
 src/scss/views/_artist.scss      |  1 -
 src/scss/views/_discover.scss    |  8 +++++--
 src/scss/views/_search.scss      |  4 ++--
 11 files changed, 68 insertions(+), 41 deletions(-)

diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index 1df605f8..e351e4dd 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -453,9 +453,9 @@ class ContextMenu extends React.Component{
 						{play_uris}
 						{play_uris_next}
 						{add_to_queue}
-						{this.canBeInLibrary() ? toggle_in_library : null}
 						{go_to_artist}
 						{copy_uris}
+						{this.canBeInLibrary() ? toggle_in_library : null}
 					</div>
 				)
 				break
@@ -464,9 +464,9 @@ class ContextMenu extends React.Component{
 				return (
 					<div>
 						{start_radio}
-						{this.canBeInLibrary() ? toggle_in_library : null}
 						{context.source == 'spotify' ? go_to_recommendations : null}
 						{copy_uris}
+						{this.canBeInLibrary() ? toggle_in_library : null}
 					</div>
 				)
 				break
@@ -475,9 +475,9 @@ class ContextMenu extends React.Component{
 				return (
 					<div>
 						{play_playlist}
-						{this.canBeInLibrary() ? toggle_in_library : null}
 						{context.source == 'spotify' ? go_to_user : null}
 						{copy_uris}
+						{this.canBeInLibrary() ? toggle_in_library : null}
 					</div>
 				)
 				break
@@ -487,6 +487,7 @@ class ContextMenu extends React.Component{
 					<div>
 						{play_queue_item}
 						{add_to_playlist}
+						{context.source == 'spotify' ? go_to_recommendations : null}
 						{copy_uris}
 						{remove_from_queue}
 					</div>
diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js
index 446c0bdb..91830b02 100755
--- a/src/js/components/SearchForm.js
+++ b/src/js/components/SearchForm.js
@@ -19,7 +19,9 @@ class SearchForm extends React.Component{
 	}
 
 	componentDidMount(){
-		this.setState({query: this.props.query})
+		if (this.props.query){
+			this.setState({query: this.props.query})
+		}
 	}
 
 	componentWillReceiveProps(newProps){
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 2442e698..c3f0ddd0 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
+import { Link, withRouter } from 'react-router'
 
 import Icon from './Icon'
 import Dropzones from './Dropzones'
@@ -17,6 +17,14 @@ class Sidebar extends React.Component{
 		super(props)
 	}
 
+	linkClassName(link){
+		if (this.props.location.pathname.startsWith('/'+link)){
+			return 'active'
+		} else {
+			return null
+		}
+	}
+
 	render(){
 		return (
 			<aside>
@@ -24,11 +32,11 @@ class Sidebar extends React.Component{
 		        	<nav>
 
 		        		<section>
-							<Link activeClassName="active" to={global.baseURL+"queue"}>
+							<Link className={this.linkClassName('queue')} to={global.baseURL+"queue"}>
 								<Icon name="play" />
 								Now playing
 							</Link>
-							<Link activeClassName="active" to={global.baseURL+"search"}>
+							<Link className={this.linkClassName('search')} to={global.baseURL+"search"}>
 								<Icon name="search" />
 								Search
 							</Link>
@@ -36,19 +44,19 @@ class Sidebar extends React.Component{
 
 						<section>
 							<title>Discover</title>
-							<Link activeClassName="active" to={global.baseURL+"discover/recommendations"}>
+							<Link className={this.linkClassName('discover/recommendations')} to={global.baseURL+"discover/recommendations"}>
 								<Icon name="compass" />
 								Discover
 							</Link>
-							<Link activeClassName="active" to={global.baseURL+"discover/categories"}>
+							<Link className={this.linkClassName('discover/categories')} to={global.baseURL+"discover/categories"}>
 								<Icon name="grid" />
 								Genre / Mood
 							</Link>
-							<Link activeClassName="active" to={global.baseURL+"discover/featured"}>
+							<Link className={this.linkClassName('discover/featured')} to={global.baseURL+"discover/featured"}>
 								<Icon name="star" />
 								Featured playlists
 							</Link>
-							<Link activeClassName="active" to={global.baseURL+"discover/new-releases"}>
+							<Link className={this.linkClassName('discover/new-releases')} to={global.baseURL+"discover/new-releases"}>
 								<Icon name="leaf" />
 								New releases
 							</Link>
@@ -56,30 +64,30 @@ class Sidebar extends React.Component{
 
 						<section>
 							<title>My Music</title>
-							<Link activeClassName="active" to={global.baseURL+"library/playlists"}>
+							<Link className={this.linkClassName('library/playlists')} to={global.baseURL+"library/playlists"}>
 								<Icon name="playlist" />
 								Playlists
 							</Link>
-							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
+							<Link className={this.linkClassName('library/artists')} disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
 								<Icon name="mic" />
 								Artists
 							</Link>
-							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
+							<Link className={this.linkClassName('library/albums')} disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
 								<Icon name="cd" />
 								Albums
 							</Link>
-							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
+							<Link className={this.linkClassName('library/tracks')} disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
 								<Icon name="music" />
 								Tracks
 							</Link>
-							<Link activeClassName="active" to={global.baseURL+"library/local"}>
+							<Link className={this.linkClassName('library/local')} to={global.baseURL+"library/local"}>
 								<Icon name="folder" />
 								Local
 							</Link>
 						</section>
 
 						<section>
-							<Link activeClassName="active" to={global.baseURL+"settings"}>
+							<Link className={this.linkClassName('settings')} to={global.baseURL+"settings"}>
 								<Icon name="cog" />
 								Settings
 								{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
@@ -119,4 +127,5 @@ const mapDispatchToProps = (dispatch) => {
 	}
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Sidebar)
\ No newline at end of file
+// We wrap our Sidebar with the Router, and then to the redux store
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Sidebar))
\ No newline at end of file
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 20d6d7e9..c4b2e27f 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -55,13 +55,13 @@ export default class Track extends React.Component{
 			var track_columns = (
 				<span>
 					<span className="col name">
-						{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
+						{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
 					</span>
 					<span className="col source">
 						{helpers.uriSource(track.uri)}
 					</span>
 					<span className="col played_at">
-						{ track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : null }
+						{track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : null}
 					</span>
 				</span>
 			)
@@ -87,11 +87,12 @@ export default class Track extends React.Component{
 				var track_columns = (
 					<span>
 						<span className="col name">
-							{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
+							{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
+							{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
 						</span>
 						{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(track.uri)} className="source" fixedWidth /> : null}
 						<span className="col artists">
-							{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }
+							{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
 						</span>
 						<span className="col album">
 							{album}
@@ -100,8 +101,8 @@ export default class Track extends React.Component{
 							{added}
 						</span>
 						<span className="col duration">
-							{ track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null }
-							{ track.length ? <Dater type="length" data={track.length} /> : null }
+							{track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null}
+							{track.length ? <Dater type="length" data={track.length} /> : null}
 						</span>
 					</span>
 				)
@@ -111,18 +112,19 @@ export default class Track extends React.Component{
 			var track_columns = (
 				<span>
 					<span className="col name">
-						{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
+						{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
+						{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
 					</span>
 					{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(track.uri)} className="source" fixedWidth /> : null}
 					<span className="col artists">
-						{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }
+						{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
 					</span>
 					<span className="col album">
 						{album}
 					</span>
 					<span className="col duration">
-						{ track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null }
-						{ track.length ? <Dater type="length" data={track.length} /> : null }
+						{track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null}
+						{track.length ? <Dater type="length" data={track.length} /> : null}
 					</span>
 				</span>
 			)
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 93875cda..021feef7 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -149,7 +149,6 @@ class Artist extends React.Component{
 						</div>
 
 						<div className="col w60 biography">
-							<h4>Biography</h4>
 							<section>
 								{ this.props.artist.bio ? <div className="biography-text"><p>{this.props.artist.bio.content}</p><br />
 								<div className="grey-text">Published: { this.props.artist.bio.published }</div>
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index a0cfb01e..ee242f9b 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -12,9 +12,9 @@ main {
 		.icon {
 			display: inline-block;
 			padding-right: 14px;
-			height: 3rem;
+			height: 2.6rem;
 			vertical-align: bottom;
-			margin-bottom: 10px;
+			margin-bottom: 5px;
 		}
 
 		.options {
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index a397db40..b113a5c5 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -180,6 +180,8 @@
 	}
 
 	&.related-artist-list {
+		padding-bottom: 20px;
+		
 		.artist {
 			display: block;
 			border: 0;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 8f8baf9b..7c905a50 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -81,8 +81,8 @@ main {
 h1 {
 	@include feature_font();
 	font-weight: 800;
-	font-size: 4rem;
-	line-height: 4rem;
+	font-size: 3rem;
+	line-height: 3rem;
 }
 
 h2 {
@@ -263,15 +263,24 @@ footer {
 }
 
 .flag {
-	font-size: 12px;
+	font-size: 9px;
+	font-weight: bold;
 	display: inline-block;
-	padding: 2px 4px;
+	padding: 2px 5px;
 	background: $light_grey;
 	color: $dark_grey;
+	border-radius: 3px;
+	vertical-align: bottom;
+	margin: 0 8px 1px;
 
 	&.blue {
 		background: $blue;
-		color: #FFFFFF;
+		color: $white;
+	}
+
+	&.dark {
+		background: $dark_grey;
+		color: $white;
 	}
 }
 
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index 37334137..0ea2dfed 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -71,7 +71,6 @@
 
 	.body.about {		
 		@include clearfix();
-		padding: 0 40px 40px 40px;
 
 		.biography {
 			padding-left: 40px;
diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss
index e09f9650..d5238acd 100755
--- a/src/scss/views/_discover.scss
+++ b/src/scss/views/_discover.scss
@@ -3,7 +3,7 @@
 	
 	.intro {
 		position: relative;
-		padding: 160px 40px 80px 40px;
+		padding: 200px 40px 80px 40px;
 		z-index: 1;
 
 		.parallax {
@@ -110,7 +110,11 @@
 .discover-new-releases-view {
 	.intro {
 		position: relative;
-		padding-top: 80px;
+		padding-top: 130px;
+
+		header {
+			margin-bottom: 0;
+		}
 
 		.parallax {
 			position: absolute;
diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss
index 20a33f52..27f051b7 100755
--- a/src/scss/views/_search.scss
+++ b/src/scss/views/_search.scss
@@ -7,9 +7,9 @@
 		input {
 			@include feature_font();
 			padding: 0;
-			font-size: 4rem;
+			font-size: 3rem;
 			font-weight: 700;
-			height: 4rem;
+			height: 3rem;
 			background: transparent;
 		}
 	}