added .mediaitem-list-item__grid

This commit is contained in:
booploops 2022-01-25 03:15:06 -08:00
parent 798cfb9828
commit be3b0b3108
3 changed files with 55 additions and 25 deletions

View file

@ -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;

View file

@ -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>

View file

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