Responsive improvements for form fields

src/js/components/PlaybackControls.js

@@ -62,9 +62,9 @@ class PlaybackControls extends React.Component{
 		var button = null;
 		if (this.props.http_streaming_enabled){
 			if (this.props.http_streaming_active){
-				button = <a className="control active has-tooltip" onClick={() => this.props.coreActions.set({http_streaming_active: false})}><FontAwesome name="rss" /><span className="tooltip">HTTP Streaming</span></a>
+				button = <a className="control active has-tooltip" onClick={() => this.props.coreActions.set({http_streaming_active: false})}><FontAwesome name="rss" /><span className="tooltip">Mute local stream</span></a>
 			} else {
-				button = <a className="control has-tooltip" onClick={() => this.props.coreActions.set({http_streaming_active: true})}><FontAwesome name="rss" /><span className="tooltip">HTTP Streaming</span></a>;
+				button = <a className="control has-tooltip" onClick={() => this.props.coreActions.set({http_streaming_active: true})}><FontAwesome name="rss" /><span className="tooltip">Un-mute local stream</span></a>;
 			}
 		}
 		return button;

src/js/components/Track.js

@@ -217,12 +217,21 @@ export default class Track extends React.Component{
 		} else if (this.props.context == 'queue'){
 
 			if (track.added_from && track.added_by){
-				var type = (track.added_from ? helpers.uriType(track.added_from) : null)
-				if (type == 'discover'){
-					var link = <URILink type="recommendations" uri={helpers.getFromUri('seeds',track.added_from)}>discover</URILink>
-				} else {
-					var link = <URILink type={type} uri={track.added_from}>{type}</URILink>
+				var type = (track.added_from ? helpers.uriType(track.added_from) : null);
+
+				switch (type){
+					case "discover":
+						var link = <URILink type="recommendations" uri={helpers.getFromUri('seeds',track.added_from)}>discover</URILink>
+						break;
+
+					case "browse":
+						var link = <URILink type="browse" uri={track.added_from.replace("iris:browse:","")}>browse</URILink>
+						break;
+
+					default:
+						var link = <URILink type={type} uri={track.added_from}>{type}{track.added_from}</URILink>;
 				}
+
 				var added = <span>{track.added_by} <span className="grey-text"> (from {link})</span></span>
 
 			} else if (track.added_by){

src/js/components/URILink.js

@@ -21,8 +21,7 @@ export default class URILink extends React.Component{
 			uri = encodeURIComponent(uri);
 		}
 
-		switch (this.props.type){
-			
+		switch (this.props.type){			
 			case 'playlist':
 				to = global.baseURL+'playlist/'+uri;
 				break;
@@ -43,6 +42,10 @@ export default class URILink extends React.Component{
 				to = global.baseURL+'user/'+uri;
 				break;
 
+			case 'browse':
+				to = global.baseURL+'library/browse/'+uri;
+				break;
+
 			case 'recommendations':
 				to = global.baseURL+'discover/recommendations/'+uri;
 				break;
@@ -55,13 +58,21 @@ export default class URILink extends React.Component{
 				to = null;
 		}
 
-		return (
-			<Link 
-				className={this.props.className ? this.props.className : null} 
-				to={to}
-				onContextMenu={e => this.handleContextMenu(e)}>
+		if (uri){
+			return (
+				<Link 
+					className={this.props.className ? this.props.className : null} 
+					to={to}
+					onContextMenu={e => this.handleContextMenu(e)}>
+						{this.props.children}
+				</Link>
+			);
+		} else {
+			return (
+				<span className={this.props.className ? this.props.className : null}>
 					{this.props.children}
-			</Link>
-		);
+				</span>
+			);
+		}
 	}
 }

src/js/helpers.js

@@ -471,14 +471,22 @@ export let uriType = function(uri){
     	return 'playlist'
     }
 
+    if (exploded[0] == 'iris'){
+    	switch (exploded[1]){
+	    	case 'search':
+	    	case 'discover':
+	    	case 'browse':
+	    		return exploded[1];
+	    		break;
+	    }
+    }
+
     switch (exploded[1]){
     	case 'track':
     	case 'artist':
     	case 'album':
     	case 'playlist':
-    	case 'search':
     	case 'genre':
-    	case 'discover':
     		return exploded[1]
     		break
 

src/js/views/Search.js

@@ -357,7 +357,8 @@ class Search extends React.Component{
 				<Header
 					icon="search" 
 					options={options} 
-					uiActions={this.props.uiActions} />
+					uiActions={this.props.uiActions}
+				/>
 
 				<SearchForm 
 					query={(this.props.params.query ? this.props.params.query : '')}

src/js/views/User.js

@@ -32,7 +32,7 @@ class User extends React.Component{
 	}
 
 	loadUser(props = this.props){
-		if (!props.user){
+		if (!props.user || props.user.playlists_uris === undefined){
 			this.props.spotifyActions.getUser(props.params.uri, true);
 			this.props.spotifyActions.following(props.params.uri);
 		}

src/js/views/library/LibraryBrowse.js

@@ -52,7 +52,7 @@ class LibraryBrowse extends React.Component{
 		var tracks = this.arrangeDirectory().tracks;
 		var tracks_uris = helpers.arrayOf('uri',tracks);
 
-		this.props.mopidyActions.playURIs(tracks_uris, this.props.params.uri);
+		this.props.mopidyActions.playURIs(tracks_uris, "iris:browse:"+this.props.params.uri);
 		this.props.uiActions.hideContextMenu();
 	}
 
@@ -131,7 +131,8 @@ class LibraryBrowse extends React.Component{
 						link_prefix={global.baseURL+'library/browse/'}
 					/>
 					<TrackList 
-						tracks={items.tracks} 
+						tracks={items.tracks}
+						uri={"iris:browse:"+this.props.params.uri}
 						className="library-local-track-list" 
 						noheader />
 				</section>

src/scss/global/_forms.scss

@@ -247,6 +247,10 @@ input[type="submit"] {
 
 		.input {
 			padding-top: 4px;
+
+			label:not(:last-child){
+				padding-right: 14px;
+			}
 		}
 
 		.label {
@@ -380,13 +384,7 @@ input[type="submit"] {
 			width: auto;
 
 			.text {
-				padding: 0 0 0 20px;
-			}
-		}
-
-		&.checkbox {
-			.input {
-				padding: 0 0 0 20px;
+				padding: 0 20px 0 0;
 			}
 		}
 	}

src/scss/views/_discover.scss

@@ -144,6 +144,11 @@
 					&:active {
 						border-color: $blue;
 					}
+
+					&:not(*:root){
+						padding-top: 16px;
+						padding-bottom: 11px;
+					}
 				}
 
 				&:after {

src/scss/views/_search.scss

@@ -3,17 +3,17 @@
 
 	.search-form {
 		position: absolute;
-		top: 40px;
+		top: 30px;
 		left: 90px;
 		right: 250px;
 
 		input {
 			@include feature_font();
-			padding: 0;
+			padding: 6px 0 4px 0;
 			width: 100%;
 			font-size: 3rem;
 			font-weight: 700;
-			height: 3.1rem;
+			height: 4rem;
 			background: transparent;
 			border-bottom: 2px solid $grey;
 			border-radius: 0;
@@ -55,14 +55,20 @@
 
 	@include responsive($bp_medium){
 
+		header {
+			.icon {
+				margin-top: 8px;
+			}
+		}
+
 		.search-form {
-			top: 18px;
-			left: 50px;
+			top: 10px;
+			left: 40px;
 			right: 60px;
 
 			input {
 				font-size: 1.8rem;
-				height: 1.8rem;
+				height: 2.5rem;
 			}
 		}