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

Add a popularity modal to the page when clicking on the popularity value (finishes #5 )

Browse source
This commit is contained in:
Tyler-A 2020-07-07 21:23:48 -06:00
parent 7ea4f89522
commit 4a61eec9ff
11 changed files with 205 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/artist.js
View file

@ -17,9 +17,14 @@ Vue.component(
return genres.join(`, `);
}
},
methods: {
show_popularity_modal: function () {
this.$emit(`popularity_click`)
}
},
template: `<div class="card">
<div class="image">
<img v-id="artist.image" :src="artist.image.url" :alt="artist.name + 's profile picture'" target="_blank" rel="noopener">
<img v-if="artist.image" :src="artist.image.url" :alt="artist.name + 's profile picture'" target="_blank" rel="noopener">
<div class="missing-image" v-else>
<music-note colour="#1DB954"></music-note>
</div>
@ -31,8 +36,8 @@ Vue.component(
<br>
<span class="subtitle">{{genres}}</span>
</div>
<div class="bottom left corner popularity" v-tooltip="popularity_tooltip">{{artist.popularity}}</div>
<div class="bottom right corner followers" v-tooltip="followers_tooltip">{{artist.follower_count}}</div>
<div class="bottom left corner popularity" v-tooltip="popularity_tooltip" @click.self="show_popularity_modal()">{{artist.popularity}}</div>
<div class="bottom right corner followers" v-tooltip="followers_tooltip">{{artist.follower_count.toLocaleString()}}</div>
</div>`
}
)