2015-12-13 04:42:28 +00:00
|
|
|
<template>
|
2016-01-06 10:57:45 +00:00
|
|
|
<section id="albumsWrapper">
|
2015-12-13 04:42:28 +00:00
|
|
|
<h1 class="heading">
|
|
|
|
<span>Albums
|
2016-01-06 16:41:59 +00:00
|
|
|
<i class="fa fa-angle-down toggler"
|
2015-12-13 04:42:28 +00:00
|
|
|
v-show="isPhone && !showingControls"
|
|
|
|
@click="showingControls = true"></i>
|
2016-01-06 16:41:59 +00:00
|
|
|
<i class="fa fa-angle-up toggler"
|
2015-12-13 04:42:28 +00:00
|
|
|
v-show="isPhone && showingControls"
|
|
|
|
@click.prevent="showingControls = false"></i>
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<input
|
|
|
|
v-show="!isPhone || showingControls"
|
|
|
|
type="search"
|
|
|
|
v-model="q"
|
|
|
|
:class="{ dirty: q }"
|
|
|
|
debounce="100"
|
|
|
|
placeholder="Search">
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
<div class="albums main-scroll-wrap" v-el:wrapper @scroll="scrolling">
|
|
|
|
<album-item v-for="item in items
|
|
|
|
| orderBy 'name'
|
|
|
|
| filterBy q in 'name' 'artist.name'
|
|
|
|
| limitBy numOfItems" :album="item"></album-item>
|
|
|
|
|
|
|
|
<!--
|
|
|
|
Add several more items to make sure the last row is left-aligned.
|
|
|
|
Credits: http://codepen.io/dalgard/pen/Dbnus
|
|
|
|
-->
|
|
|
|
<span class="item"></span>
|
|
|
|
<span class="item"></span>
|
|
|
|
<span class="item"></span>
|
|
|
|
<span class="item"></span>
|
|
|
|
<span class="item"></span>
|
|
|
|
<span class="item"></span>
|
|
|
|
<span class="item"></span>
|
|
|
|
<span class="item"></span>
|
|
|
|
</div>
|
2016-01-06 10:57:45 +00:00
|
|
|
</section>
|
2015-12-13 04:42:28 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import isMobile from 'ismobilejs';
|
|
|
|
|
|
|
|
import albumItem from '../../shared/album-item.vue';
|
|
|
|
import infiniteScroll from '../../../mixins/infinite-scroll';
|
|
|
|
import albumStore from '../../../stores/album';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
mixins: [infiniteScroll],
|
|
|
|
components: { albumItem },
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
perPage: 9,
|
|
|
|
numOfItems: 9,
|
|
|
|
state: albumStore.state,
|
|
|
|
q: '',
|
|
|
|
isPhone: isMobile.phone,
|
|
|
|
showingControls: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
items() {
|
|
|
|
return this.state.albums;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
events: {
|
|
|
|
/**
|
|
|
|
* When the application is ready, load the first batch of items.
|
|
|
|
*/
|
|
|
|
'koel:ready': function () {
|
|
|
|
this.displayMore();
|
|
|
|
},
|
2015-12-30 04:14:47 +00:00
|
|
|
|
|
|
|
'koel:teardown': function () {
|
|
|
|
this.q = '';
|
|
|
|
this.numOfItems = 9;
|
|
|
|
},
|
2015-12-13 04:42:28 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="sass">
|
|
|
|
@import "resources/assets/sass/partials/_vars.scss";
|
|
|
|
@import "resources/assets/sass/partials/_mixins.scss";
|
|
|
|
|
|
|
|
#albumsWrapper {
|
|
|
|
.albums {
|
|
|
|
@include artist-album-card();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|