Artist responsive; playURIs bug; menu reveal

src/js/components/Header.js

@@ -1,6 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import Icon from './Icon'
+import SidebarToggleButton from './SidebarToggleButton'
 
 export default class Header extends React.Component{
 
@@ -12,6 +13,7 @@ export default class Header extends React.Component{
 		return (
 			<header>
 				<Icon name={ this.props.icon } />
+				<SidebarToggleButton />
 				<h1>{ this.props.title }</h1>
 				{ this.props.actions ? <div className="actions">{ this.props.actions }</div> : null }
 			</header>

src/js/components/TrackList.js

@@ -173,7 +173,7 @@ class TrackList extends React.Component{
 		for( var i = 0; i < tracks.length; i++ ){
 			uris.push( tracks[i].uri )
 		}
-		return this.props.mopidyActions.playTracks( uris )
+		return this.props.mopidyActions.playURIs( uris )
 	}
 
 	removeTracks(){

src/js/views/Album.js

@@ -12,6 +12,7 @@ import ArtistGrid from '../components/ArtistGrid'
 import FollowButton from '../components/FollowButton'
 import Dater from '../components/Dater'
 import LazyLoadListener from '../components/LazyLoadListener'
+import SidebarToggleButton from '../components/SidebarToggleButton'
 
 import * as helpers from '../helpers'
 import * as mopidyActions from '../services/mopidy/actions'
@@ -69,6 +70,7 @@ class Album extends React.Component{
 
 		return (
 			<div className="view album-view">
+		        <SidebarToggleButton />
 				<div className="intro">
 					<Thumbnail size="large" images={ this.props.album.images } />
 					<ArtistGrid artists={ this.props.album.artists } />

src/js/views/App.js

@@ -114,7 +114,6 @@ class App extends React.Component{
 			<div className={className}>
 		        <Sidebar />
 		        <main>
-		        	<SidebarToggleButton />
 		      		{this.props.children}
 		        </main>
 		        <ContextMenu state={this.props.context_menu} />

src/js/views/Artist.js

@@ -13,6 +13,7 @@ import Parallax from '../components/Parallax'
 import ArtistList from '../components/ArtistList'
 import ArtistGrid from '../components/ArtistGrid'
 import FollowButton from '../components/FollowButton'
+import SidebarToggleButton from '../components/SidebarToggleButton'
 
 import * as helpers from '../helpers'
 import * as mopidyActions from '../services/mopidy/actions'
@@ -81,7 +82,7 @@ class Artist extends React.Component{
 
 		if( this.state.sub_view == 'related_artists' ){
 			return (
-				<div>
+				<div className="body related-artists">
 					<h4 className="left-padding">Related artists</h4>
 					<section className="grid-wrapper no-top-padding">
 						{ this.props.artist.related_artists ? <ArtistGrid artists={ this.props.artist.related_artists } /> : null }
@@ -90,7 +91,7 @@ class Artist extends React.Component{
 			)
 		}else if( this.state.sub_view == 'biography' ){
 			return (
-				<div>
+				<div className="body biography">
 					<h4 className="left-padding">Biography</h4>
 					<section className="text-wrapper no-top-padding">
 						<p>Biography here</p>
@@ -101,7 +102,7 @@ class Artist extends React.Component{
 
 		// default body
 		return (
-			<div>
+			<div className="body overview">
 				<div className="col w70">
 					<h4 className="left-padding">Top tracks</h4>
 					{ this.props.artist.tracks ? <TrackList tracks={ this.props.artist.tracks } /> : null }
@@ -109,7 +110,7 @@ class Artist extends React.Component{
 
 				<div className="col w5"></div>
 
-				<div className="col w25">
+				<div className="col w25 related-artists">
 					<h4>Related artists</h4>
 					{ this.props.artist.related_artists ? <ArtistList artists={ this.props.artist.related_artists.slice(0,6) } /> : null }
 				</div>
@@ -135,6 +136,8 @@ class Artist extends React.Component{
 		return (
 			<div className="view artist-view">
 
+				<SidebarToggleButton />
+
 				<div className="intro">
 
 					<Thumbnail size="huge" images={ images } />

src/js/views/Playlist.js

@@ -11,6 +11,7 @@ import Dater from '../components/Dater'
 import ConfirmationButton from '../components/ConfirmationButton'
 import LazyLoadListener from '../components/LazyLoadListener'
 import FollowButton from '../components/FollowButton'
+import SidebarToggleButton from '../components/SidebarToggleButton'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -130,6 +131,9 @@ class Playlist extends React.Component{
 
 		return (
 			<div className="view playlist-view">
+			
+				<SidebarToggleButton />
+
 				<div className="intro">
 
 					<Thumbnail size="large" images={ this.props.playlist.images } />

src/scss/components/_grid.scss

@@ -69,7 +69,7 @@
 		}
 	}
 
-	@include responsive( 2400px ){
+	@include responsive( null, 2400px ){
 		&.mini {
 			.grid-item {
 				@include grid_item( 3 )
@@ -82,7 +82,7 @@
 		}
 	}
 
-	@include responsive( 1200px, null, 2399px ){
+	@include responsive( 2399px, 1200px ){
 		&.mini {
 			.grid-item {
 				@include grid_item( 2 )
@@ -95,7 +95,7 @@
 		}
 	}
 
-	@include responsive( 850px, null, 1199px ){
+	@include responsive( 1199px, 850px ){
 		&.mini {
 			.grid-item {
 				@include grid_item( 2 )
@@ -108,7 +108,7 @@
 		}
 	}
 
-	@include responsive( null, null, 849px ){
+	@include responsive( 849px ){
 		&:not(.mini){
 			.grid-item {
 				@include grid_item( 3 )

src/scss/components/_header.scss

@@ -16,6 +16,12 @@ main {
 			height: 16px;
 		}
 
+		@include responsive( $bp_medium ){
+			.icon {
+				visibility: hidden;
+			}
+		}
+
 		.actions {
 			position: absolute;
 			top: 0;

src/scss/components/_sidebar-toggle-button.scss

@@ -15,6 +15,10 @@
 		display: block;
 	}
 
+	header & {
+		color: $dark_grey;
+	}
+
 	&.open {
 		.open {
 			display: none;

src/scss/components/_sidebar.scss

@@ -21,7 +21,7 @@ aside{
 		z-index: 2;
 	}
 
-	@include responsive( null, null, $bp_medium ){
+	@include responsive( $bp_medium ){
 		width: 50%;
 		left: -50%;
 
@@ -30,7 +30,7 @@ aside{
 		}
 	}
 
-	@include responsive( null, $bp_shallow ){
+	@include responsive( null, null, $bp_shallow ){
 		.liner {
 			bottom: 60px;
 		}

src/scss/global/_core.scss

@@ -2,7 +2,7 @@
 
 body,
 html {
-	background: #F5F5F5;
+	background: $off_white;
 	color: #000000;
 	font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
 	font-size: 14px;
@@ -17,11 +17,11 @@ main,
 footer {
 	margin-left: 200px;
 
-	@include responsive( null, $bp_shallow ){
+	@include responsive( null, null, $bp_shallow ){
 		padding-bottom: 60px;
 	}
 
-	@include responsive( null, null, $bp_medium ){
+	@include responsive( $bp_medium ){
 		margin-left: 0;
 
 		.sidebar-open & {

src/scss/global/_variables.scss

@@ -1,5 +1,6 @@
 
 $turquoise: #08d58f;
+$off_white: #F5F5F5;
 $faint_grey: #EEEEEE;
 $light_grey: #DDDDDD;
 $mid_grey: #AAAAAA;
@@ -51,7 +52,7 @@ $bp_shallow: 650px;
 	filter: blur( $size );
 }
 
-@mixin responsive( $min_width: null, $max_height: null, $max_width: null ){
+@mixin responsive( $max_width: null, $min_width: null, $max_height: null, $min_height: null ){
 	@if $max_width and $max_height {
 		@media( max-width: $max_width ), ( max-height: $max_height ){ 
 			@content;

src/scss/views/_artist.scss

@@ -47,11 +47,11 @@
 						margin-right: 20px;
 						font-size: 18px;
 						font-weight: 400;
-						border-bottom: 3px solid transparent;
+						border-bottom: 4px solid transparent;
 						cursor: pointer;
 
 						&.active {
-							border-color: #FFFFFF;
+							border-color: $off_white;
 						}
 
 						&:not(.active):hover {
@@ -77,4 +77,60 @@
 	.artist-list {
 		padding-top: 15px;
 	}
+
+	@include responsive( $bp_medium ){
+		.intro {
+
+			padding: 50px 30px 0 30px;
+			margin: 0 0 100px 0;
+
+			.parallax {
+				height: 100%;
+				canvas {
+					@include blur();
+					margin: -20px;
+				}
+			}
+
+			.thumbnail {
+				position: relative;
+				width: 180px;
+				margin: 0 auto 10px;
+				left: auto;
+				bottom: auto;
+			}
+
+			.heading-wrapper {
+				height: auto;
+
+				.heading,
+				.sub-views {
+					position: relative;
+					bottom: auto;
+					left: auto;
+				}
+			}
+
+			.details-wrapper {
+				padding: 0;
+				position: absolute;
+				bottom: -90px;
+				left: 30px;
+				width: 100%;
+				z-index: 2;
+			}
+		}
+
+		.body {
+			&.overview {
+				.col.w70 {
+					width: 100%;
+				}
+				.col.w5,
+				.related-artists {
+					display: none;
+				}
+			}
+		}
+	}
 }