added .mediaitem-list-item__grid
This commit is contained in:
parent
798cfb9828
commit
be3b0b3108
3 changed files with 55 additions and 25 deletions
|
@ -5168,7 +5168,39 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
/* Cider */
|
||||
// Cider App
|
||||
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item {
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar {
|
||||
display: initial;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.settings-page {
|
||||
padding:0px;
|
||||
|
|
|
@ -72,23 +72,18 @@
|
|||
<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 >= 10" style="padding:0;">
|
||||
<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(topSongsExpanded ? 10 : 5)"
|
||||
v-for="(song, index) in data.views['top-songs'].data.limit(16)"
|
||||
:index="index"
|
||||
:item="song"></mediaitem-list-item>
|
||||
<button class="showmoreless"
|
||||
@click="topSongsExpanded = !topSongsExpanded">
|
||||
<template v-if="!topSongsExpanded">
|
||||
{{app.getLz('term.showMore')}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{app.getLz('term.showLess')}}
|
||||
</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -19,13 +19,15 @@
|
|||
</div>
|
||||
<div class="col-auto flex-center"
|
||||
@click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
|
||||
v-if="search.results.song.data.length >= 6">
|
||||
v-if="search.results.song.data.length >= 12">
|
||||
<button class="cd-btn-seeall">{{app.getLz('term.seeAll')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mediaitem-list-item__grid">
|
||||
<div class="grid-body">
|
||||
<mediaitem-list-item :item="item" :index="index"
|
||||
v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
|
||||
v-for="(item, index) in search.results.song.data.limit(12)"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -106,24 +108,25 @@
|
|||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
categoriesView : [],
|
||||
categoriesReady : false,
|
||||
categoriesView: [],
|
||||
categoriesReady: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTopResult() {
|
||||
try {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} catch( error ) {
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
},
|
||||
async getCategories() {
|
||||
if(this.categoriesView != [] && this.categoriesView.length > 0) {this.categoriesReady = true; return await true;} else {
|
||||
if (this.categoriesView != [] && this.categoriesView.length > 0) { this.categoriesReady = true; return await true; } else {
|
||||
let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities`);
|
||||
this.categoriesView = response.data.data;
|
||||
this.categoriesReady = true;
|
||||
return await true;}
|
||||
return await true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue