improvements to home page, added .spinner
This commit is contained in:
booploops
parent
a00af6fa8c
commit
9a75e9899a
7 changed files with 51 additions and 14 deletions
BIN
src/renderer/assets/spinner.gif
Normal file
BIN
src/renderer/assets/spinner.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
|
|
@ -542,6 +542,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
background-image: url("assets/spinner.gif");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.app-sidebar-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -844,6 +854,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
.song-artist-normal {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
margin-bottom: -3px;
|
||||
|
|
@ -2111,9 +2122,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
.friends-info {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.badge-container {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
|
||||
.socialBadge {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -2128,6 +2141,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.friends-name {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -2978,6 +2992,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
.badge-container {
|
||||
transition: opacity 0.1s var(--appleEase);
|
||||
opacity: 1;
|
||||
|
||||
.socialBadge {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -3024,6 +3039,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
> .badge-container {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
> .play-btn,
|
||||
> .menu-btn {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@
|
|||
},
|
||||
mounted() {
|
||||
let duration = this.item.attributes.durationInMillis ?? 0
|
||||
console.log(duration)
|
||||
if(duration == 0 || !this.showDuration) {
|
||||
this.displayDuration = false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<mediaitem-list-item v-for="item in artistFeed" :item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="hint-text">No new activity from followed artists</div>
|
||||
<div class="spinner"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<div class="content-inner playlist-page" v-if="data != [] && data.attributes != null"
|
||||
:style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
|
||||
<template v-if="app.playlists.loadingState == 0">
|
||||
<div class="content-inner centered">Loading...</div>
|
||||
<div class="content-inner centered">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="app.playlists.loadingState == 1">
|
||||
<div class="playlist-display row"
|
||||
|
|
|
|||
|
|
@ -6,17 +6,24 @@
|
|||
<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 : ''"
|
||||
<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>
|
||||
<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">
|
||||
<h3>Recently Played</h3>
|
||||
<div class="well">
|
||||
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
<template v-if="isSectionReady('recentlyPlayed')">
|
||||
<mediaitem-list-item v-for="item in recentlyPlayed.limit(6)"
|
||||
:item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
<div class="spinner" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,7 +43,10 @@
|
|||
<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">
|
||||
|
|
@ -53,7 +63,7 @@
|
|||
<mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="hint-text">No new activity from followed artists</div>
|
||||
<div class="spinner"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,8 +72,11 @@
|
|||
<div class="col">
|
||||
<h3>Friends Listening To</h3>
|
||||
<div class="well">
|
||||
<template v-if="isSectionReady('friendsListeningTo')">
|
||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo"
|
||||
:item="item"></mediaitem-square>
|
||||
</template>
|
||||
<div class="spinner" v-else></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,6 +102,7 @@
|
|||
artistFeed: [],
|
||||
showingArtistFeed: false,
|
||||
page: "main",
|
||||
sectionsReady: []
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
|
|
@ -98,6 +112,9 @@
|
|||
await this.getFavorites()
|
||||
},
|
||||
methods: {
|
||||
isSectionReady(section) {
|
||||
return this.sectionsReady.includes(section)
|
||||
},
|
||||
removeFavoriteContext() {
|
||||
let self = this
|
||||
return {
|
||||
|
|
@ -204,6 +221,7 @@
|
|||
})[0].relationships.contents.data
|
||||
} catch (err) {
|
||||
}
|
||||
self.sectionsReady.push("madeForYou")
|
||||
|
||||
try {
|
||||
self.recentlyPlayed = data.data[1].relationships.contents.data
|
||||
|
|
@ -215,6 +233,8 @@
|
|||
})[0].relationships.contents.data
|
||||
} catch (err) {
|
||||
}
|
||||
self.sectionsReady.push("recentlyPlayed")
|
||||
self.sectionsReady.push("friendsListeningTo")
|
||||
});
|
||||
|
||||
app.mk.api.v3.music("/v1/me/social/profile/").then((response) => {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
<div class="content-inner">
|
||||
<h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
|
||||
<button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
|
||||
<cider-queue ref="queue"></cider-queue>
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue