From b1e318c74d7afaf435ee3a2ee55eefae72db29c2 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 25 Nov 2016 16:08:19 +1300
Subject: [PATCH] Biography; Albums detail view

---
 src/js/components/ArtistSentence.js   |  2 +-
 src/js/helpers.js                     | 20 ++++++++++++--------
 src/js/views/library/LibraryAlbums.js | 20 ++++++++++++++++++--
 src/scss/app.scss                     |  1 +
 src/scss/components/_grid.scss        |  8 ++++++++
 src/scss/views/_library.scss          | 25 +++++++++++++++++++++++++
 6 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100755 src/scss/views/_library.scss

diff --git a/src/js/components/ArtistSentence.js b/src/js/components/ArtistSentence.js
index e5f15cce..174a3e2e 100755
--- a/src/js/components/ArtistSentence.js
+++ b/src/js/components/ArtistSentence.js
@@ -13,7 +13,7 @@ export default class ArtistSentence extends React.Component{
 		if( !this.props.artists ) return <span>-</span>
 
 		return (
-			<span className="artist-sentence">
+			<span className={ this.props.className ? this.props.className+" artist-sentence" : "artist-sentence" }>
 				{
 					this.props.artists.map( (artist, index) => {
 						var separator = null;
diff --git a/src/js/helpers.js b/src/js/helpers.js
index f630ca7c..f1b3b804 100755
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -15,14 +15,14 @@ export let sizedImages = function( images ){
 
 		// spotify-styled images
 		if( typeof(images[i].height) !== 'undefined' ){
-			if( images[i].height > 800 ){
-				sizes.huge = images[i].url;
-			}else if( images[i].height > 600 ){
-				sizes.large = images[i].url;
-			}else if( images[i].height > 280 ){
-				sizes.medium = images[i].url;
-			}else{
+			if( images[i].height < 400 ){
 				sizes.small = images[i].url;
+			}else if( images[i].height < 800 ){
+				sizes.medium = images[i].url;
+			}else if( images[i].height < 1000 ){
+				sizes.large = images[i].url;
+			}else{
+				sizes.huge = images[i].url;
 			}
 
 		// lastfm-styled images
@@ -49,7 +49,11 @@ export let sizedImages = function( images ){
 		}
 	}
 
-	if( !sizes.medium )	sizes.medium = sizes.small;
+	if( !sizes.medium ){
+		if( sizes.large ) sizes.medium = sizes.large
+		else if( sizes.huge ) sizes.medium = sizes.huge
+		else sizes.medium = sizes.small
+	}
 	if( !sizes.large ) sizes.large = sizes.medium;
 	if( !sizes.huge ) sizes.huge = sizes.large;
 	
diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js
index d7b30f54..2b603d71 100755
--- a/src/js/views/library/LibraryAlbums.js
+++ b/src/js/views/library/LibraryAlbums.js
@@ -7,6 +7,9 @@ import { Link } from 'react-router'
 import AlbumGrid from '../../components/AlbumGrid'
 import List from '../../components/List'
 import Header from '../../components/Header'
+import Thumbnail from '../../components/Thumbnail'
+import TrackList from '../../components/TrackList'
+import ArtistSentence from '../../components/ArtistSentence'
 import DropdownField from '../../components/DropdownField'
 import LazyLoadListener from '../../components/LazyLoadListener'
 
@@ -68,8 +71,21 @@ class LibraryAlbums extends React.Component{
 			)
 		}else{
 			return (
-				<section className="grid-wrapper">
-					{ this.props.albums ? <AlbumGrid albums={this.props.albums} /> : null }
+				<section className="grid-wrapper albums-detail-subview">
+					{
+						this.props.albums.map( album => {
+							return (
+								<div className="album" key={album.uri}>
+									<Thumbnail size="medium" images={album.images} />
+									<div className="detail">
+										<h3>{ album.name }</h3>
+										<h4><ArtistSentence className="grey-text" artists={album.artists} /></h4>
+										<TrackList tracks={album.tracks.items} />
+									</div>
+								</div>
+							)
+						})
+					}
 				</section>			
 			)
 		}
diff --git a/src/scss/app.scss b/src/scss/app.scss
index c6cb2167..34d8a4ca 100755
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -27,5 +27,6 @@
 @import 'views/playlist';
 @import 'views/queue';
 @import 'views/search';
+@import 'views/library';
 @import 'views/settings';
 
diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss
index 72a7b803..fe916bf4 100755
--- a/src/scss/components/_grid.scss
+++ b/src/scss/components/_grid.scss
@@ -67,6 +67,14 @@
 				color: #FFFFFF;
 			}
 		}
+
+		@include responsive( null, $bp_wide ){
+			.grid-item {
+				.name {
+					font-size: 16px;
+				}
+			}
+		}
 	}
 
 	@include responsive( null, 2400px ){
diff --git a/src/scss/views/_library.scss b/src/scss/views/_library.scss
new file mode 100755
index 00000000..10c82bf4
--- /dev/null
+++ b/src/scss/views/_library.scss
@@ -0,0 +1,25 @@
+
+.library-albums-view {
+	.albums-detail-subview > .album {
+		position: relative;
+		padding-bottom: 40px;
+		min-height: 220px;
+
+		.thumbnail {
+			max-width: 220px;
+			position: absolute;
+		}
+
+		.detail {
+			padding-left: 220px;
+
+			h3 {
+				padding: 0 0 0 40px;
+			}
+
+			h4{
+				padding: 0 0 10px 40px;
+			}
+		}
+	}
+}