From cab77420f3af02f631af76371a98b340c8d590c1 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 6 Jan 2017 15:46:46 +1300
Subject: [PATCH] Fixes for #23 and #24

---
 src/js/views/library/LibraryAlbums.js         |  2 +-
 src/scss/components/_lists.scss               | 13 ++++-
 src/scss/components/_player.scss              | 10 ++--
 .../components/_sidebar-toggle-button.scss    |  2 +-
 src/scss/views/_library.scss                  | 50 +++++++++++++++++++
 5 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js
index e29efb4e..d5a51562 100755
--- a/src/js/views/library/LibraryAlbums.js
+++ b/src/js/views/library/LibraryAlbums.js
@@ -80,8 +80,8 @@ class LibraryAlbums extends React.Component{
 									<div className="detail">
 										<h3>{ album.name }</h3>
 										<h4><ArtistSentence className="grey-text" artists={album.artists} /></h4>
-										<TrackList tracks={album.tracks.items} />
 									</div>
+									<TrackList tracks={album.tracks.items} />
 								</div>
 							)
 						})
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 967af891..3327d161 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -90,7 +90,7 @@
 
 
 		@include responsive( $bp_medium ){
-			padding: 7px 10px 7px 30px;
+			padding: 7px 10px 7px 20px;
 
 			.col {
 				&.name { width: 50%; }
@@ -105,7 +105,16 @@
 
 			.select-state {
 				top: 11px;
-				left: 10px;
+				left: 5px !important;
+			}
+			.play-state {
+				left: 5px;
+			}
+
+			&.playing.selected {
+				.play-state {
+					display: none;
+				}
 			}
 		}
 
diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss
index 85581846..d41751ef 100755
--- a/src/scss/components/_player.scss
+++ b/src/scss/components/_player.scss
@@ -72,14 +72,15 @@
 			right: 0;
 			width: auto;
 			background: $dark_grey;
+			padding: 10px;
 
 			.controls {
 				position: absolute;
-				top: 10px;
-				left: 10px;
+				top: 5px;
+				left: 5px;
 
 				a {
-					padding: 13px;
+					padding: 12px;
 				}
 
 				.volume-control {
@@ -103,7 +104,8 @@
 
 			.current-track {
 				font-size: 12px;
-				padding-bottom: 0;
+				padding: 0 20px 0 70px;
+				line-height: 14px;
 			}
 		}
 	}
diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss
index 2a349494..bd34ecab 100755
--- a/src/scss/components/_sidebar-toggle-button.scss
+++ b/src/scss/components/_sidebar-toggle-button.scss
@@ -4,7 +4,7 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	padding: 20px;
+	padding: 18px;
 	z-index: 98;
 	color: #FFFFFF;
 	font-size: 18px;
diff --git a/src/scss/views/_library.scss b/src/scss/views/_library.scss
index 10c82bf4..0984cf1c 100755
--- a/src/scss/views/_library.scss
+++ b/src/scss/views/_library.scss
@@ -21,5 +21,55 @@
 				padding: 0 0 10px 40px;
 			}
 		}
+
+		.track-list {			
+			padding-left: 220px;
+		}
+	}
+
+	@include responsive( $bp_wide ){
+
+		.albums-detail-subview > .album {
+			.thumbnail {
+				max-width: 160px;
+			}
+
+			.detail,
+			.track-list {
+				padding-left: 160px;
+			}
+		}
+	}
+
+	@include responsive( 600px ){
+		
+		.albums-detail-subview {
+			padding: 20px 0;
+		}
+		
+		.albums-detail-subview > .album {
+			.thumbnail {
+				max-width: 60px;
+				margin-left: 20px;
+			}
+
+			.detail {
+				padding-left: 80px;
+				min-height: 70px;
+
+				h3 {
+					padding-left: 10px;
+					padding-top: 8px;
+				}
+
+				h4 {
+					padding-left: 10px;
+				}
+			}
+
+			.track-list {
+				padding-left: 0px;
+			}
+		}
 	}
 }