diff --git a/src/js/views/discover/DiscoverFeatured.js b/src/js/views/discover/DiscoverFeatured.js
index 1ec9c308..5d0cf76e 100755
--- a/src/js/views/discover/DiscoverFeatured.js
+++ b/src/js/views/discover/DiscoverFeatured.js
@@ -3,8 +3,10 @@ import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
-import Header from '../../components/Header'
import PlaylistGrid from '../../components/PlaylistGrid'
+import SidebarToggleButton from '../../components/SidebarToggleButton'
+import Parallax from '../../components/Parallax'
+import Thumbnail from '../../components/Thumbnail'
import * as helpers from '../../helpers'
import * as spotifyActions from '../../services/spotify/actions'
@@ -19,11 +21,31 @@ class DiscoverFeatured extends React.Component{
this.props.spotifyActions.getFeaturedPlaylists();
}
+ renderIntro(playlist = null){
+ if (playlist){
+ return (
+
+
+
+
+
{playlist.name}
+ {playlist.tracks_total} tracks
+
+
+ )
+ } else {
+ return (
+
+ )
+ }
+ }
+
render(){
if (helpers.isLoading(this.props.load_queue,['spotify_browse/featured-playlists'])){
return (
-
@@ -41,11 +63,18 @@ class DiscoverFeatured extends React.Component{
}
}
+ // Pull the first playlist out and we'll use this as a banner
+ var first_playlist = playlists.splice(0,1)
+ if (first_playlist){
+ first_playlist = first_playlist[0]
+ }
+
return (
-
+
+ {this.renderIntro(first_playlist)}
- { playlists ? : null }
+ {playlists ? : null }
);
diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss
index 9dd5f06b..d69624e5 100755
--- a/src/scss/views/_discover.scss
+++ b/src/scss/views/_discover.scss
@@ -103,4 +103,32 @@
padding: 20px;
}
}
+}
+
+.discover-featured-view {
+ .intro {
+ position: relative;
+
+ .parallax {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ }
+
+ .content {
+ padding: 40px;
+ color: $white;
+ position: relative;
+ z-index: 2;
+
+ .thumbnail {
+ float: left;
+ max-width: 200px;
+ margin-right: 40px;
+ }
+ }
+ }
}
\ No newline at end of file