Overhaul of user template (more like Artist); Search responsive

src/js/views/User.js

@@ -8,7 +8,8 @@ import Thumbnail from '../components/Thumbnail'
 import PlaylistGrid from '../components/PlaylistGrid'
 import FollowButton from '../components/FollowButton'
 import LazyLoadListener from '../components/LazyLoadListener'
-import Header from '../components/Header'
+import SidebarToggleButton from '../components/SidebarToggleButton'
+import Parallax from '../components/Parallax'
 import ContextMenuTrigger from '../components/ContextMenuTrigger'
 
 import * as helpers from '../helpers'
@@ -54,43 +55,48 @@ class User extends React.Component{
 				}
 			}
 
+			if (this.props.user && this.props.user.images ){
+				var image = helpers.sizedImages(this.props.user.images).huge
+			} else {
+				var image = null
+			}
+
 			return (
 				<div className="view user-view">
-				
-					<Header icon="play" title="User" />
-					
-					<div className="content-wrapper">
-						<div className="intro">
-							<Thumbnail circle={true} size="medium" images={ this.props.user.images } />
 
+					<SidebarToggleButton />
+
+					<div className="intro">
+						<Parallax image={image} />
+						<div className="liner">
+							<Thumbnail image={image} canZoom circle />
 							<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
-
+							<h2>
-							<ul className="details">
+								<ul className="details">
-								{this.isMe() ? <li>You</li> : null}
+									<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
-								<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
+									<li>{this.props.user.followers.total.toLocaleString()} followers</li>
-								<li>{this.props.user.followers.total.toLocaleString()} followers</li>
+									{this.isMe() ? <li>You</li> : null}
-							</ul>
+								</ul>
-
+							</h2>
 							<div className="actions">
 								<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
 							</div>
 						</div>
-						<div className="main">
+					</div>
-
+					
-							<section className="grid-wrapper">
+					<div className="content-wrapper">
-								<PlaylistGrid playlists={playlists} />
+						<section className="grid-wrapper">
-								<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
+							<h4>Playlists</h4>
-							</section>
+							<PlaylistGrid playlists={playlists} />
-							
+							<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
-						</div>
+						</section>
 					</div>
 				</div>
 			)
 		} else {
 
 			return (
-				<div className="view user-view">				
+				<div className="view user-view">
-					<Header icon="play" title="User" />
 					<div className="intro">
 						<Thumbnail circle size="medium" images={[]} />
 						<h1><span className="placeholder"></span></h1>

src/scss/components/_header.scss

@@ -68,13 +68,17 @@ main {
 		}
 
 		@include responsive( $bp_medium ){
-
 			padding: 10px 10px 10px 0;
 
 			.icon {
 				visibility: hidden;
 			}
 
+			h1 {
+				vertical-align: top;
+				padding-top: 8px;
+			}
+
 			.options {
 				top: 10px;
 				right: 0;

src/scss/global/_core.scss

@@ -335,10 +335,12 @@ footer {
 	
 	h1 {
 		font-size: 1.8rem;
+		line-height: 1.8rem;
 	}
 	
 	h2 {
 		font-size: 1.2rem;
+		line-height: 1.3rem;
 	}
 	
 	h3 {

src/scss/global/_forms.scss

@@ -166,12 +166,12 @@ input[type="submit"] {
 	}
 
 	@include responsive( $bp_medium ){
-		min-width: 120px;
 		margin-right: 10px;
 	}
 
 	@include responsive( $bp_narrow ){
-		min-width: 0;
+		padding-left: 20px;
+		padding-right: 20px;
 	}
 }
 

src/scss/views/_album.scss

@@ -33,23 +33,32 @@ main .album-view {
 	}
 
 	@include responsive( $bp_medium ){
-		.title {
+		padding-top: 0;
-			padding: 0 20px 20px;
+		padding-left: 10px;
+
+		.thumbnail-wrapper {
+			width: 40%;
+			padding: 10px 20px 10px 10px;
+
+			.thumbnail {
+				float: none;
+				max-width: none;
+				margin: 0 0 0 0;
+			}
 		}
 
-		.thumbnail {
+		.title {
-			float: none;
+			padding: 20px 20px 20px 40%;
-			max-width: none;
+			min-height: 30vw;
-			margin: 0 0 0 0;
 
-			.image {
+			.details {
-				padding-bottom: 70%;
+				padding: 5px 0;
 			}
 		}
 
 		.actions {
 			text-align: center;
-			padding-bottom: 20px;
+			padding: 20px 5px;
 		}
 	}
 }

src/scss/views/_artist.scss

@@ -32,7 +32,7 @@
 			}
 
 			h1 {
-				color: #FFFFFF;
+				color: $white;
 				padding-bottom: 25px;
 			}
 

src/scss/views/_playlist.scss

@@ -33,23 +33,32 @@ main .playlist-view {
 	}
 
 	@include responsive( $bp_medium ){
-		.title {
+		padding-top: 0;
-			padding: 20px 20px;
+		padding-left: 10px;
+
+		.thumbnail-wrapper {
+			width: 40%;
+			padding: 10px 20px 10px 10px;
+
+			.thumbnail {
+				float: none;
+				max-width: none;
+				margin: 0 0 0 0;
+			}
 		}
 
-		.thumbnail {
+		.title {
-			float: none;
+			padding: 20px 20px 20px 40%;
-			max-width: none;
+			min-height: 30vw;
-			margin: 0 0 0 0;
 
-			.image {
+			.details {
-				padding-bottom: 70%;
+				padding: 5px 0;
 			}
 		}
 
 		.actions {
 			text-align: center;
-			padding-bottom: 20px;
+			padding: 20px 5px;
 		}
 	}
 }

src/scss/views/_search.scss

@@ -9,6 +9,7 @@
 		input {
 			@include feature_font();
 			padding: 0;
+			width: 100%;
 			font-size: 3rem;
 			font-weight: 700;
 			height: 3rem;
@@ -30,6 +31,17 @@
 	}
 
 	@include responsive( $bp_medium ){
+
+		.search-form {
+			top: 18px;
+			left: 50px;
+
+			input {
+				font-size: 1.8rem;
+				height: 1.8rem;
+			}
+		}
+
 		.search-result-sections {
 			padding: 10px 10px 0;
 			

src/scss/views/_user.scss

@@ -2,20 +2,42 @@
 .user-view {
 	.intro {
 		@include clearfix();
-		padding-bottom: 20px;
+		position: relative;
 
-		.thumbnail {
+		.parallax {
-			max-width: 200px;
+			position: absolute;
-			margin: 40px 40px 0 40px;
+			z-index: 0;
-			float: left;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			height: auto;
 		}
 
-		h1 {
+		.liner {
-			padding-top: 80px;
+			position: relative;
-		}
+			z-index: 1;
+			padding: 30vh 40px 40px 260px;
 
-		.actions {
+			.thumbnail {
-			padding-top: 20px;
+				position: absolute;
+				z-index: 2;
+				left: 40px;
+				bottom: 20px;
+				max-width: 184px;
+
+				.image {
+					background-color: $darkest_grey;
+				}
+			}
+
+			h1 {
+				color: $white;
+			}
+
+			h2 {
+				padding-bottom: 25px;
+			}
 		}
 	}
 
@@ -25,7 +47,7 @@
 
 			.thumbnail {
 				float: none;
-				margin: 20px auto 20px;
+				margin: 0 auto 20px;
 			}
 
 			h1 {