Search display

src/js/components/AlbumGrid.js

@@ -8,6 +8,7 @@ import FontAwesome from 'react-fontawesome'
 import Thumbnail from './Thumbnail'
 import ArtistSentence from './ArtistSentence'
 
+import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
 
 class AlbumGrid extends React.Component{
@@ -48,9 +49,12 @@ class AlbumGrid extends React.Component{
 										onClick={ (e) => this.handleClick(e,global.baseURL+'album/'+album.uri) }
 										onContextMenu={e => this.handleContextMenu(e,album)}>
 											<Thumbnail size="medium" images={album.images} />
-											<div className="name">{ album.name }</div>
+											<div className="name">
+												{album.name}
+												{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(album.uri)} className="source" fixedWidth /> : null}
+											</div>
 											<div className="secondary">
-												{ album.artists ? <ArtistSentence artists={album.artists} /> : <span>-</span> }
+												{album.artists ? <ArtistSentence artists={album.artists} /> : <span>-</span>}
 											</div>
 									</div>
 								)

src/js/components/ArtistGrid.js

@@ -3,9 +3,11 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import { Link } from 'react-router'
+import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from './Thumbnail'
 
+import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
 
 class ArtistGrid extends React.Component{
@@ -41,7 +43,10 @@ class ArtistGrid extends React.Component{
 										key={index} 
 										onContextMenu={e => this.handleContextMenu(e,artist)}>
 											<Thumbnail size="medium" images={artist.images} />
-											<div className="name">{ artist.name }</div>
+											<div className="name">
+												{artist.name}
+												{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(artist.uri)} className="source" fixedWidth /> : null}
+											</div>
 											<div className="secondary">
 												{artist.followers ? artist.followers.total.toLocaleString()+' followers' : null}
 												{artist.albums_uris && !artist.followers ? artist.albums_uris.length+' albums' : null}

src/js/components/PlaylistGrid.js

@@ -7,6 +7,7 @@ import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from './Thumbnail'
 
+import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
 
 class PlaylistGrid extends React.Component{
@@ -43,10 +44,13 @@ class PlaylistGrid extends React.Component{
 									key={index} 
 									onContextMenu={e => this.handleContextMenu(e,playlist)}>
 										<Thumbnail size="medium" images={playlist.images} />
-										<div className="name">{ playlist.name }</div>
+										<div className="name">
+											{playlist.name}
+											{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(playlist.uri)} className="source" fixedWidth /> : null}
+										</div>
 										<div className="secondary">
-											{ playlist.tracks_total ? playlist.tracks_total+' tracks' : <span>0 tracks</span> }
-											{ playlist.can_edit ? <FontAwesome name="edit" /> : null }
+											{playlist.tracks_total ? playlist.tracks_total+' tracks' : <span>0 tracks</span>}
+											{playlist.can_edit ? <FontAwesome name="edit" /> : null}
 										</div>
 								</Link>
 							)

src/js/views/Search.js

@@ -93,7 +93,7 @@ class Search extends React.Component{
 				return (
 					<div>
 						<section className="grid-wrapper">
-							<ArtistGrid artists={artists} />
+							<ArtistGrid artists={artists} show_source_icon />
 							<LazyLoadListener enabled={this.props['artists_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('artists') }/>
 						</section>
 					</div>
@@ -104,7 +104,7 @@ class Search extends React.Component{
 				return (
 					<div>
 						<section className="grid-wrapper">
-							<AlbumGrid albums={albums} />
+							<AlbumGrid albums={albums} show_source_icon />
 							<LazyLoadListener enabled={this.props['albums_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('albums') }/>
 						</section>
 					</div>
@@ -115,7 +115,7 @@ class Search extends React.Component{
 				return (
 					<div>
 						<section className="grid-wrapper">
-							<PlaylistGrid playlists={playlists} />
+							<PlaylistGrid playlists={playlists} show_source_icon />
 							<LazyLoadListener enabled={this.props['playlists_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('playlists') }/>
 						</section>
 					</div>
@@ -126,7 +126,7 @@ class Search extends React.Component{
 				return (
 					<div>
 						<section className="list-wrapper">
-							<TrackList show_source_icon={true} tracks={ tracks } />
+							<TrackList tracks={ tracks } show_source_icon />
 							<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
 						</section>
 					</div>
@@ -134,32 +134,57 @@ class Search extends React.Component{
 				break
 
 			default:
+			
+				if (artists.length > 0){
+					var artists_section = (					
+						<section>
+							<div className="inner">
+								<h4><Link to={global.baseURL+'search/artists/'+this.props.params.query}>Artists</Link></h4>
+								<ArtistGrid show_source_icon artists={artists.slice(0,5)} />
+							</div>
+						</section>
+					)
+				} else {
+					var artists_section = null
+				}
+
+				if (albums.length > 0){
+					var albums_section = (					
+						<section>
+							<div className="inner">
+								<h4><Link to={global.baseURL+'search/albums/'+this.props.params.query}>Albums</Link></h4>
+								<AlbumGrid show_source_icon albums={albums.slice(0,5)} />
+							</div>
+						</section>
+					)
+				} else {
+					var albums_section = null
+				}
+			
+				if (playlists.length > 0){
+					var playlists_section = (					
+						<section>
+							<div className="inner">
+								<h4><Link to={global.baseURL+'search/playlists/'+this.props.params.query}>Playlists</Link></h4>
+								<PlaylistGrid show_source_icon playlists={playlists.slice(0,5)} />
+							</div>
+						</section>
+					)
+				} else {
+					var playlists_section = null
+				}
+
 				return (
 					<div>
 						<div className="search-result-sections cf">
-							<section>
-								<div className="inner">
-									<h4><Link to={global.baseURL+'search/artists/'+this.props.params.query}>Artists</Link></h4>
-									{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>
-									{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>
-									{playlists.length > 0 ? <PlaylistGrid className="mini" playlists={playlists.slice(0,6)} /> : <span className="grey-text">No results</span>}
-								</div>
-							</section>
+							{artists_section}
+							{albums_section}
+							{playlists_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 tracks={tracks} />
 							<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
 						</section>
 

src/scss/components/_grid.scss

@@ -27,9 +27,9 @@
 			color: $secondary_grey;
 		}
 
-		.fa {
-			font-size: 10px;
-			padding-left: 4px;
+		.source {
+			color: $secondary_grey;
+			padding-left: 2px;
 		}
 
 		&:hover{

src/scss/views/_search.scss

@@ -5,11 +5,8 @@
 		padding: 20px 20px 0;
 
 		section {
-			width: 33.3334%;
-			float: left;
-
 			.inner {
-				padding: 10px;
+				padding: 10px 10px 0 10px;
 			}
 		}
 	}