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;