From 1887dfc364bfe8656da82b36adfee580594bd31c Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 6 Jan 2017 16:06:31 +1300
Subject: [PATCH] Preliminary fix #17

---
 src/js/components/MiniPlayer.js  |  6 +++---
 src/scss/components/_player.scss | 31 +++++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/js/components/MiniPlayer.js b/src/js/components/MiniPlayer.js
index 15d59487..279a6869 100755
--- a/src/js/components/MiniPlayer.js
+++ b/src/js/components/MiniPlayer.js
@@ -19,9 +19,9 @@ class MiniPlayer extends React.Component{
 	}
 
 	renderPlayButton(){
-		var button = <a onClick={() => this.props.mopidyActions.play()}><FontAwesome name="play" /> </a>
+		var button = <a className="play" onClick={() => this.props.mopidyActions.play()}><FontAwesome name="play" /> </a>
 		if( this.props.play_state == 'playing' ){
-			button = <a onClick={() => this.props.mopidyActions.pause()}><FontAwesome name="pause" /> </a>
+			button = <a className="play" onClick={() => this.props.mopidyActions.pause()}><FontAwesome name="pause" /> </a>
 		}
 		return button;
 	}
@@ -37,7 +37,7 @@ class MiniPlayer extends React.Component{
 
 				<div className="controls">
 					{ this.renderPlayButton() }
-					<a onClick={() => this.props.mopidyActions.next()}>
+					<a className="next" onClick={() => this.props.mopidyActions.next()}>
 						<FontAwesome name="step-forward" />
 					</a>&nbsp;
 					<VolumeControl />
diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss
index d41751ef..b773b329 100755
--- a/src/scss/components/_player.scss
+++ b/src/scss/components/_player.scss
@@ -75,16 +75,35 @@
 			padding: 10px;
 
 			.controls {
-				position: absolute;
-				top: 5px;
-				left: 5px;
+				height: 0px;
 
-				a {
+				.play {
+					position: absolute;
+					top: 5px;
+					left: 5px;
+					padding: 12px;
+				}
+
+				.next {
+					position: absolute;
+					top: 5px;
+					left: 48px;
 					padding: 12px;
 				}
 
 				.volume-control {
-					display: none;
+					position: absolute;
+					top: 5px;
+					right: 5px;
+
+					a {
+						padding: 12px;
+					}
+
+					.slider-wrapper {
+						bottom: 2px;
+						left: 0;
+					}
 				}
 			}
 
@@ -104,7 +123,7 @@
 
 			.current-track {
 				font-size: 12px;
-				padding: 0 20px 0 70px;
+				padding: 0 40px 0 70px;
 				line-height: 14px;
 			}
 		}