secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Grid and list fields; Dater sentence; Testing parallax

Browse Source
This commit is contained in:
James Barnsley
2016-11-04 09:35:39 +13:00
parent 6cee0a9daf
commit 54718b3a7b
26 changed files with 329 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/views/Artist.js
View File

@ -56,7 +56,7 @@ class Artist extends React.Component{
return (
<div className="view artist-view">
<Parallax images={ artist.images } />
<Parallax images={artist.images} />
<div className="intro">
<Thumbnail size="huge" images={ artist.images } />

38
src/js/views/Search.js
View File

@ -65,27 +65,37 @@ class Search extends React.Component{
render(){
return (
<div className="view search-view">
<Header
icon="search"
title="Search results"
/>
<div className="cf">
<div className="col w33">
<h4>Artists</h4>
<ArtistGrid className="mini" artists={ this.compiledArtists() } />
</div>
<div className="col w33">
<h4 >Albums</h4>
<AlbumGrid className="mini" albums={ this.compiledAlbums() } />
</div>
<div className="col w33">
<h4>Playlists</h4>
<PlaylistGrid className="mini" playlists={ this.compiledPlaylists() } />
</div>
<div className="search-result-sections cf">
<section>
<div className="inner">
<h4>Artists</h4>
<ArtistGrid className="mini" artists={ this.compiledArtists() } />
</div>
</section>
<section>
<div className="inner">
<h4 >Albums</h4>
<AlbumGrid className="mini" albums={ this.compiledAlbums() } />
</div>
</section>
<section>
<div className="inner">
<h4>Playlists</h4>
<PlaylistGrid className="mini" playlists={ this.compiledPlaylists() } />
</div>
</section>
</div>
<TrackList tracks={ this.compiledTracks() } />
<section className="list-wrapper">
<TrackList tracks={ this.compiledTracks() } />
</section>
</div>
);
}

4
src/js/views/discover/DiscoverCategories.js
View File

@ -23,7 +23,9 @@ class DiscoverCategories extends React.Component{
return (
<div className="view discover-categories-view">
<Header icon="grid" title="Genre / Mood" />
{ this.props.spotify.categories ? <CategoryGrid categories={this.props.spotify.categories.items} /> : null }
<section className="grid-wrapper">
{ this.props.spotify.categories ? <CategoryGrid categories={this.props.spotify.categories.items} /> : null }
</section>
</div>
);
}

4
src/js/views/discover/DiscoverCategory.js
View File

@ -38,7 +38,9 @@ class DiscoverCategory extends React.Component{
return (
<div className="view discover-categories-view">
<Header icon="grid" title={this.props.spotify.category.name} />
{ this.props.spotify.category_playlists ? <PlaylistGrid playlists={this.props.spotify.category_playlists.items} /> : null }
<section className="grid-wrapper">
{ this.props.spotify.category_playlists ? <PlaylistGrid playlists={this.props.spotify.category_playlists.items} /> : null }
</section>
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);

4
src/js/views/discover/DiscoverFeatured.js
View File

@ -23,7 +23,9 @@ class DiscoverFeatured extends React.Component{
return (
<div className="view discover-featured-view">
<Header icon="star" title="Featured playlists" />
{ this.props.spotify.featured_playlists ? <PlaylistGrid playlists={this.props.spotify.featured_playlists.playlists.items} /> : null }
<section className="grid-wrapper">
{ this.props.spotify.featured_playlists ? <PlaylistGrid playlists={this.props.spotify.featured_playlists.playlists.items} /> : null }
</section>
</div>
);
}

4
src/js/views/discover/DiscoverNewReleases.js
View File

@ -29,7 +29,9 @@ class DiscoverNewReleases extends React.Component{
return (
<div className="view discover-new-releases-view">
<Header icon="leaf" title="New Releases" />
{ this.props.spotify.new_releases ? <AlbumGrid albums={this.props.spotify.new_releases.items} /> : null }
<section className="grid-wrapper">
{ this.props.spotify.new_releases ? <AlbumGrid albums={this.props.spotify.new_releases.items} /> : null }
</section>
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);

4
src/js/views/library/LibraryAlbums.js
View File

@ -33,7 +33,9 @@ class LibraryAlbums extends React.Component{
icon="cd"
title="My albums"
/>
{ this.props.spotify.library_albums ? <AlbumGrid albums={this.props.spotify.library_albums.items} /> : null }
<section className="grid-wrapper">
{ this.props.spotify.library_albums ? <AlbumGrid albums={this.props.spotify.library_albums.items} /> : null }
</section>
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);

4
src/js/views/library/LibraryArtists.js
View File

@ -34,7 +34,9 @@ class LibraryArtists extends React.Component{
icon="mic"
title="My artists"
/>
{ this.props.spotify.library_artists ? <ArtistGrid artists={this.props.spotify.library_artists.items} /> : null }
<section className="grid-wrapper">
{ this.props.spotify.library_artists ? <ArtistGrid artists={this.props.spotify.library_artists.items} /> : null }
</section>
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);

20
src/js/views/library/LibraryLocal.js
View File

@ -36,15 +36,17 @@ export default class LibraryLocal extends React.Component{
return (
<div className="view library-local-view">
<Header icon="folder" title="Local" />
<div className="grid category-grid">
{
grid_items.map(
(item, index) => {
return <GridItem item={item} key={index} link={item.link} />
}
)
}
</div>
<section className="grid-wrapper">
<div className="grid category-grid">
{
grid_items.map(
(item, index) => {
return <GridItem item={item} key={index} link={item.link} />
}
)
}
</div>
</section>
</div>
);
}

4
src/js/views/library/LibraryLocalArtists.js
View File

@ -38,9 +38,9 @@ class LibraryLocalArtists extends React.Component{
return (
<div className="view library-local-view">
<Header icon="music" title="Local artists" />
<div>
<section className="list-wrapper">
<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.artists} link_prefix="/artist/" />
</div>
</section>
</div>
);
}

4
src/js/views/library/LibraryLocalDirectory.js
View File

@ -46,9 +46,9 @@ class LibraryLocalDirectory extends React.Component{
return (
<div className="view library-local-view">
<Header icon="music" title="Local files" />
<div>
<section className="list-wrapper">
<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.directory} link_prefix="/library/local/directory/" />
</div>
</section>
</div>
);
}

4
src/js/views/library/LibraryPlaylists.js
View File

@ -68,7 +68,9 @@ class LibraryPlaylists extends React.Component{
icon="playlist"
title="My playlists"
/>
{ this.renderPlaylists() }
<section className="list-wrapper">
{ this.renderPlaylists() }
</section>
</div>
)
}

4
src/js/views/library/LibraryTracks.js
View File

@ -25,7 +25,9 @@ class LibraryTracks extends React.Component{
return (
<div className="view library-tracks-view">
<Header icon="music" title="My tracks" />
{ this.props.spotify.library_tracks ? <TrackList tracks={this.props.spotify.library_tracks.items} /> : null }
<section className="list-wrapper">
{ this.props.spotify.library_tracks ? <TrackList tracks={this.props.spotify.library_tracks.items} /> : null }
</section>
</div>
);
}