Playlist editing; Description field polish, fixes #138

.gitignore

@@ -7,3 +7,5 @@ public_html
 *.orig
 Thumbs.db
 *.pyc
+package-lock.json
+

src/js/components/Modal/AddToQueueModal.js

@@ -25,25 +25,27 @@ export default class AddToQueueModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h1>Add URI(s) to queue</h1>
+				<h1>Add to queue</h1>
+				<h2 className="grey-text">Add a comma-separated list of URIs to the play queue. You must have the appropriate Mopidy backend enabled for each URI schema (eg spotify:, yt:).</h2>
 
 				<form onSubmit={e => this.handleSubmit(e)}>
 					<div className="field text">
+						<span className="label">URI(s)</span>
 						<input 
 							type="text"
-							placeholder="Comma-separated URIs"
 							onChange={e => this.setState({uris: e.target.value})} 
 							value={this.state.uris} />
 					</div>
 
 					<div className="field radio white">
+						<span className="label">Position</span>
 						<label>
 							<input 
 								type="radio"
 								name="next"
 								checked={!this.state.next}
 								onChange={e => this.setState({next: false})} />
-							<span className="label">Add to end</span>
+							<span className="label">End</span>
 						</label>
 						<label>
 							<input 
@@ -51,7 +53,7 @@ export default class AddToQueueModal extends React.Component{
 								name="next"
 								checked={this.state.next}
 								onChange={e => this.setState({next: true})} />
-							<span className="label">Add after current track</span>
+							<span className="label">After current track</span>
 						</label>
 					</div>
 

src/js/components/Modal/CreatePlaylistModal.js

@@ -31,28 +31,72 @@ export default class CreatePlaylistModal extends React.Component{
 		return false
 	}
 
+	renderFields(){
+		switch (this.state.scheme){
+
+			case 'spotify':
+				return (
+					<div>
+						<div className="field text">
+							<span className="label">Name</span>
+							<input 
+								type="text"
+								onChange={ e => this.setState({ name: e.target.value })} 
+								value={ this.state.name } />
+						</div>
+
+						<div className="field text">
+							<span className="label">Description</span>
+							<input 
+								type="text"
+								onChange={ e => this.setState({ description: e.target.value })} 
+								
+								value={ this.state.description } />
+						</div>
+
+						<div className="field checkbox white">
+							<span className="label">Options</span>
+							<label>
+								<input 
+									type="checkbox"
+									name="is_public"
+									checked={ this.state.is_public }
+									onChange={ e => this.setState({ is_public: !this.state.is_public })} />
+								<span className="label">Public</span>
+							</label>
+							<label>
+								<input 
+									type="checkbox"
+									name="is_collaborative"
+									checked={ this.state.is_collaborative }
+									onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
+								<span className="label">Collaborative</span>
+							</label>
+						</div>
+					</div>
+				)
+
+			default:
+				return (
+					<div>
+						<div className="field text">
+							<span className="label">Name</span>
+							<input 
+								type="text"
+								onChange={ e => this.setState({ name: e.target.value })} 
+								value={ this.state.name } />
+						</div>
+					</div>
+				)
+		}
+	}
+
 	render(){
 		return (
 			<div>
 				<h1>Create playlist</h1>
 				<form onSubmit={(e) => this.createPlaylist(e)}>
 
-					<div className="field text">
-						<span className="label">Name</span>
-						<input 
-							type="text"
-							onChange={ e => this.setState({ name: e.target.value })} 
-							value={ this.state.name } />
-					</div>
-
-					<div className="field text">
-						<span className="label">Description</span>
-						<input 
-							type="text"
-							onChange={ e => this.setState({ description: e.target.value })} 
-							
-							value={ this.state.description } />
-					</div>
 					<div className="field radio white">
 						<span className="label">Provider</span>
 						<label>
@@ -74,28 +118,13 @@ export default class CreatePlaylistModal extends React.Component{
 							<span className="label">Mopidy</span>
 						</label>
 					</div>
-					<div className="field checkbox white">
+					
-						<span className="label">Options</span>
+					{this.renderFields()}
-						<label>
+
-							<input 
-								type="checkbox"
-								name="is_public"
-								checked={ this.state.is_public }
-								onChange={ e => this.setState({ is_public: !this.state.is_public })} />
-							<span className="label">Public</span>
-						</label>
-						<label>
-							<input 
-								type="checkbox"
-								name="is_collaborative"
-								checked={ this.state.is_collaborative }
-								onChange={ e => this.setState({ is_collaborative: !this.state.is_collaborative })} />
-							<span className="label">Collaborative</span>
-						</label>
-					</div>
 					<div className="actions centered-text">
 						<button type="submit" className="primary wide">Create</button>
 					</div>
+
 				</form>
 			</div>
 		)

src/scss/components/_modal.scss

@@ -35,7 +35,7 @@
 	}
 
 	.content {
-		padding: 100px 25%;
+		padding: 10vh 25%;
 		margin: 0 auto;
 		width: 50%;
 		color: $white;
@@ -44,7 +44,7 @@
 			padding-top: 50px;
 
 			.field {
-				padding-bottom: 40px;
+				padding-bottom: 30px;
 				position: relative;
 
 				.label {
@@ -145,13 +145,6 @@
 		}
 	}
 
-	&.add_to_queue,
-	&.create_playlist {
-		h1 {
-			padding-bottom: 50px;
-		}
-	}
-
 	&.image_zoom {
 		.content {
 			text-align: center;