From 7d311af0f04428f7413969772218212bff4fce6e Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 30 Jan 2018 08:14:05 +1300
Subject: [PATCH] Basic validation; Responsive form

---
 .../views/discover/DiscoverRecommendations.js | 14 +--
 src/scss/global/_core.scss                    | 30 +++++++
 src/scss/views/_discover.scss                 | 85 +++++++++++--------
 3 files changed, 87 insertions(+), 42 deletions(-)

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()}
-
-							<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>
+							{this.state.seeds.length > 5 ? <p className="message error">Too many seeds! You can use up to a total of 5 seed tracks, artists and genres.</p> : null}
 
 						</div>
 						<div className="actions">
-							<span className={"button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>
+
+							<AddSeedField onSelect={(e,uri) => this.handleSelect(e,uri)} />
+							<DropdownField className="add-properties" name="Properties" options={addable_tunabilities} no_status_icon button="default" handleChange={val => {this.toggleTunability(val)}} />
+							<span className={"submit button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>
 								<FontAwesome name="compass" />&nbsp; 
 								Find recommendations
 							</span>
+
 						</div>
 					</div>
 
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;
 				}
 			}