okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changes to home page layout

Browse source
This commit is contained in:
booploops 2022-01-06 21:31:40 -08:00
parent 1a579509c6
commit f50b0752e7
2 changed files with 71 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/renderer/style.less
View file

@ -1760,6 +1760,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
max-width: 420px; max-width: 420px;
} }
.well.artistfeed-well {
margin-top: 0px;
height: 392px;
align-content: flex-start;
}
.hint-text { .hint-text {
font-size: 0.9rem; font-size: 0.9rem;
color: rgb(200 200 200 / 70%); color: rgb(200 200 200 / 70%);

93
src/renderer/views/pages/home.ejs
View file

@ -2,23 +2,9 @@
<div class="content-inner home-page"> <div class="content-inner home-page">
<div v-if="page == 'main'"> <div v-if="page == 'main'">
<div class="row"> <div class="row">
<div class="col">
<h3>Home</h3>
<div class="well profile-well">
<div class="user-icon">
<mediaitem-artwork shadow="none"
:url="(profile && profile.attributes && profile.attributes.artwork) ? profile.attributes.artwork.url : ''"
size="300"></mediaitem-artwork>
</div>
<h3 class="name">{{ (profile && profile.attributes && profile.attributes.name) ?
profile.attributes.name : "" }}</h3>
<h4 class="handle">@{{ (profile && profile.attributes && profile.attributes.handle) ?
profile.attributes.handle : "" }}</h4>
</div>
</div>
<div class="col"> <div class="col">
<h3>Recently Played</h3> <h3>Recently Played</h3>
<div class="well"> <div class="well artistfeed-well">
<template v-if="isSectionReady('recentlyPlayed')"> <template v-if="isSectionReady('recentlyPlayed')">
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)"
:item="item"></mediaitem-list-item> :item="item"></mediaitem-list-item>
@ -26,29 +12,6 @@
<div class="spinner" v-else></div> <div class="spinner" v-else></div>
</div> </div>
</div> </div>
</div>
<!-- <div class="row" v-if="app.isDev">-->
<!-- <div class="col">-->
<!-- <h3>Your Favorites</h3>-->
<!-- <div class="well">-->
<!-- <div class="hint-text" v-if="favorites.length == 0">Items you have added to your favorites will-->
<!-- appear here.-->
<!-- </div>-->
<!-- <mediaitem-scroller-horizontal kind="small" :items="favorites"-->
<!-- :item="item"></mediaitem-scroller-horizontal>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="row">
<div class="col madeforyou-col">
<h3>Made For You</h3>
<div class="well">
<template v-if="isSectionReady('madeForYou')">
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
</template>
<div class="spinner" v-else></div>
</div>
</div>
<div class="col"> <div class="col">
<div class="row nopadding"> <div class="row nopadding">
<div class="col nopadding"> <div class="col nopadding">
@ -58,7 +21,7 @@
<button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">See All</button> <button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">See All</button>
</div> </div>
</div> </div>
<div class="well" style="margin-top:0px;"> <div class="well artistfeed-well" style="margin-top:0px;">
<template v-if="artistFeed.length > 0"> <template v-if="artistFeed.length > 0">
<mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item> <mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
</template> </template>
@ -68,6 +31,29 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="row" v-if="app.isDev">-->
<!-- <div class="col">-->
<!-- <h3>Your Favorites</h3>-->
<!-- <div class="well">-->
<!-- <div class="hint-text" v-if="favorites.length == 0">Items you have added to your favorites will-->
<!-- appear here.-->
<!-- </div>-->
<!-- <mediaitem-scroller-horizontal kind="small" :items="favorites"-->
<!-- :item="item"></mediaitem-scroller-horizontal>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="row">
<div class="col">
<h3>Made For You</h3>
<div class="well">
<template v-if="isSectionReady('madeForYou')">
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
</template>
<div class="spinner" v-else></div>
</div>
</div>
</div>
<div class="row" v-if="friendsListeningTo && friendsListeningTo != []"> <div class="row" v-if="friendsListeningTo && friendsListeningTo != []">
<div class="col"> <div class="col">
<h3>Friends Listening To</h3> <h3>Friends Listening To</h3>
@ -87,7 +73,7 @@
<script> <script>
Vue.component('cider-home', { Vue.component('cider-home', {
template: '#cider-home', template: '#cider-home',
data: function () { data: function() {
return { return {
app: this.$root, app: this.$root,
followedArtists: this.$root.cfg.home.followedArtists, followedArtists: this.$root.cfg.home.followedArtists,
@ -119,7 +105,7 @@
let self = this let self = this
return { return {
name: "Remove from Favorites", name: "Remove from Favorites",
action: function (item) { action: function(item) {
let index = self.favoriteItems.findIndex(x => x.id == item.id) let index = self.favoriteItems.findIndex(x => x.id == item.id)
if (index > -1) { if (index > -1) {
self.favoriteItems.splice(index, 1) self.favoriteItems.splice(index, 1)
@ -161,7 +147,9 @@
"fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount", "fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount",
"limit[artists:top-songs]": 20, "limit[artists:top-songs]": 20,
"art[url]": "f" "art[url]": "f"
}, {includeResponseMeta: !0}).then(artistData => { }, {
includeResponseMeta: !0
}).then(artistData => {
artistData.data.forEach(item => { artistData.data.forEach(item => {
if (item.views["latest-release"].data.length != 0) { if (item.views["latest-release"].data.length != 0) {
self.artistFeed.push(item.views["latest-release"].data[0]) self.artistFeed.push(item.views["latest-release"].data[0])
@ -182,8 +170,7 @@
}, },
async getListenNowData() { async getListenNowData() {
let self = this let self = this
this.app.mk.api.personalRecommendations("", this.app.mk.api.personalRecommendations("", {
{
name: "listen-now", name: "listen-now",
with: "friendsMix,library,social", with: "friendsMix,library,social",
"art[social-profiles:url]": "c", "art[social-profiles:url]": "c",
@ -205,22 +192,18 @@
"meta[stations]": "inflectionPoints", "meta[stations]": "inflectionPoints",
types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells", types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells",
platform: "web" platform: "web"
}, }, {
{
includeResponseMeta: !0, includeResponseMeta: !0,
reload: !0 reload: !0
} }).then((data) => {
).then((data) => {
console.log(data.data[1]) console.log(data.data[1])
try { try {
self.madeForYou = data.data.filter(section => { self.madeForYou = data.data.filter(section => {
if (section.meta.metrics.moduleType == "6") { if (section.meta.metrics.moduleType == "6") {
return section return section
} };
;
})[0].relationships.contents.data })[0].relationships.contents.data
} catch (err) { } catch (err) {}
}
self.sectionsReady.push("madeForYou") self.sectionsReady.push("madeForYou")
try { try {
@ -228,11 +211,9 @@
self.friendsListeningTo = data.data.filter(section => { self.friendsListeningTo = data.data.filter(section => {
if (section.meta.metrics.moduleType == "11") { if (section.meta.metrics.moduleType == "11") {
return section return section
} };
;
})[0].relationships.contents.data })[0].relationships.contents.data
} catch (err) { } catch (err) {}
}
self.sectionsReady.push("recentlyPlayed") self.sectionsReady.push("recentlyPlayed")
self.sectionsReady.push("friendsListeningTo") self.sectionsReady.push("friendsListeningTo")
}); });