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

35
mopidy_iris/static/app.css
View File

@ -2910,8 +2910,12 @@ main a:hover {
border-color: #000000;
}
main section {
padding: 40px;
main section.grid-wrapper {
padding: 40px 20px;
}
main section.list-wrapper {
padding: 20px 0;
}
main h1 {
@ -3364,6 +3368,11 @@ label .input input {
filter: invert(1);
}
.search-form {
z-index: 2;
position: relative;
}
.search-form input {
background: transparent;
border-bottom: 1px solid #FFFFFF;
@ -3450,7 +3459,7 @@ aside .thumbnail {
height: auto;
width: auto;
max-width: none;
z-index: -1;
z-index: 1;
opacity: 0.2;
}
@ -3462,6 +3471,8 @@ aside .thumbnail .image {
}
aside nav {
z-index: 2;
position: relative;
padding-top: 20px;
}
@ -3513,6 +3524,7 @@ aside .player {
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 14px;
color: #FFFFFF;
}
@ -3612,10 +3624,6 @@ aside .player .artist-sentence .artist:hover {
opacity: 0.8;
}
.grid {
padding: 40px 20px;
}
.grid .grid-item {
width: 16%;
margin: 0 2% 3%;
@ -3965,4 +3973,17 @@ main header h1 {
font-weight: 700;
}
.search-view .search-result-sections {
padding: 0 10px;
}
.search-view .search-result-sections section {
width: 33.3334%;
float: left;
}
.search-view .search-result-sections section .inner {
padding: 10px;
}
/*# sourceMappingURL=app.css.map*/

2
mopidy_iris/static/app.css.map
View File

File diff suppressed because one or more lines are too long

205
mopidy_iris/static/app.js
View File

@ -8106,9 +8106,17 @@
return _possibleConstructorReturn(this, (Dater.__proto__ || Object.getPrototypeOf(Dater)).call(this, props));
}
/**
* Format time duration
*
* @param milliseconds int
* @return string (HH:mm:ss)
**/
_createClass(Dater, [{
key: 'formatDuration',
value: function formatDuration() {
key: 'durationTime',
value: function durationTime() {
var milliseconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (!milliseconds) return null;
@ -8136,6 +8144,33 @@
return string;
}
/**
* Format time duration as a human-friendly sentence
*
* @param milliseconds int
* @return string (eg 2+ hours)
**/
}, {
key: 'durationSentence',
value: function durationSentence() {
var milliseconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (!milliseconds) return null;
var string = '';
var total_hours, total_minutes, total_seconds, minutes, seconds;
// get total values for each
total_seconds = Math.floor(milliseconds / 1000);
total_minutes = Math.floor(milliseconds / (1000 * 60));
total_hours = Math.floor(milliseconds / (1000 * 60 * 60));
if (total_hours > 1) return total_hours + '+ hrs';
if (total_minutes > 1) return total_minutes + ' mins';
if (total_seconds) return total_seconds + ' sec';
}
}, {
key: 'calculate',
value: function calculate() {
@ -8148,11 +8183,11 @@
if (tracks[i].duration_ms) duration += parseInt(tracks[i].duration_ms);
if (tracks[i].length) duration += parseInt(tracks[i].length);
}
return this.formatDuration(duration);
return this.durationSentence(duration);
break;
case 'length':
return this.formatDuration(this.props.data);
return this.durationTime(this.props.data);
break;
case 'date':
@ -11150,7 +11185,7 @@
/* 99 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_RESULT__;var require;/* WEBPACK VAR INJECTION */(function(process) {/** @license MIT License (c) copyright 2010-2014 original author or authors */
var require;var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(process) {/** @license MIT License (c) copyright 2010-2014 original author or authors */
/** @author Brian Cavalier */
/** @author John Hann */
@ -11379,11 +11414,13 @@
height: 0
},
image: {},
loaded: false
loaded: false,
url: false
};
// we need to manually bind this as eventListener doesn't work with anonymous functions
_this.handleResize = _this.handleResize.bind(_this);
_this.handleScroll = _this.handleScroll.bind(_this);
return _this;
}
@ -11394,22 +11431,31 @@
var url = helpers.sizedImages(this.props.images).huge;
this.loadImage(url).then(function (response) {
_this2.setState({ image: response, loaded: true });
_this2.setState({ url: url, image: response, loaded: true });
_this2.updateCanvas(response);
});
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
}
}, {
key: 'handleResize',
value: function handleResize() {
value: function handleResize(e) {
this.updateCanvas(this.state.image);
}
}, {
key: 'handleScroll',
value: function handleScroll(e) {
// this DOES work, but is in no way high-performing
this.setState({ scrollTop: e.pageY }, this.updateCanvas(this.state.image));
}
}, {
key: 'loadImage',
value: function loadImage(url) {
@ -11738,7 +11784,10 @@
var _this7 = this;
var mopidy_track = false;
if (typeof this.props.mopidy.current_tltrack !== 'undefined' && typeof this.props.mopidy.current_tltrack.track !== 'undefined') mopidy_track = this.props.mopidy.current_tltrack;
var images = [];
if (typeof this.props.mopidy.current_tltrack !== 'undefined' && typeof this.props.mopidy.current_tltrack.track !== 'undefined') {
mopidy_track = this.props.mopidy.current_tltrack;
}
return _react2.default.createElement(
'div',
@ -11747,7 +11796,11 @@
_reactRouter.Link,
{ className: 'artwork', to: '/album/' + this.props.spotify.track.album.uri },
_react2.default.createElement(_Thumbnail2.default, { size: 'huge', images: this.props.spotify.track.album.images })
) : null,
) : _react2.default.createElement(
_reactRouter.Link,
{ className: 'artwork' },
_react2.default.createElement(_Thumbnail2.default, { size: 'huge', images: [] })
),
_react2.default.createElement(
'div',
{ className: 'controls cf' },
@ -21237,39 +21290,55 @@
}),
_react2.default.createElement(
'div',
{ className: 'cf' },
{ className: 'search-result-sections cf' },
_react2.default.createElement(
'div',
{ className: 'col w33' },
'section',
null,
_react2.default.createElement(
'h4',
null,
'Artists'
),
_react2.default.createElement(_ArtistGrid2.default, { className: 'mini', artists: this.compiledArtists() })
'div',
{ className: 'inner' },
_react2.default.createElement(
'h4',
null,
'Artists'
),
_react2.default.createElement(_ArtistGrid2.default, { className: 'mini', artists: this.compiledArtists() })
)
),
_react2.default.createElement(
'div',
{ className: 'col w33' },
'section',
null,
_react2.default.createElement(
'h4',
null,
'Albums'
),
_react2.default.createElement(_AlbumGrid2.default, { className: 'mini', albums: this.compiledAlbums() })
'div',
{ className: 'inner' },
_react2.default.createElement(
'h4',
null,
'Albums'
),
_react2.default.createElement(_AlbumGrid2.default, { className: 'mini', albums: this.compiledAlbums() })
)
),
_react2.default.createElement(
'div',
{ className: 'col w33' },
'section',
null,
_react2.default.createElement(
'h4',
null,
'Playlists'
),
_react2.default.createElement(_PlaylistGrid2.default, { className: 'mini', playlists: this.compiledPlaylists() })
'div',
{ className: 'inner' },
_react2.default.createElement(
'h4',
null,
'Playlists'
),
_react2.default.createElement(_PlaylistGrid2.default, { className: 'mini', playlists: this.compiledPlaylists() })
)
)
),
_react2.default.createElement(_TrackList2.default, { tracks: this.compiledTracks() })
_react2.default.createElement(
'section',
{ className: 'list-wrapper' },
_react2.default.createElement(_TrackList2.default, { tracks: this.compiledTracks() })
)
);
}
}]);
@ -21820,7 +21889,11 @@
'div',
{ className: 'view discover-categories-view' },
_react2.default.createElement(_Header2.default, { icon: 'grid', title: 'Genre / Mood' }),
this.props.spotify.categories ? _react2.default.createElement(_CategoryGrid2.default, { categories: this.props.spotify.categories.items }) : null
_react2.default.createElement(
'section',
{ className: 'grid-wrapper' },
this.props.spotify.categories ? _react2.default.createElement(_CategoryGrid2.default, { categories: this.props.spotify.categories.items }) : null
)
);
}
}]);
@ -21932,7 +22005,11 @@
'div',
{ className: 'view discover-categories-view' },
_react2.default.createElement(_Header2.default, { icon: 'grid', title: this.props.spotify.category.name }),
this.props.spotify.category_playlists ? _react2.default.createElement(_PlaylistGrid2.default, { playlists: this.props.spotify.category_playlists.items }) : null,
_react2.default.createElement(
'section',
{ className: 'grid-wrapper' },
this.props.spotify.category_playlists ? _react2.default.createElement(_PlaylistGrid2.default, { playlists: this.props.spotify.category_playlists.items }) : null
),
_react2.default.createElement(_LazyLoadListener2.default, { loadMore: function loadMore() {
return _this2.loadMore();
} })
@ -22027,7 +22104,11 @@
'div',
{ className: 'view discover-featured-view' },
_react2.default.createElement(_Header2.default, { icon: 'star', title: 'Featured playlists' }),
this.props.spotify.featured_playlists ? _react2.default.createElement(_PlaylistGrid2.default, { playlists: this.props.spotify.featured_playlists.playlists.items }) : null
_react2.default.createElement(
'section',
{ className: 'grid-wrapper' },
this.props.spotify.featured_playlists ? _react2.default.createElement(_PlaylistGrid2.default, { playlists: this.props.spotify.featured_playlists.playlists.items }) : null
)
);
}
}]);
@ -22132,7 +22213,11 @@
'div',
{ className: 'view discover-new-releases-view' },
_react2.default.createElement(_Header2.default, { icon: 'leaf', title: 'New Releases' }),
this.props.spotify.new_releases ? _react2.default.createElement(_AlbumGrid2.default, { albums: this.props.spotify.new_releases.items }) : null,
_react2.default.createElement(
'section',
{ className: 'grid-wrapper' },
this.props.spotify.new_releases ? _react2.default.createElement(_AlbumGrid2.default, { albums: this.props.spotify.new_releases.items }) : null
),
_react2.default.createElement(_LazyLoadListener2.default, { loadMore: function loadMore() {
return _this2.loadMore();
} })
@ -22246,7 +22331,11 @@
icon: 'cd',
title: 'My albums'
}),
this.props.spotify.library_albums ? _react2.default.createElement(_AlbumGrid2.default, { albums: this.props.spotify.library_albums.items }) : null,
_react2.default.createElement(
'section',
{ className: 'grid-wrapper' },
this.props.spotify.library_albums ? _react2.default.createElement(_AlbumGrid2.default, { albums: this.props.spotify.library_albums.items }) : null
),
_react2.default.createElement(_LazyLoadListener2.default, { loadMore: function loadMore() {
return _this2.loadMore();
} })
@ -22363,7 +22452,11 @@
icon: 'mic',
title: 'My artists'
}),
this.props.spotify.library_artists ? _react2.default.createElement(_ArtistGrid2.default, { artists: this.props.spotify.library_artists.items }) : null,
_react2.default.createElement(
'section',
{ className: 'grid-wrapper' },
this.props.spotify.library_artists ? _react2.default.createElement(_ArtistGrid2.default, { artists: this.props.spotify.library_artists.items }) : null
),
_react2.default.createElement(_LazyLoadListener2.default, { loadMore: function loadMore() {
return _this2.loadMore();
} })
@ -22463,11 +22556,15 @@
{ className: 'view library-local-view' },
_react2.default.createElement(_Header2.default, { icon: 'folder', title: 'Local' }),
_react2.default.createElement(
'div',
{ className: 'grid category-grid' },
grid_items.map(function (item, index) {
return _react2.default.createElement(_GridItem2.default, { item: item, key: index, link: item.link });
})
'section',
{ className: 'grid-wrapper' },
_react2.default.createElement(
'div',
{ className: 'grid category-grid' },
grid_items.map(function (item, index) {
return _react2.default.createElement(_GridItem2.default, { item: item, key: index, link: item.link });
})
)
)
);
}
@ -22686,8 +22783,8 @@
{ className: 'view library-local-view' },
_react2.default.createElement(_Header2.default, { icon: 'music', title: 'Local artists' }),
_react2.default.createElement(
'div',
null,
'section',
{ className: 'list-wrapper' },
_react2.default.createElement(_List2.default, { columns: [{ name: 'name', width: '100' }], rows: this.props.mopidy.artists, link_prefix: '/artist/' })
)
);
@ -22814,8 +22911,8 @@
{ className: 'view library-local-view' },
_react2.default.createElement(_Header2.default, { icon: 'music', title: 'Local files' }),
_react2.default.createElement(
'div',
null,
'section',
{ className: 'list-wrapper' },
_react2.default.createElement(_List2.default, { columns: [{ name: 'name', width: '100' }], rows: this.props.mopidy.directory, link_prefix: '/library/local/directory/' })
)
);
@ -22961,7 +23058,11 @@
icon: 'playlist',
title: 'My playlists'
}),
this.renderPlaylists()
_react2.default.createElement(
'section',
{ className: 'list-wrapper' },
this.renderPlaylists()
)
);
}
}]);
@ -23060,7 +23161,11 @@
'div',
{ className: 'view library-tracks-view' },
_react2.default.createElement(_Header2.default, { icon: 'music', title: 'My tracks' }),
this.props.spotify.library_tracks ? _react2.default.createElement(_TrackList2.default, { tracks: this.props.spotify.library_tracks.items }) : null
_react2.default.createElement(
'section',
{ className: 'list-wrapper' },
this.props.spotify.library_tracks ? _react2.default.createElement(_TrackList2.default, { tracks: this.props.spotify.library_tracks.items }) : null
)
);
}
}]);

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

34
src/js/components/Dater.js
View File

@ -7,7 +7,13 @@ export default class Dater extends React.Component{
super(props);
}
formatDuration( milliseconds = false ){
/**
* Format time duration
*
* @param milliseconds int
* @return string (HH:mm:ss)
**/
durationTime( milliseconds = false ){
if( !milliseconds ) return null
var string = '';
@ -34,6 +40,28 @@ export default class Dater extends React.Component{
return string
}
/**
* Format time duration as a human-friendly sentence
*
* @param milliseconds int
* @return string (eg 2+ hours)
**/
durationSentence( milliseconds = false ){
if( !milliseconds ) return null
var string = '';
var total_hours, total_minutes, total_seconds, minutes, seconds;
// get total values for each
total_seconds = Math.floor( milliseconds / 1000 )
total_minutes = Math.floor( milliseconds / (1000 * 60) )
total_hours = Math.floor(milliseconds / (1000 * 60 * 60))
if( total_hours > 1 ) return total_hours+'+ hrs'
if( total_minutes > 1 ) return total_minutes+' mins'
if( total_seconds ) return total_seconds+' sec'
}
calculate(){
switch(this.props.type){
@ -44,11 +72,11 @@ export default class Dater extends React.Component{
if( tracks[i].duration_ms ) duration += parseInt(tracks[i].duration_ms);
if( tracks[i].length ) duration += parseInt(tracks[i].length);
}
return this.formatDuration(duration)
return this.durationSentence(duration)
break
case 'length':
return this.formatDuration(this.props.data)
return this.durationTime(this.props.data)
break
case 'date':

21
src/js/components/Parallax.js
View File

@ -16,11 +16,13 @@ export default class Parallax extends React.Component{
height: 0
},
image: {},
loaded: false
loaded: false,
url: false
}
// we need to manually bind this as eventListener doesn't work with anonymous functions
this.handleResize = this.handleResize.bind(this);
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount(){
@ -28,22 +30,33 @@ export default class Parallax extends React.Component{
this.loadImage( url )
.then(
response => {
this.setState({ image: response, loaded: true })
this.setState({ url: url, image: response, loaded: true })
this.updateCanvas( response )
}
)
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
}
componentWillUnmount() {
componentWillUnmount(){
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
}
handleResize(){
handleResize(e){
this.updateCanvas( this.state.image );
}
handleScroll(e){
// this DOES work, but is in no way high-performing
this.setState(
{ scrollTop: e.pageY },
this.updateCanvas( this.state.image )
)
}
loadImage( url ){
return new Promise( (resolve, reject) => {

7
src/js/components/Player.js
View File

@ -77,12 +77,15 @@ class Player extends React.Component{
renderFullPlayer(){
var mopidy_track = false;
if( typeof(this.props.mopidy.current_tltrack) !== 'undefined' && typeof(this.props.mopidy.current_tltrack.track) !== 'undefined' ) mopidy_track = this.props.mopidy.current_tltrack;
var images = [];
if( typeof(this.props.mopidy.current_tltrack) !== 'undefined' && typeof(this.props.mopidy.current_tltrack.track) !== 'undefined' ){
mopidy_track = this.props.mopidy.current_tltrack;
}
return (
<div className="player">
{ this.props.spotify.track && !this.props.mini ? <Link className="artwork" to={'/album/'+this.props.spotify.track.album.uri}><Thumbnail size="huge" images={this.props.spotify.track.album.images} /></Link> : null }
{ this.props.spotify.track && !this.props.mini ? <Link className="artwork" to={'/album/'+this.props.spotify.track.album.uri}><Thumbnail size="huge" images={this.props.spotify.track.album.images} /></Link> : <Link className="artwork"><Thumbnail size="huge" images={[]} /></Link> }
<div className="controls cf">
<div className="pull-left">

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

1
src/scss/app.scss
View File

@ -22,4 +22,5 @@
@import 'views/album';
@import 'views/playlist';
@import 'views/queue';
@import 'views/search';

2
src/scss/components/_grid.scss
View File

@ -8,8 +8,6 @@
.grid {
padding: 40px 20px;
.grid-item {
@include grid_item( 5 )
margin: 0 2% 3%;

2
src/scss/components/_search-form.scss
View File

@ -1,5 +1,7 @@
.search-form {
z-index: 2;
position: relative;
input {
background: transparent;

5
src/scss/components/_sidebar.scss
View File

@ -19,7 +19,7 @@ aside{
height: auto;
width: auto;
max-width: none;
z-index: -1;
z-index: 1;
opacity: 0.2;
.image {
@ -30,6 +30,8 @@ aside{
}
nav {
z-index: 2;
position: relative;
padding-top: 20px;
a {
@ -82,6 +84,7 @@ aside{
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 14px;
color: #FFFFFF;

8
src/scss/global/_core.scss
View File

@ -32,8 +32,12 @@ main {
}
}
section {
padding: 40px;
section.grid-wrapper {
padding: 40px 20px;
}
section.list-wrapper {
padding: 20px 0;
}
h1 {

14
src/scss/views/_search.scss Executable file
View File

@ -0,0 +1,14 @@
.search-view {
.search-result-sections {
padding: 0 10px;
section {
width: 33.3334%;
float: left;
.inner {
padding: 10px;
}
}
}
}