From 4a61eec9ff6752de362c4b9a3a80c1bd4964fa64 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Tue, 7 Jul 2020 21:23:48 -0600 Subject: [PATCH] Add a popularity modal to the page when clicking on the popularity value (finishes #5 ) --- app.js | 15 +++++++++- components/artist.html | 6 ++-- components/artist.js | 11 ++++++-- components/icons.js | 11 +++++++- components/track.html | 2 +- components/track.js | 7 ++++- css/card.css | 5 +++- css/modal.css | 56 ++++++++++++++++++++++++++++++++++++++ css/transitions.css | 62 ++++++++++++++++++++++++++++++++++++++++++ index.html | 40 ++++++++++++++++++++++----- style.css | 9 +++++- 11 files changed, 205 insertions(+), 19 deletions(-) create mode 100644 css/modal.css create mode 100644 css/transitions.css diff --git a/app.js b/app.js index bf8c45c..9d13afe 100644 --- a/app.js +++ b/app.js @@ -8,7 +8,14 @@ let app = new Vue({ show: { popularity_popup: false, popularity_hover: false, - follower_hover: false + follower_hover: false, + modal_content: false, + modal: { + popularity: false, + track: false, + artist: false, + playlist_export: false, + } }, error: { main: ``, @@ -67,5 +74,11 @@ let app = new Vue({ }) }, get_data: fetch_data, + hide_modal: function () { + this.show.modal.popularity = false; + this.show.modal.track = false; + this.show.modal.artist = false; + this.show.modal.playlist_export = false; + } } }) \ No newline at end of file diff --git a/components/artist.html b/components/artist.html index 1104d12..8c2a55b 100644 --- a/components/artist.html +++ b/components/artist.html @@ -1,6 +1,6 @@
- +
@@ -12,6 +12,6 @@
{{genres}}
-
{{artist.popularity}}
-
{{artist.follower_count}}
+
{{artist.popularity}}
+
{{artist.follower_count.toLocaleString()}}
\ No newline at end of file diff --git a/components/artist.js b/components/artist.js index b413de6..119fe2b 100644 --- a/components/artist.js +++ b/components/artist.js @@ -17,9 +17,14 @@ Vue.component( return genres.join(`, `); } }, + methods: { + show_popularity_modal: function () { + this.$emit(`popularity_click`) + } + }, template: `
- +
@@ -31,8 +36,8 @@ Vue.component(
{{genres}}
-
{{artist.popularity}}
-
{{artist.follower_count}}
+
{{artist.popularity}}
+
{{artist.follower_count.toLocaleString()}}
` } ) \ No newline at end of file diff --git a/components/icons.js b/components/icons.js index a7c9751..5686285 100644 --- a/components/icons.js +++ b/components/icons.js @@ -4,4 +4,13 @@ Vue.component( props: [ `colour` ], template: `` } -); \ No newline at end of file +); + + +Vue.component( + `close`, + { + props: [ `colour` ], + template: `` + } +) \ No newline at end of file diff --git a/components/track.html b/components/track.html index 507e337..9ab16e7 100644 --- a/components/track.html +++ b/components/track.html @@ -17,6 +17,6 @@
-
{{track.popularity}}
+
{{track.popularity}}
{{duration}}
\ No newline at end of file diff --git a/components/track.js b/components/track.js index f78352e..6d9feac 100644 --- a/components/track.js +++ b/components/track.js @@ -39,6 +39,11 @@ Vue.component( return artists.join(`, `) }, }, + methods: { + show_popularity_modal: function () { + this.$emit('popularity_click') + } + }, template: `
@@ -58,7 +63,7 @@ Vue.component(
-
{{track.popularity}}
+
{{track.popularity}}
{{duration}}
` } diff --git a/css/card.css b/css/card.css index 1b2e743..471d401 100644 --- a/css/card.css +++ b/css/card.css @@ -61,7 +61,10 @@ div.card .bottom { bottom: 0; } /* border-radius: top-left top-right lower-right lower-left */ -div.card .popularity { border-radius: 0 var(--border-radius) 0 var(--border-radius); } +div.card .popularity { + border-radius: 0 var(--border-radius) 0 var(--border-radius); + cursor: pointer; +} div.card .followers, div.card .duration { border-radius: var(--border-radius) 0 var(--border-radius) 0; } diff --git a/css/modal.css b/css/modal.css new file mode 100644 index 0000000..0dfe5cb --- /dev/null +++ b/css/modal.css @@ -0,0 +1,56 @@ +div.modal-container { + width: 100%; + height: 100%; + z-index: 5; + background-color: var(--modal-container-background); + position: fixed; + left: 0; + top: 0; + + display: flex; + align-items: center; + justify-content: center; +} + +div.modal { + z-index: 6; + width: 90%; + max-height: 85%; + background-color: var(--modal-background); + border-radius: 5px; + padding: 0 15px; + position: relative; +} + +div.modal * { color: var(--modal-text); } + +div.modal h2 { margin-top: 30px; } + +div.modal p { padding: 0px 5px 15px 5px; } + +div.modal .close-modal { + width: 25px; + height: 25px; + position: absolute; + right: 10px; + top: 10px; + color: var(--spotify-green); +} +div.modal .close-modal:hover { + color: var(--error); + transform: scale(1.2, 1.2); + transition: ease-in-out; + cursor: pointer; +} + + + +@media only screen and (min-width: 768px) { + div.modal { + width: 50%; + max-height: 75%; + } + div.modal h2 { + margin-top: 19.920px; + } +} \ No newline at end of file diff --git a/css/transitions.css b/css/transitions.css new file mode 100644 index 0000000..0b543dd --- /dev/null +++ b/css/transitions.css @@ -0,0 +1,62 @@ +/* Transition for modal background appearing/disappearing */ +.fade-enter-active, .fade-leave-active { + transition: opacity .5s; +} + +.fade-enter, .fade-leave-to { + opacity: 0; +} + + + +/* Transition for modal card appearing disappearing */ +.burst-enter-active { + animation: burst-in .5s; +} +.burst-leave-active { animation: burst-out .5s; } + +@keyframes burst-in { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} + +@keyframes burst-out { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} + + + +@media only screen and (min-width: 768px) { + @keyframes burst-in { + 0% { + transform: scale(0); + } + 50% { + transform: scale(1.25); + } + 100% { + transform: scale(1); + } + } + + @keyframes burst-out { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.25); + } + 100% { + transform: scale(0); + } + } +} \ No newline at end of file diff --git a/index.html b/index.html index 9ca2e96..52b75ac 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,11 @@ + + - + @@ -68,20 +70,44 @@ v-for="top_track in data.tracks" :track="top_track" :key="top_track.id" + @popularity_click="show.modal.popularity = true" >
-
-
-
+ +
+ +
+ + + +

How is Popularity Calculated?

+

+ 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. +

+

+ 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. +

+

+ This number is not updated in real time so refreshing the page will not reflect it's absolute accurate value. +

+
+ +
+ diff --git a/style.css b/style.css index 6e4a67c..6c2c495 100644 --- a/style.css +++ b/style.css @@ -17,6 +17,10 @@ --on-card-colour: #4c4c4c; --on-card-text: var(--spotify-green); + --modal-container-background: #0e0f10eb; + --modal-background: var(--card-colour); + --modal-text: var(--card-text); + --fonts: 'Open Sans', sans-serif; } @@ -139,7 +143,7 @@ div.body { border-width: 2px; } -div.login > div { +div#login > div { display: inline-block; color: var(--card-text); padding: 20px; @@ -286,4 +290,7 @@ div.login > div { flex-direction: row; flex-wrap: wrap; } + div#login > div { + width: 33%; + } } \ No newline at end of file