From d827f181b70fe51d8bcf9b05a6c65af2c4d39e2a Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 22 Nov 2016 11:10:30 +1300
Subject: [PATCH] Basic responsive

---
 src/js/components/FullPlayer.js               |   4 +-
 src/js/components/MiniPlayer.js               |   8 +-
 src/js/components/ProgressSlider.js           |   2 +-
 src/js/components/Sidebar.js                  | 122 +++++++++---------
 src/js/views/library/LibraryAlbums.js         |   2 +-
 src/scss/components/_player.scss              |  58 ++++++++-
 .../components/_sidebar-toggle-button.scss    |   5 +
 src/scss/components/_sidebar.scss             |  37 +++---
 src/scss/global/_core.scss                    |   6 +-
 src/scss/global/_variables.scss               |  21 ++-
 10 files changed, 174 insertions(+), 91 deletions(-)

diff --git a/src/js/components/FullPlayer.js b/src/js/components/FullPlayer.js
index d1729a09..4a2f4bac 100755
--- a/src/js/components/FullPlayer.js
+++ b/src/js/components/FullPlayer.js
@@ -78,8 +78,8 @@ class FullPlayer extends React.Component{
 				{ this.renderArtwork() }
 
 				<div className="current-track">
-					<div className="title">{ this.props.current_track ? this.props.current_track.name : null }</div>
-					{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : null }
+					<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>
+					{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
 				</div>
 
 				<div className="controls cf">
diff --git a/src/js/components/MiniPlayer.js b/src/js/components/MiniPlayer.js
index 9fa06938..6b08fee2 100755
--- a/src/js/components/MiniPlayer.js
+++ b/src/js/components/MiniPlayer.js
@@ -31,8 +31,8 @@ class MiniPlayer extends React.Component{
 			<div className="player">
 
 				<div className="current-track">
-					<div className="title">{ this.props.current_track ? this.props.current_track.name : null }</div>
-					{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : null }
+					<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>
+					{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
 				</div>
 
 				<div className="controls">
@@ -41,8 +41,10 @@ class MiniPlayer extends React.Component{
 						<FontAwesome name="step-forward" />
 					</a>&nbsp;
 					<VolumeControl />
-					<ProgressSlider />
 				</div>
+
+				<ProgressSlider />
+				
 			</div>
 		);
 	}
diff --git a/src/js/components/ProgressSlider.js b/src/js/components/ProgressSlider.js
index eab2215c..f020de1c 100755
--- a/src/js/components/ProgressSlider.js
+++ b/src/js/components/ProgressSlider.js
@@ -67,7 +67,7 @@ class ProgressSlider extends React.Component{
 		}
 
 		return (
-			<div className='slider horizontal' onClick={ (e) => this.handleClick(e) } >
+			<div className='progress slider horizontal' onClick={ (e) => this.handleClick(e) } >
 				<div className="track">
 					<div className="progress" style={{ width: (percent)+'%' }}></div>
 				</div>
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index c299d30f..e3058f8f 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -22,73 +22,77 @@ class Sidebar extends React.Component{
 	render(){
 		return (
 			<aside>
-				
+					
 				{ this.props.current_track && this.props.current_track.album.images ? <Thumbnail size="large" images={this.props.current_track.album.images} /> : null }
 
-	        	<SearchForm context="sidebar" />
+				<div className="liner">
 
-	        	<nav>
+		        	<SearchForm context="sidebar" />
 
-	        		<section>
-						<Link activeClassName="active" to="/queue">
-							<Icon name="play" className="white" />
-							Now playing
-						</Link>
-					</section>
+		        	<nav>
 
-					<section>
-						<title>Discover</title>
-						<Link activeClassName="active" to="/discover">
-							<Icon name="compass" className="white" />
-							Discover
-						</Link>
-						<Link activeClassName="active" to="/discover/categories">
-							<Icon name="grid" className="white" />
-							Genre / Mood
-						</Link>
-						<Link activeClassName="active" to="/discover/featured">
-							<Icon name="star" className="white" />
-							Featured playlists
-						</Link>
-						<Link activeClassName="active" to="/discover/new-releases">
-							<Icon name="leaf" className="white" />
-							New releases
-						</Link>
-					</section>
+		        		<section>
+							<Link activeClassName="active" to="/queue">
+								<Icon name="play" className="white" />
+								Now playing
+							</Link>
+						</section>
 
-					<section>
-						<title>My Music</title>
-						<Link activeClassName="active" to="/library/playlists">
-							<Icon name="playlist" className="white" />
-							Playlists
-						</Link>
-						<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/artists" : null}>
-							<Icon name="mic" className="white" />
-							Artists
-						</Link>
-						<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/albums" : null}>
-							<Icon name="cd" className="white" />
-							Albums
-						</Link>
-						<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/tracks" : null}>
-							<Icon name="music" className="white" />
-							Tracks
-						</Link>
-						<Link activeClassName="active" to="/library/local">
-							<Icon name="folder" className="white" />
-							Local
-						</Link>
-					</section>
+						<section>
+							<title>Discover</title>
+							<Link activeClassName="active" to="/discover">
+								<Icon name="compass" className="white" />
+								Discover
+							</Link>
+							<Link activeClassName="active" to="/discover/categories">
+								<Icon name="grid" className="white" />
+								Genre / Mood
+							</Link>
+							<Link activeClassName="active" to="/discover/featured">
+								<Icon name="star" className="white" />
+								Featured playlists
+							</Link>
+							<Link activeClassName="active" to="/discover/new-releases">
+								<Icon name="leaf" className="white" />
+								New releases
+							</Link>
+						</section>
 
-					<section>
-						<Link activeClassName="active" to="/settings">
-							<Icon name="cog" className="white" />
-							Settings
-							{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
-						</Link>
-					</section>
+						<section>
+							<title>My Music</title>
+							<Link activeClassName="active" to="/library/playlists">
+								<Icon name="playlist" className="white" />
+								Playlists
+							</Link>
+							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/artists" : null}>
+								<Icon name="mic" className="white" />
+								Artists
+							</Link>
+							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/albums" : null}>
+								<Icon name="cd" className="white" />
+								Albums
+							</Link>
+							<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/tracks" : null}>
+								<Icon name="music" className="white" />
+								Tracks
+							</Link>
+							<Link activeClassName="active" to="/library/local">
+								<Icon name="folder" className="white" />
+								Local
+							</Link>
+						</section>
 
-		        </nav>
+						<section>
+							<Link activeClassName="active" to="/settings">
+								<Icon name="cog" className="white" />
+								Settings
+								{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
+							</Link>
+						</section>
+
+			        </nav>
+
+			    </div>
 
 		       	<Dropzones />
 		        <MiniPlayer />
diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js
index fd473493..d7b30f54 100755
--- a/src/js/views/library/LibraryAlbums.js
+++ b/src/js/views/library/LibraryAlbums.js
@@ -17,7 +17,7 @@ import * as spotifyActions from '../../services/spotify/actions'
 class LibraryAlbums extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
 	}
 
 	componentDidMount(){
diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss
index b672db34..a24602ac 100755
--- a/src/scss/components/_player.scss
+++ b/src/scss/components/_player.scss
@@ -47,9 +47,61 @@
 	.slider.horizontal {
 		margin-bottom: 0;
 
-		&.animating {
-			.progress{
-				/* @include animate(10s); */
+		.progress{
+			@include animate(1s);
+		}
+	}
+
+	aside & {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 2;
+		padding: 14px;
+		color: #FFFFFF;
+
+		.artist-sentence {
+			.artist:hover {
+				border-color: #FFFFFF !important;
+			}
+		}
+
+		@include responsive( $bp_medium, $bp_shallow ){
+			position: fixed;
+			background: $dark_grey;
+
+			.controls {
+				position: absolute;
+				top: 10px;
+				left: 10px;
+
+				a {
+					padding: 13px;
+				}
+
+				.volume-control {
+					display: none;
+				}
+			}
+
+			.slider.progress {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				margin: 0;
+				height: 2px;
+
+				.track {
+					top: 0px;
+					background: transparent;
+				}
+			}
+
+			.current-track {
+				font-size: 12px;
+				padding-bottom: 0;
 			}
 		}
 	}
diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss
index 81378566..be31ee0f 100755
--- a/src/scss/components/_sidebar-toggle-button.scss
+++ b/src/scss/components/_sidebar-toggle-button.scss
@@ -9,6 +9,11 @@
 	color: #FFFFFF;
 	font-size: 18px;
 	cursor: pointer;
+	display: none;
+
+	@include responsive( $bp_medium ){
+		display: block;
+	}
 
 	&.open {
 		.open {
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 880ca0fa..086497c9 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -1,16 +1,27 @@
 
 aside{
-	
 	position: fixed;
 	top: 0;
 	left: 0;
 	bottom: 0;
+	z-index: 95;
 	background: #111111;
 	width: 200px;
 	overflow: hidden;
 	box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
 
-	@include responsive( 800px ){
+	.liner {
+		overflow-y: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		box-sizing: border-box;
+		z-index: 2;
+	}
+
+	@include responsive( $bp_medium ){
 		width: 50%;
 		left: -50%;
 
@@ -18,6 +29,12 @@ aside{
 			left: 0px;
 		}
 	}
+
+	@include responsive( null, $bp_shallow ){
+		.liner {
+			bottom: 60px;
+		}
+	}
 	
 	.thumbnail {
 		position: absolute;
@@ -87,20 +104,4 @@ aside{
 		}
 
 	}
-
-	.player {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 2;
-		padding: 14px;
-		color: #FFFFFF;
-
-		.artist-sentence {
-			.artist:hover {
-				border-color: #FFFFFF !important;
-			}
-		}
-	}
 }
\ No newline at end of file
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 36f17086..73922455 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -17,7 +17,11 @@ main,
 footer {
 	margin-left: 200px;
 
-	@include responsive( 800px ){
+	@include responsive( null, $bp_shallow ){
+		padding-bottom: 60px;
+	}
+
+	@include responsive( $bp_medium ){
 		margin-left: 0;
 
 		.sidebar-open & {
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 09d7edc4..eb4d9826 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -9,6 +9,11 @@ $red: #cf2d2d;
 $green: #47af2a;
 $blue: #32b5f2;
 
+$bp_wide: 1000px;
+$bp_medium: 800px;
+$bp_narrow: 350px;
+$bp_shallow: 700px;
+
 @mixin one_line_text {
 	white-space: nowrap;
 	overflow: hidden;
@@ -46,9 +51,19 @@ $blue: #32b5f2;
 	filter: blur( $size );
 }
 
-@mixin responsive( $width ){
-	@media (max-width: $width){ 
-		@content;
+@mixin responsive( $width: null, $height: null ){
+	@if $width && $height {
+		@media( max-width: $width ), ( max-height: $height ){ 
+			@content;
+		}
+	}@else if $width {
+		@media( max-width: $width ){ 
+			@content;
+		}
+	}@else if $height {
+		@media( max-height: $height ){ 
+			@content;
+		}
 	}
 }