added listitem-horizontal
This commit is contained in:
booploops
parent
63b1293903
commit
cb7c6e0922
7 changed files with 5143 additions and 51 deletions
|
|
@ -66,6 +66,7 @@ export class BrowserWindow {
|
|||
"components/listennow-child",
|
||||
"components/mediaitem-mvview-sp",
|
||||
"components/animatedartwork-view",
|
||||
"components/listitem-horizontal",
|
||||
"components/lyrics-view",
|
||||
"components/fullscreen",
|
||||
"components/miniplayer",
|
||||
|
|
|
|||
|
|
@ -3569,6 +3569,13 @@ const app = new Vue({
|
|||
darwinShare(url) {
|
||||
ipcRenderer.send('share-menu', url)
|
||||
},
|
||||
arrayToChunk(arr, chunkSize) {
|
||||
let R = [];
|
||||
for (let i = 0, len = arr.length; i < len; i += chunkSize) {
|
||||
R.push(arr.slice(i, i + chunkSize));
|
||||
}
|
||||
return R;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
5053
src/renderer/less/bootstrap.less
vendored
5053
src/renderer/less/bootstrap.less
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -2977,7 +2977,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
padding-top: var(--navigationBarHeight);
|
||||
|
||||
.playlist-body {
|
||||
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
|
||||
padding: var(--contentInnerPadding) 2em;
|
||||
margin-top: -75px;
|
||||
}
|
||||
|
||||
|
|
@ -3445,7 +3445,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
.artist-body {
|
||||
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
|
||||
margin-top: -140px;
|
||||
margin: -140px 20px;
|
||||
}
|
||||
|
||||
&.animated > .artist-body {
|
||||
|
|
@ -5410,26 +5410,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
// Cider App
|
||||
|
||||
.listitem-horizontal {
|
||||
.cd-mediaitem-list-item {
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaitem-list-item__grid {
|
||||
overflow-x: overlay;
|
||||
overflow-y: hidden;
|
||||
background: rgba(200, 200, 200, 0.05);
|
||||
border-radius: 10px;
|
||||
padding: var(--contentInnerPadding);
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.grid-body {
|
||||
display: grid;
|
||||
grid-auto-flow: column dense;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
grid-gap: 0 6px;
|
||||
padding: 2px 0;
|
||||
justify-content: left;
|
||||
width: 0;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
.cd-mediaitem-list-item {
|
||||
width: 350px;
|
||||
|
|
|
|||
43
src/renderer/views/components/listitem-horizontal.ejs
Normal file
43
src/renderer/views/components/listitem-horizontal.ejs
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script type="text/x-template" id="listitem-horizontal">
|
||||
<div class="listitem-horizontal">
|
||||
<vue-horizontal>
|
||||
<div v-for="items in itemPages">
|
||||
<mediaitem-list-item
|
||||
v-for="(song, index) in items"
|
||||
:index="song.index"
|
||||
:item="song"></mediaitem-list-item>
|
||||
</div>
|
||||
</vue-horizontal>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('listitem-horizontal', {
|
||||
template: '#listitem-horizontal',
|
||||
name: "listitem-horizontal",
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
itemPages: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// give every item an id
|
||||
this.items.forEach(function (item, index) {
|
||||
item.id = index;
|
||||
});
|
||||
// split items into pages
|
||||
this.itemPages = app.arrayToChunk(this.items, 4);
|
||||
},
|
||||
methods: {
|
||||
sayHello: function () {
|
||||
alert('Hello world!');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -57,35 +57,32 @@
|
|||
</div>
|
||||
<div class="artist-body">
|
||||
<div class="row well">
|
||||
<div class="col">
|
||||
<div class="col-sm-3" v-if="data.views['latest-release'].data.length != 0">
|
||||
<h3>{{app.getLz('term.latestReleases')}}</h3>
|
||||
<div style="width: auto;margin: 0 auto;">
|
||||
<mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
|
||||
:item="song">
|
||||
</mediaitem-square>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-9" v-if="data.views['top-songs']">
|
||||
<div class="row">
|
||||
<div class="col-auto" v-if="data.views['latest-release'].data.length != 0">
|
||||
<h3>{{app.getLz('term.latestReleases')}}</h3>
|
||||
<div style="width: auto;margin: 0 auto;">
|
||||
<mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
|
||||
:item="song">
|
||||
</mediaitem-square>
|
||||
</div>
|
||||
<div class="col" style="padding:0;">
|
||||
<h3>{{app.getLz('term.topSongs')}}</h3>
|
||||
</div>
|
||||
<div class="col" v-if="data.views['top-songs']">
|
||||
<div class="row">
|
||||
<div class="col" style="padding:0;">
|
||||
<h3>{{app.getLz('term.topSongs')}}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 16" style="padding:0;">
|
||||
<button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mediaitem-list-item__grid">
|
||||
<div class="grid-body">
|
||||
<mediaitem-list-item
|
||||
v-for="(song, index) in data.views['top-songs'].data.limit(16)"
|
||||
:index="index"
|
||||
:item="song"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 16" style="padding:0;">
|
||||
<button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col flex-center" style="padding:0;">
|
||||
<div class="mediaitem-list-item__grid">
|
||||
<listitem-horizontal :items="data.views['top-songs'].data.limit(16)">
|
||||
</listitem-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row well">
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div v-if="page == 'main'">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{app.getLz('home.recentlyPlayed')}}</h3>
|
||||
</div>
|
||||
<div class="col-auto nopadding flex-center">
|
||||
<div class="col-auto flex-center">
|
||||
<button class="cd-btn-seeall" @click="seeAllHistory()">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,11 +20,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row nopadding">
|
||||
<div class="col nopadding">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{app.getLz('home.artistsFeed')}}</h3>
|
||||
</div>
|
||||
<div class="col-auto nopadding flex-center">
|
||||
<div class="col-auto flex-center">
|
||||
<button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,10 +63,10 @@
|
|||
<div class="row" v-if="friendsListeningTo && friendsListeningTo.length > 0">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col nopadding">
|
||||
<div class="col">
|
||||
<h3>{{app.getLz('home.friendsListeningTo')}}</h3>
|
||||
</div>
|
||||
<div class="col-auto nopadding flex-center">
|
||||
<div class="col-auto flex-center">
|
||||
<button class="cd-btn-seeall" @click="app.showSocialListeningTo()">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue