Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Add the popularity modal for describing what it is

Browse source
This commit is contained in:
Tyler-A 2020-08-08 01:40:49 -06:00
parent 2cd866012f
commit 1e547a1545
4 changed files with 93 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/cards/Artist.vue
View file

@ -22,6 +22,7 @@
<div
v-tooltip.auto="popularity_tooltip"
class="popularity corner"
@click.self="show_pop_modal = true"
>
{{ item.popularity }}
</div>
@ -31,13 +32,22 @@
>
{{ item.followers.total.toLocaleString() }}
</div>
<PopularityModal
v-if="show_pop_modal"
@close="show_pop_modal = false"
/>
</div>
</template>
<script>
// Import Components
import PopularityModal from "../modals/PopularityInfo.vue";
export default {
name: `ArtistCard`,
components: {},
components: {
PopularityModal: PopularityModal
},
props: {
item: {
type: Object,
@ -47,6 +57,7 @@ export default {
data() { return {
followers_tooltip: `Total Followers`,
popularity_tooltip: `Artist Popularity`,
show_pop_modal: false,
}},
computed: {
genres() {
@ -106,6 +117,9 @@ img {
bottom: 0;
left: 0;
}
.popularity:hover {
cursor: pointer;
}
.followers {
border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;

16
src/components/cards/Track.vue
View file

@ -24,6 +24,7 @@
<div
v-tooltip.auto="popularity_tooltip"
class="popularity corner"
@click.self="show_pop_modal = true"
>
{{ item.popularity }}
</div>
@ -33,13 +34,22 @@
>
{{ duration }}
</div>
<PopularityModal
v-if="show_pop_modal"
@close="show_pop_modal = false"
/>
</div>
</template>
<script>
// Import Components
import PopularityModal from "../modals/PopularityInfo.vue";
export default {
name: `TrackCard`,
components: {},
components: {
PopularityModal: PopularityModal,
},
props: {
item: {
type: Object,
@ -49,6 +59,7 @@ export default {
data() { return {
duration_tooltip: `Song Duration`,
popularity_tooltip: `Song Popularity`,
show_pop_modal: false,
}},
computed: {
duration() {
@ -121,6 +132,9 @@ img {
bottom: 0;
left: 0;
}
.popularity:hover {
cursor: pointer;
}
.duration {
border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;

70
src/components/modals/PopularityInfo.vue
View file

@ -1,17 +1,71 @@
<template>
<div id=""></div>
<template id="pop-modal">
<transition name="fade" @after-enter="content = true">
<div
v-if="container"
class="modal-container"
@click.self="content = false"
>
<transition name="burst" @after-leave="$emit('close')">
<div v-if="content" class="modal">
<h2 class="center">How is Popularity Calculated?</h2>
<p class="center">
Popularity is a value between 0 and 100 that is calculated by Spotify based on how many plays the song/artist has recieved and how recent those plays are.
</p>
<p class="center">
This means that an artist/song that has had 100 plays today will have a higher popularity than a song/artist that has 100 from a month ago.
</p>
<p class="center">
This number is not updated in real time so refreshing the page will not reflect it's absolute accurate value.
</p>
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
name: ``,
components: {},
data() { return {}},
computed: {},
methods: {}
name: `PopularityModal`,
data() {return {
container: false,
content: false,
}},
mounted() {
this.$nextTick(function() {
this.container = true;
});
},
}
</script>
<style>
<style scoped>
.modal-container {
background-color: var(--modal-container-background);
justify-content: center;
align-items: center;
position: fixed;
display: flex;
height: 100vh;
width: 100vw;
z-index: 10;
left: 0;
top: 0;
}
.modal {
background-color: var(--modal-background);
border-radius: var(--corner-rounding);
text-align: center;
max-height: 85%;
padding: 0 15px;
z-index: 11;
width: 90%;
}
@media only screen and (min-width: 768px) {
.modal {
width: 50%;
max-height: 75%;
}
}
</style>