From ff20a23d9a0a1115e2874780700e23fdc77b0ab1 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Fri, 23 Jun 2017 08:57:26 +1200 Subject: [PATCH] Overhaul of user template (more like Artist); Search responsive --- src/js/views/User.js | 54 ++++++++++++++++++-------------- src/scss/components/_header.scss | 6 +++- src/scss/global/_core.scss | 2 ++ src/scss/global/_forms.scss | 4 +-- src/scss/views/_album.scss | 27 ++++++++++------ src/scss/views/_artist.scss | 2 +- src/scss/views/_playlist.scss | 27 ++++++++++------ src/scss/views/_search.scss | 12 +++++++ src/scss/views/_user.scss | 44 +++++++++++++++++++------- 9 files changed, 121 insertions(+), 57 deletions(-) diff --git a/src/js/views/User.js b/src/js/views/User.js index 0be4882e..f2ba7f2a 100755 --- a/src/js/views/User.js +++ b/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 (
- -
- -
-
- + + +
+ +
+

{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }

- -
    - {this.isMe() ?
  • You
    • : null} -
  • {this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists
    • -
  • {this.props.user.followers.total.toLocaleString()} followers
    • -
- +

+
    +
  • {this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists
    • +
  • {this.props.user.followers.total.toLocaleString()} followers
    • + {this.isMe() ?
  • You
    • : null} +
+

-
- -
- - this.loadMore() }/> -
- -
+
+ +
+
+

Playlists

+ + this.loadMore() }/> +
) } else { return ( -
-
+

diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index c7374ed6..b2c4e369 100755 --- a/src/scss/components/_header.scss +++ b/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; diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 086b95ec..c691fea3 100755 --- a/src/scss/global/_core.scss +++ b/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 { diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 17356136..a3b2120c 100755 --- a/src/scss/global/_forms.scss +++ b/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; } } diff --git a/src/scss/views/_album.scss b/src/scss/views/_album.scss index fa3d6345..abfd81e1 100755 --- a/src/scss/views/_album.scss +++ b/src/scss/views/_album.scss @@ -33,23 +33,32 @@ main .album-view { } @include responsive( $bp_medium ){ - .title { - padding: 0 20px 20px; + padding-top: 0; + padding-left: 10px; + + .thumbnail-wrapper { + width: 40%; + padding: 10px 20px 10px 10px; + + .thumbnail { + float: none; + max-width: none; + margin: 0 0 0 0; + } } - .thumbnail { - float: none; - max-width: none; - margin: 0 0 0 0; + .title { + padding: 20px 20px 20px 40%; + min-height: 30vw; - .image { - padding-bottom: 70%; + .details { + padding: 5px 0; } } .actions { text-align: center; - padding-bottom: 20px; + padding: 20px 5px; } } } diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index fa7a7049..4715b5e7 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -32,7 +32,7 @@ } h1 { - color: #FFFFFF; + color: $white; padding-bottom: 25px; } diff --git a/src/scss/views/_playlist.scss b/src/scss/views/_playlist.scss index b99cd7bf..258d52bb 100755 --- a/src/scss/views/_playlist.scss +++ b/src/scss/views/_playlist.scss @@ -33,23 +33,32 @@ main .playlist-view { } @include responsive( $bp_medium ){ - .title { - padding: 20px 20px; + padding-top: 0; + padding-left: 10px; + + .thumbnail-wrapper { + width: 40%; + padding: 10px 20px 10px 10px; + + .thumbnail { + float: none; + max-width: none; + margin: 0 0 0 0; + } } - .thumbnail { - float: none; - max-width: none; - margin: 0 0 0 0; + .title { + padding: 20px 20px 20px 40%; + min-height: 30vw; - .image { - padding-bottom: 70%; + .details { + padding: 5px 0; } } .actions { text-align: center; - padding-bottom: 20px; + padding: 20px 5px; } } } diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss index 77905647..d8f6ac4d 100755 --- a/src/scss/views/_search.scss +++ b/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; diff --git a/src/scss/views/_user.scss b/src/scss/views/_user.scss index 6850f774..bfdc537a 100755 --- a/src/scss/views/_user.scss +++ b/src/scss/views/_user.scss @@ -2,20 +2,42 @@ .user-view { .intro { @include clearfix(); - padding-bottom: 20px; + position: relative; - .thumbnail { - max-width: 200px; - margin: 40px 40px 0 40px; - float: left; + .parallax { + position: absolute; + z-index: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: auto; } - h1 { - padding-top: 80px; - } + .liner { + position: relative; + z-index: 1; + padding: 30vh 40px 40px 260px; - .actions { - padding-top: 20px; + .thumbnail { + 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 {