diff --git a/src/js/views/discover/DiscoverRecommendations.js b/src/js/views/discover/DiscoverRecommendations.js
index 3e46469e..9b6ff6ba 100755
--- a/src/js/views/discover/DiscoverRecommendations.js
+++ b/src/js/views/discover/DiscoverRecommendations.js
@@ -192,7 +192,7 @@ class Discover extends React.Component{
e: e,
context: 'track',
items: tracks,
- uris: [uri]
+ uris: helpers.arrayOf('uri',tracks)
}
this.props.uiActions.showContextMenu(data);
}
@@ -511,18 +511,18 @@ class Discover extends React.Component{
{this.renderSeeds()}
{this.renderTunabilities()}
-
-
-
this.handleSelect(e,uri)} />
- {this.toggleTunability(val)}} />
-
+ {this.state.seeds.length > 5 ? Too many seeds! You can use up to a total of 5 seed tracks, artists and genres.
: null}
-
this.getRecommendations()}>
+
+ this.handleSelect(e,uri)} />
+ {this.toggleTunability(val)}} />
+ this.getRecommendations()}>
Find recommendations
+
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 6a515f7a..93d92e3c 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -388,6 +388,7 @@ footer {
color: $white;
}
+ &.error,
&.bad {
background: $red;
color: $white;
@@ -410,6 +411,35 @@ footer {
}
}
+.message {
+ padding: 10px 12px 8px;
+ background: $yellow;
+ color: $dark_grey;
+ clear: both;
+ font-size: 14px;
+ border-radius: 3px;
+
+ &.info {
+ background: $yellow;
+ }
+
+ &.notice {
+ background: $blue;
+ color: $white;
+ }
+
+ &.warning {
+ background: $orange;
+ color: $white;
+ }
+
+ &.error,
+ &.bad {
+ background: $red;
+ color: $white;
+ }
+}
+
@include responsive($bp_medium){
diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss
index 9f95880a..be4c8906 100755
--- a/src/scss/views/_discover.scss
+++ b/src/scss/views/_discover.scss
@@ -39,21 +39,12 @@
.tunabilities {
float: left;
}
-
- .add {
- clear: both;
- padding-top: 30px;
-
- .add-seed-field {
- margin-right: 20px;
- }
- }
}
.seeds {
.seed {
color: $white;
- padding-right: 30px;
+ padding: 0 30px 30px 0;
float: left;
.thumbnail-wrapper {
@@ -97,7 +88,7 @@
width: 200px;
float: left;
box-sizing: border-box;
- padding-right: 30px;
+ padding: 0 30px 30px 0;
position: relative;
.input {
@@ -126,38 +117,63 @@
}
}
- .autocomplete-field {
- width: 250px;
- display: inline-block;
- vertical-align: top;
- padding: 0;
+ .actions {
+ padding-top: 40px;
- .input {
- float: none;
- margin: 0 10px 10px 0;
+ .autocomplete-field {
+ width: 250px;
+ display: inline-block;
+ vertical-align: top;
+ padding: 0;
+ margin-right: 1px;
- input {
- background: rgba(100,100,100,0.5);
- color: $white;
- padding: 8px 13px 6px;
- font-size: 16px;
- border: 1px solid transparent;
+ .input {
+ float: none;
+ margin: 0 10px 10px 0;
- &:focus,
- &:active {
- border-color: $blue;
+ input {
+ background: rgba(100,100,100,0.5);
+ color: $white;
+ padding: 15px 13px 10px;
+ font-size: 16px;
+ border: 1px solid transparent;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+
+ &:focus,
+ &:active {
+ border-color: $blue;
+ }
+ }
+
+ &:after {
+ background: $blue;
}
}
- &:after {
- background: $blue;
+ .results {
+ top: 49px;
}
}
- }
- .actions {
- padding-top: 60px;
- text-align: center;
+ .dropdown-field {
+ .button {
+ background: rgba(100,100,100,0.5);
+ color: $white;
+ padding: 16px 20px 14px 20px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ .options {
+ top: 50px;
+ right: 20px;
+ }
+ }
+
+ .submit {
+
+ }
}
section {
@@ -189,7 +205,6 @@
.tunability {
width: 100%;
float: none;
- padding: 15px 0;
}
}