From d4ff061e0179bbf75c48c41505bd34f845d89b1e Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sat, 25 Mar 2017 10:21:10 +1300
Subject: [PATCH] Leaner modal; Placeholders in results

---
 .../components/Modal/SearchSettingsModal.js   | 58 ++++++++++---------
 src/js/views/Search.js                        | 10 ++--
 src/scss/components/_lists.scss               | 11 ++++
 3 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/js/components/Modal/SearchSettingsModal.js b/src/js/components/Modal/SearchSettingsModal.js
index 74bb2e6d..74c0fcf6 100755
--- a/src/js/components/Modal/SearchSettingsModal.js
+++ b/src/js/components/Modal/SearchSettingsModal.js
@@ -49,36 +49,38 @@ export default class SearchSettingsModal extends React.Component{
 	render(){
 		return (
 			<div>
-				<h4 className="no-bottom-padding">Advanced search settings</h4>
-				<h3 className="grey-text bottom-padding">Customise the providers used when searching. Only Spotify and local backends support searching by artist, album or playlist.</h3>
+				<h4 className="no-bottom-padding">Search sourced</h4>
+				<h3 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches. Please note that not all backends support searching by artist, album or playlist.</h3>
 
 				<form onSubmit={e => this.handleSubmit(e)}>
-					<div className="field checkbox white">
-						<label>
-							<input 
-								type="checkbox"
-								name="enabled"
-								checked={ this.state.spotify }
-								onChange={ e => this.setState({ spotify: !this.state.spotify })} />
-							<span className="label">spotify <span className="grey-text">(http)</span></span>
-						</label>
-					</div>
-					{
-						this.props.uri_schemes.map(scheme => {
-							return (								
-								<div className="field checkbox white" key={scheme}>
-									<label>
-										<input 
-											type="checkbox"
-											name={scheme}
-											checked={this.state.uri_schemes.indexOf(scheme) > -1}
-											onChange={ e => this.handleToggle(scheme)} />
-										<span className="label">{scheme.replace(':','')} <span className="grey-text">(mopidy)</span></span>
-									</label>
-								</div>
-							)
-						})
-					}
+					<div className="list small">
+						<div className="list-item field checkbox white">
+							<label>
+								<input 
+									type="checkbox"
+									name="enabled"
+									checked={ this.state.spotify }
+									onChange={ e => this.setState({ spotify: !this.state.spotify })} />
+								<span className="label">spotify <span className="grey-text">(http)</span></span>
+							</label>
+						</div>
+						{
+							this.props.uri_schemes.map(scheme => {
+								return (								
+									<div className="list-item field checkbox white" key={scheme}>
+										<label>
+											<input 
+												type="checkbox"
+												name={scheme}
+												checked={this.state.uri_schemes.indexOf(scheme) > -1}
+												onChange={ e => this.handleToggle(scheme)} />
+											<span className="label">{scheme.replace(':','')} <span className="grey-text">(mopidy)</span></span>
+										</label>
+									</div>
+								)
+							})
+						}
+						</div>
 
 					<div className="actions centered-text">
 						<button type="submit" className="primary wide">Save</button>
diff --git a/src/js/views/Search.js b/src/js/views/Search.js
index 7566ca5e..83e55493 100755
--- a/src/js/views/Search.js
+++ b/src/js/views/Search.js
@@ -140,26 +140,26 @@ class Search extends React.Component{
 							<section>
 								<div className="inner">
 									<h4><Link to={global.baseURL+'search/artists/'+this.props.params.query}>Artists</Link></h4>
-									<ArtistGrid className="mini" artists={artists.slice(0,6)} />
+									{artists.length > 0 ? <ArtistGrid className="mini" artists={artists.slice(0,6)} /> : <span className="grey-text">No results</span>}
 								</div>
 							</section>
 							<section>
 								<div className="inner">
 									<h4><Link to={global.baseURL+'search/albums/'+this.props.params.query}>Albums</Link></h4>
-									<AlbumGrid className="mini" albums={albums.slice(0,6)} />
+									{albums.length > 0 ? <AlbumGrid className="mini" albums={albums.slice(0,6)} /> : <span className="grey-text">No results</span>}
 								</div>
 							</section>
 							<section>
 								<div className="inner">
 									<h4><Link to={global.baseURL+'search/playlists/'+this.props.params.query}>Playlists</Link></h4>
-									<PlaylistGrid className="mini" playlists={playlists.slice(0,6)} />
+									{playlists.length > 0 ? <PlaylistGrid className="mini" playlists={playlists.slice(0,6)} /> : <span className="grey-text">No results</span>}
 								</div>
 							</section>
 						</div>
 
 						<section className="list-wrapper">
 							<h4 className="left-padding"><Link to={global.baseURL+'search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
-							<TrackList show_source_icon={true} tracks={ tracks } />
+							<TrackList show_source_icon={true} tracks={tracks} />
 							<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
 						</section>
 
@@ -202,7 +202,7 @@ class Search extends React.Component{
 				<DropdownField icon="eye" name="Type" value={this.props.params.type} options={type_options} handleChange={val => this.handleTypeChange(val)} />
 				<button onClick={e => this.props.uiActions.openModal('search_settings', {type: this.props.params.type, query: this.props.params.query})}>
 					<FontAwesome name="wrench" />&nbsp;
-					Advanced
+					Sources
 				</button>
 			</span>
 		)
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index c8828c43..7e53d1f8 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -42,6 +42,17 @@
 			top: 14px;
 			right: 12px;
 		}
+
+		&.field {
+			padding: 0 !important;
+
+			& > label {
+				display: block;
+				position: relative;
+				padding: 12px 10px 12px 20px;
+				cursor: pointer;
+			}
+		}
 	}
 
 	&.track-list .list-item {