Biography; Albums detail view

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;

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;
 	

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>			
 			)
 		}

src/scss/app.scss

@@ -27,5 +27,6 @@
 @import 'views/playlist';
 @import 'views/queue';
 @import 'views/search';
+@import 'views/library';
 @import 'views/settings';
 

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 ){

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;
+			}
+		}
+	}
+}