secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
James Barnsley
2017-06-23 08:57:26 +12:00
parent 278d6f73be
commit ff20a23d9a
9 changed files with 121 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/js/views/User.js
View File

@ -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>
<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.followers.total.toLocaleString()} followers</li>
</ul>
<h2>
<ul className="details">
<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
<li>{this.props.user.followers.total.toLocaleString()} followers</li>
{this.isMe() ? <li>You</li> : null}
</ul>
</h2>
<div className="actions">
<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
</div>
</div>
<div className="main">
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
</section>
</div>
</div>
<div className="content-wrapper">
<section className="grid-wrapper">
<h4>Playlists</h4>
<PlaylistGrid playlists={playlists} />
<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
</section>
</div>
</div>
)
} else {
return (
<div className="view user-view">
<Header icon="play" title="User" />
<div className="view user-view">
<div className="intro">
<Thumbnail circle size="medium" images={[]} />
<h1><span className="placeholder"></span></h1>

6
src/scss/components/_header.scss
View File

@ -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;

2
src/scss/global/_core.scss
View File

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

4
src/scss/global/_forms.scss
View File

@ -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;
}
}

27
src/scss/views/_album.scss
View File

@ -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;
}
}
}

2
src/scss/views/_artist.scss
View File

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

27
src/scss/views/_playlist.scss
View File

@ -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;
}
}
}

12
src/scss/views/_search.scss
View File

@ -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;

44
src/scss/views/_user.scss
View File

@ -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 {