diff --git a/src/js/views/discover/DiscoverRecommendations.js b/src/js/views/discover/DiscoverRecommendations.js
index 798bdaf6..3e46469e 100755
--- a/src/js/views/discover/DiscoverRecommendations.js
+++ b/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 (
-
- {seed.name}
- ({type})
- this.removeSeed(index)} />
-
+
+ {seed.images ?
: null}
+
+ {helpers.titleCase(type)}
+ this.removeSeed(index)} />
+
+
{seed.name}
+
)
})
}
- this.handleSelect(e,uri)} />
)
}
@@ -382,7 +385,6 @@ class Discover extends React.Component{
);
})
}
- {this.toggleTunability(val)}} />
);
}
@@ -506,8 +508,15 @@ class Discover extends React.Component{
Add seeds and musical properties below to build your sound
+
{this.renderSeeds()}
{this.renderTunabilities()}
+
+
+
this.handleSelect(e,uri)} />
+ {this.toggleTunability(val)}} />
+
+
this.getRecommendations()}>
diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss
index 879b9a9b..9f95880a 100755
--- a/src/scss/views/_discover.scss
+++ b/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;
+ }
}
}