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; + } } }