Making seeds look and feel prettier

src/js/views/discover/DiscoverRecommendations.js

@@ -10,6 +10,7 @@ import ArtistSentence from '../../components/ArtistSentence'
 import ArtistGrid from '../../components/ArtistGrid'
 import AlbumGrid from '../../components/AlbumGrid'
 import TrackList from '../../components/TrackList'
+import Thumbnail from '../../components/Thumbnail'
 import Parallax from '../../components/Parallax'
 import DropdownField from '../../components/DropdownField'
 import AddSeedField from '../../components/AddSeedField'
@@ -270,7 +271,7 @@ class Discover extends React.Component{
 
 					case 'track':
 						if (typeof(this.props.tracks[uri]) !== 'undefined'){
-							seeds_objects.push(this.props.tracks[uri])
+							seeds_objects.push(this.props.tracks[uri]);
 						} else {
 							seeds_objects.push({
 								name: 'Loading...',
@@ -281,7 +282,7 @@ class Discover extends React.Component{
 
 					case 'artist':
 						if (typeof(this.props.artists[uri]) !== 'undefined'){
-							seeds_objects.push(this.props.artists[uri])
+							seeds_objects.push(this.props.artists[uri]);
 						} else {
 							seeds_objects.push({
 								name: 'Loading...',
@@ -307,15 +308,17 @@ class Discover extends React.Component{
 					seeds_objects.map((seed,index) => {
 						var type = helpers.uriType(seed.uri)
 						return (
-							<span className="seed" key={seed.uri}>
-								{seed.name}
-								<URILink className="type" type={type} uri={seed.uri}>({type})</URILink>
-								<FontAwesome name="close" className="remove" onClick={() => this.removeSeed(index)} />
-							</span>
+							<div className={"seed"+(seed.images ? " has-thumbnail" : "")} key={seed.uri}>
+								{seed.images ? <URILink className="thumbnail-wrapper" type={type} uri={seed.uri}><Thumbnail images={seed.images} circle={seed.type == "artist"} size="small" /></URILink> : null}
+								<div className="label">
+									{helpers.titleCase(type)}
+									<FontAwesome name="close" className="remove" onClick={() => this.removeSeed(index)} />
+								</div>
+								<div className="name">{seed.name}</div>
+							</div>
 						)
 					})
 				}
-				<AddSeedField onSelect={(e,uri) => this.handleSelect(e,uri)} />
 			</div>
 		)
 	}
@@ -382,7 +385,6 @@ class Discover extends React.Component{
 						);
 					})
 				}
-				<DropdownField name="Add" options={addable_tunabilities} no_status_icon button="alternative" handleChange={val => {this.toggleTunability(val)}} />
 			</div>
 		);
 	}
@@ -506,8 +508,15 @@ class Discover extends React.Component{
 							Add seeds and musical properties below to build your sound
 						</h2>
 						<div className="parameters">
+
 							{this.renderSeeds()}
 							{this.renderTunabilities()}
+
+							<div className="add">
+								<AddSeedField onSelect={(e,uri) => this.handleSelect(e,uri)} />
+								<DropdownField className="add-properties" name="Properties" options={addable_tunabilities} no_status_icon button="alternative" handleChange={val => {this.toggleTunability(val)}} />
+							</div>
+
 						</div>
 						<div className="actions">
 							<span className={"button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>

src/scss/views/_discover.scss

@@ -32,40 +32,60 @@
 	}
 
 	.parameters {
-		padding-top: 30px;
+		@include clearfix();
+		padding-top: 50px;
 
 		.seeds,
 		.tunabilities {
-			display: inline-block;
+			float: left;
+		}
+
+		.add {
+			clear: both;
+			padding-top: 30px;
+
+			.add-seed-field {
+				margin-right: 20px;
+			}
 		}
 	}
 
 	.seeds {
 		.seed {
-			display: inline-block;
-			background: $blue;
-			color: $white;
-			padding: 8px 26px 6px 14px;
-			font-size: 16px;
-			position: relative;
-			vertical-align: top;
-			margin: 0 10px 10px 0;
-			border-radius: 3px;
+			color: $white;			
+			padding-right: 30px;
+			float: left;
 
-			.type {
-				display: inline-block;
-				font-size: 12px;
-				opacity: 0.5;
-				padding: 0 10px 0 5px;
+			.thumbnail-wrapper {
+				float: left;
+				width: 44px;
+				border: 0 !important;
 			}
 
-			.remove {
-				font-size: 10px;
-				padding: 12px;
-				position: absolute;
-				top: 0;
-				right: 0;
-				cursor: pointer;
+			.label {
+				.remove {
+					@include animate();
+					cursor: pointer;
+					font-size: 10px;
+					padding: 4px;
+					margin-left: 4px;
+
+					&:hover {
+						color: $red;
+					}
+				}
+			}
+
+			.name {
+				font-size: 16px;
+				padding-top: 3px;
+			}
+
+			&.has-thumbnail {
+				.label,
+				.name {
+					padding-left: 52px;
+				}
 			}
 		}
 	}
@@ -77,12 +97,13 @@
 			width: 200px;
 			float: left;
 			box-sizing: border-box;
-			padding-right: 20px;
+			padding-right: 30px;
 			position: relative;
 
 			.input {
 				float: none;
 				width: 100%;
+				padding-top: 4px;
 			}
 
 			.input-range {
@@ -151,19 +172,31 @@
 			padding: 40px 20px;
 		}
 
-		.seeds {
-			padding-top: 20px;
-		}
+		.parameters {
 
-		.tunabilities {
-			.tunability {
-				width: 100%;
+			.seeds {
+				padding-top: 20px;
 				float: none;
-				padding: 15px 0;
+
+				.seed {
+					float: none;
+				}
 			}
 
-			.dropdown-field {
-				margin-top: 20px;
+			.tunabilities {
+				float: none;
+
+				.tunability {
+					width: 100%;
+					float: none;
+					padding: 15px 0;
+				}
+			}
+
+			.add {
+				.add-properties {
+					margin-right: 0;
+				}
 			}
 		}