Accepting album and artist search result containers, fixes #244

src/js/services/mopidy/middleware.js

@@ -867,6 +867,7 @@ const MopidyMiddleware = (function(){
                         instruct(socket, store, 'library.search', {query: {any: [action.data.query]}, uris: [action.data.uri_scheme]})
                             .then(
                                 response => {
+                                    console.log(response)
                                     if (response.length > 0 && response[0].tracks !== undefined){
                                         var tracks = response[0].tracks
 

src/js/views/Artist.js

@@ -209,7 +209,7 @@ class Artist extends React.Component{
 
 				return (
 					<div className="body overview">
-						<div className={related_artists.length > 0 ? "col w70" : "col w100"}>
+						<div className={"top-tracks col w"+(related_artists.length > 0 ? "70" : "100")}>
 							<h4>Top tracks</h4>
 							<div className="list-wrapper">
 								<TrackList className="artist-track-list" uri={this.props.params.uri} tracks={tracks} />
@@ -222,21 +222,23 @@ class Artist extends React.Component{
 
 						<div className="cf"></div>
 
-						<h4>
-							Albums
-							<DropdownField 
-								icon="sort" 
-								name="Sort" 
-								value={this.props.sort} 
-								options={sort_options} 
-								reverse={this.props.sort_reverse} 
-								handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
-						</h4>
+						<div className="albums">
+							<h4>
+								Albums
+								<DropdownField 
+									icon="sort" 
+									name="Sort" 
+									value={this.props.sort} 
+									options={sort_options} 
+									reverse={this.props.sort_reverse} 
+									handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
+							</h4>
 
-						<section className="grid-wrapper no-top-padding">
-							<AlbumGrid albums={albums} />
-							<LazyLoadListener loading={this.props.artist.albums_more} loadMore={() => this.loadMore()} />
-						</section>
+							<section className="grid-wrapper no-top-padding">
+								<AlbumGrid albums={albums} />
+								<LazyLoadListener loading={this.props.artist.albums_more} loadMore={() => this.loadMore()} />
+							</section>
+						</div>
 					</div>
 				)
 		}

src/scss/components/_lists.scss

@@ -75,10 +75,7 @@
 			color: $grey;
 			text-transform: uppercase;
 			border-top: 0;
-
-			.liner {
-				padding-bottom: 2px;
-			}
+			padding-bottom: 2px;
 		}
 
 		&.field {
@@ -203,18 +200,16 @@
 
 	&.queue-track-list {
 		.list-item {
-			.liner {
-				padding-right: 60px;
-			}
-		}
-		.col {
-			&.name,
-			&.artists,
-			&.album { 
-				width: 25% !important;
-			}
-			&.added { 
-				width: 20%;
+			padding-right: 60px;
+			.col {
+				&.name,
+				&.artists,
+				&.album { 
+					width: 25% !important;
+				}
+				&.added { 
+					width: 20%;
+				}
 			}
 		}
 	}

src/scss/global/_core.scss

@@ -191,6 +191,10 @@ h4 {
 	&:not(:first-child){
 		padding-top: 40px;
 	}
+
+	.dropdown-field {
+		margin-left: 10px;
+	}
 }
 
 .no-results {

src/scss/views/_artist.scss

@@ -41,16 +41,25 @@
 
 	}
 
-	.body.about {		
-		@include clearfix();
+	.body {
 
-		.biography {
-			padding-left: 40px;
-			box-sizing: border-box;
+		&.overview {
+			.albums {
+				padding-top: 30px;
+			}
+		}
 
-			.biography-text {
-				overflow-wrap: break-word;
-			}			
+		&.about {		
+			@include clearfix();
+
+			.biography {
+				padding-left: 40px;
+				box-sizing: border-box;
+
+				.biography-text {
+					overflow-wrap: break-word;
+				}			
+			}
 		}
 	}
 
@@ -105,12 +114,16 @@
 				}
 			}
 		}
-		.body {
 
+		.body {
 			&.overview {
-				h4 {
+				.top-tracks h4 {
 					display: none;
 				}
+				.albums h4 {
+					padding: 0;
+					margin: 0 0 -30px;
+				}
 				.col.w70 {
 					width: 100%;
 				}