From 72bbaadfba8fae8031d99d442fc23e66cdfc7d3b Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:36:30 -0600 Subject: [PATCH 01/10] Extend the String prototype to allow easier title casing. --- js/prototypes.js | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 js/prototypes.js diff --git a/js/prototypes.js b/js/prototypes.js new file mode 100644 index 0000000..69f5556 --- /dev/null +++ b/js/prototypes.js @@ -0,0 +1,10 @@ +String.prototype.toTitleCase = function () { + let words = this.split(` `); + let new_words = []; + for (var word of words) { + new_words.push( + `${word[0].toUpperCase()}${word.slice(1).toLowerCase()}` + ); + }; + return new_words.join(` `); +} \ No newline at end of file From 74a3f7471ca7409e9d95877eee264e32c43aad34 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:37:08 -0600 Subject: [PATCH 02/10] Add prototype extension to the page. --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index d6d4df4..666b192 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ + From 5c4c029f79ad9651c97a041e439a7bdf58113eb3 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:37:29 -0600 Subject: [PATCH 03/10] Use minified Vue --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 666b192..6260b2d 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - + From ca83a1750fcb16e4d97a5783bcf691a1e9599ff3 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:39:08 -0600 Subject: [PATCH 04/10] Improve CSS (Finishes #9 ) --- components/artist.html | 18 ++++---- components/artist.js | 36 ++++++++++------ components/track.html | 24 ++++++----- components/track.js | 44 ++++++++++--------- css/artist.css | 97 ------------------------------------------ css/card.css | 84 ++++++++++++++++++++++++++++++++++++ css/track.css | 84 ------------------------------------ index.html | 3 +- 8 files changed, 153 insertions(+), 237 deletions(-) delete mode 100644 css/artist.css create mode 100644 css/card.css delete mode 100644 css/track.css diff --git a/components/artist.html b/components/artist.html index 8272f7a..1104d12 100644 --- a/components/artist.html +++ b/components/artist.html @@ -1,19 +1,17 @@ -
-
- -
-
-
+
+
+ +
- + {{artist.name}}
- {{artist.genres.join(", ")}} + {{genres}}
-
{{artist.popularity}}
-
{{artist.follower_count}}
+
{{artist.popularity}}
+
{{artist.follower_count}}
\ No newline at end of file diff --git a/components/artist.js b/components/artist.js index 722cc27..b413de6 100644 --- a/components/artist.js +++ b/components/artist.js @@ -2,25 +2,37 @@ Vue.component( `artist`, { props: [ `artist` ], - computed: {}, - template: `
-
- -
-
-
+ data: function () { + return { + popularity_tooltip: `Popularity`, + followers_tooltip: `Followers`, + }; + }, + computed: { + genres: function () { + let genres = []; + for (var genre of this.artist.genres) { + genres.push(genre.toTitleCase()); + }; + return genres.join(`, `); + } + }, + template: `
+
+ +
- + {{artist.name}}
- {{artist.genres.join(", ")}} + {{genres}}
-
{{artist.popularity}}
-
{{artist.follower_count}}
+
{{artist.popularity}}
+
{{artist.follower_count}}
` -} + } ) \ No newline at end of file diff --git a/components/track.html b/components/track.html index 1ff52fe..507e337 100644 --- a/components/track.html +++ b/components/track.html @@ -1,20 +1,22 @@ -
-
- +
+
+ + +
+ +
+
- + {{track.name}} - - {{track.name}} - -
- + {{track.name}}
+
-
{{track.popularity}}
-
{{duration}}
+
{{track.popularity}}
+
{{duration}}
\ No newline at end of file diff --git a/components/track.js b/components/track.js index 3d14916..f78352e 100644 --- a/components/track.js +++ b/components/track.js @@ -7,26 +7,6 @@ Vue.component( popularity_tooltip: `Popularity` } }, - template: `
-
- - - -
-
- - {{track.name}} - - - {{track.name}} - -
- -
-
-
{{track.popularity}}
-
{{duration}}
-
`, computed: { duration: function () { let timestamp = ``; @@ -58,6 +38,28 @@ Vue.component( } return artists.join(`, `) }, - } + }, + template: `
+
+ + + + +
+ +
+ +
+
+ + {{track.name}} + + {{track.name}} +
+ +
+
{{track.popularity}}
+
{{duration}}
+
` } ); \ No newline at end of file diff --git a/css/artist.css b/css/artist.css deleted file mode 100644 index 76cb5d9..0000000 --- a/css/artist.css +++ /dev/null @@ -1,97 +0,0 @@ -div.artist { - background-color: var(--card-colour); - color: var(--card-text); - border-radius: 7px; - border-style: none; - padding: 10px; - padding-top: 20px; - margin: 5px auto; - width: 90%; - position: relative; - - display: flex; - flex-direction: column; -} - - -div.artist > div.profile_pic { - text-align: center; -} -div.artist > div.profile_pic img { - width: 200px; - height: 200px; -} - -div.artist > div.profile_pic > div.missing-circle { - background-color: #3a3a3aaa; - border-radius: 100px; - display: flex; - height: 200px; - width: 200px; - justify-content: center; - align-items: center; - margin: 0 auto; - margin-bottom: 5px; -} - - -div.artist > div.info { - margin: 0; - text-align: center; - position: relative; - padding-bottom: 20px; -} - -div.artist > div.info > span.name { - text-decoration: none; - color: var(--text-on-card); - vertical-align: middle; - font-size: larger; -} - -div.artist > .followers { - background-color: var(--on-card-colour); - color: var(--on-card-text); - vertical-align: middle; - position: absolute; - padding: 1px 6px; - bottom: 0px; - right: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 7px 0 7px 0; -} - -div.artist > div.info > span.genres { - font-size: smaller; -} - - -div.artist > .popularity { - background-color: var(--on-card-colour); - color: var(--on-card-text); - position: absolute; - padding: 1px 6px; - bottom: 0px; - left: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 0px 7px 0px 7px; -} - -div.artist a { - color: var(--text-on-card); - text-decoration: none; -} -div.artist a:hover { - text-decoration: underline; -} - - -/* DESKTOP STYLES */ -@media only screen and (min-width: 768px) { - div.artist { - width: 230px; - margin: 5px; - } -} \ No newline at end of file diff --git a/css/card.css b/css/card.css new file mode 100644 index 0000000..1b2e743 --- /dev/null +++ b/css/card.css @@ -0,0 +1,84 @@ +div.card { + /* Card only variables */ + --border-radius: 5px; + + background-color: var(--card-colour); + color: var(--card-text); + border-radius: var(--border-radius); + border-style: none; + padding: 10px; + padding-top: 20px; + margin: 5px auto; + width: 90%; + position: relative; + + display: flex; + flex-direction: column; +} + + +div.card > div.image { + text-align: center; +} +div.card > div.image img { + --size: 200px; + width: var(--size); + height: var(--size); +} + +div.card div.missing-image { + background-color: #3a3a3aaa; + justify-content: center; + border-radius: 100px; + align-items: center; + margin-bottom: 5px; + margin: 0 auto; + display: flex; + height: 200px; + width: 200px; +} + + +div.card > div.info { + text-align: center; + padding-bottom: 20px; + margin: 0; +} +div.card > div.info > .title { font-size: larger; } +div.card > div.info > .subtitle { font-size: smaller; } + +/* Positioning For Absolute Elements */ +div.card .corner { + position: absolute; + padding: 1px 6px; + background-color: var(--on-card-colour); + color: var(--on-card-text); +} +div.card .right { right: 0; } +div.card .left { left: 0; } +div.card .top { top: 0; } +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 .followers, +div.card .duration { border-radius: var(--border-radius) 0 var(--border-radius) 0; } + + +div.card a { + color: var(--text-on-card); + text-decoration: none; +} +div.card a:hover { + text-decoration: underline; +} + + +/* DESKTOP STYLES */ +@media only screen and (min-width: 768px) { + div.card { + width: 230px; + margin: 5px; + } +} \ No newline at end of file diff --git a/css/track.css b/css/track.css deleted file mode 100644 index ae07fd1..0000000 --- a/css/track.css +++ /dev/null @@ -1,84 +0,0 @@ -div.track { - background-color: var(--card-colour); - color: var(--card-text); - border-radius: 7px; - border-style: none; - padding: 10px; - padding-top: 20px; - margin: 5px auto; - width: 90%; - position: relative; - - display: flex; - flex-direction: column; -} - - -div.track > div.cover { - text-align: center; -} -div.track > div.cover img { - width: 200px; - height: 200px; -} - -div.track > div.info { - margin: 0; - text-align: center; - position: relative; - padding-bottom: 20px; -} - -div.track > div.info > span.name { - text-decoration: none; - color: var(--text-on-card); - vertical-align: middle; - font-size: larger; -} - -div.track > .duration { - background-color: var(--on-card-colour); - color: var(--on-card-text); - vertical-align: middle; - position: absolute; - padding: 1px 6px; - bottom: 0px; - right: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 7px 0 7px 0; -} - -div.track > div.info > span.artist { - font-size: smaller; -} - - -div.track > .popularity { - background-color: var(--on-card-colour); - color: var(--on-card-text); - position: absolute; - padding: 1px 6px; - bottom: 0px; - left: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 0px 7px 0px 7px; -} - -div.track a { - color: var(--text-on-card); - text-decoration: none; -} -div.track a:hover { - text-decoration: underline; -} - - -/* DESKTOP STYLES */ -@media only screen and (min-width: 768px) { - div.track { - width: 230px; - margin: 5px; - } -} \ No newline at end of file diff --git a/index.html b/index.html index 6260b2d..e0da2ce 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,7 @@ - - + From efe184c3d41bc89811489a4424c47faace3ae301 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:39:45 -0600 Subject: [PATCH 05/10] Sets button text to show default fetch amount even if the number input is empty. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e0da2ce..9518830 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@
- +
{{error.main}}
From 0d2526812d8b583f2d28fd2e27433b11b0642b6b Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:48:31 -0600 Subject: [PATCH 06/10] Remove card stylings from the main CSS --- style.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/style.css b/style.css index 8ab3d75..c4468f5 100644 --- a/style.css +++ b/style.css @@ -140,7 +140,7 @@ div.body { border-width: 2px; } -.card { +div.login > div { display: inline-block; color: var(--card-text); padding: 20px; @@ -287,7 +287,4 @@ div.body { flex-direction: row; flex-wrap: wrap; } - .card { - width: 33%; - } } \ No newline at end of file From e4a9c3bb42420bcd376438ae3313da84c62c6224 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:49:02 -0600 Subject: [PATCH 07/10] Remove card class from the login view --- index.html | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9518830..9ca2e96 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@
-
+
@@ -72,11 +72,16 @@
+ + +
+
+
From 5e911399b260a924d57bf7df034da9e42638df91 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:53:36 -0600 Subject: [PATCH 08/10] Adjust z-index to not have it mess with the modals --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index c4468f5..ac1fd4f 100644 --- a/style.css +++ b/style.css @@ -168,7 +168,7 @@ div.login > div { /* Tooltip Styling */ .tooltip { display: none !important; - z-index: 10000; + z-index: 2; } .tooltip .tooltip-inner { From 7ea4f89522141ca197143ce06e32b9cccd40a3f4 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Tue, 7 Jul 2020 09:57:48 -0600 Subject: [PATCH 09/10] Make the cursor change on hover of buttons and dropdowns (finishes #2 ) --- style.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index ac1fd4f..6e4a67c 100644 --- a/style.css +++ b/style.css @@ -49,10 +49,8 @@ select { font-family: var(--fonts); outline: none; } - -select:focus { - border-style: none; -} +select:hover { cursor: pointer; } +select:focus { border-style: none; } button { padding: 10px 20px; @@ -63,6 +61,7 @@ button { font-family: var(--fonts); outline: none; } +button:hover { cursor: pointer; } input[type=number] { background-color: var(--spotify-black); From 4a61eec9ff6752de362c4b9a3a80c1bd4964fa64 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Tue, 7 Jul 2020 21:23:48 -0600 Subject: [PATCH 10/10] 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