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

40
index.html
View file

@ -9,9 +9,11 @@
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="./css/card.css">
<link rel="stylesheet" href="./css/modal.css">
<link rel="stylesheet" href="./css/transitions.css">
<!-- Javascript Imports -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./components/artist.js" defer async></script>
<script src="./components/track.js" defer async></script>
@ -68,20 +70,44 @@
v-for="top_track in data.tracks"
:track="top_track"
:key="top_track.id"
@popularity_click="show.modal.popularity = true"
></track-card>
</div>
<div class="body" v-if="data.artists.length > 0">
<artist
v-for="top_artist in data.artists"
:artist="top_artist"
:key="top_artist.id"
v-for="top_artist in data.artists"
:artist="top_artist"
:key="top_artist.id"
@popularity_click="show.modal.popularity = true"
></artist>
</div>
<!-- Modals Needed -->
<div v-if="show.modal.track" class="modal track-modal"></div>
<div v-if="show.modal.popularity" class="modal info-modal"></div>
<div v-if="show.modal.playlist_export" class="modal playlist-export-modal"></div>
<transition name="fade" @after-enter="show.modal_content = true">
<div
v-if="Object.values(this.show.modal).includes(true)"
class="modal-container"
@click.self="show.modal_content = false"
>
<transition name="burst" @after-leave="hide_modal">
<div v-if="show.modal_content && show.modal.popularity" class="modal">
<span @click="show.modal_content = false">
<close class="close-modal" colour="#ffffff80" @click="show.modal_content = false"></close>
</span>
<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>
</div>
</div>
</body>