diff --git a/app.js b/app.js index 925acd4..663e886 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; + } } }) diff --git a/components/artist.html b/components/artist.html index 8272f7a..8c2a55b 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.toLocaleString()}}
\ No newline at end of file diff --git a/components/artist.js b/components/artist.js index 722cc27..119fe2b 100644 --- a/components/artist.js +++ b/components/artist.js @@ -2,25 +2,42 @@ 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(`, `); + } + }, + methods: { + show_popularity_modal: function () { + this.$emit(`popularity_click`) + } + }, + template: `
+
+ +
- + {{artist.name}}
- {{artist.genres.join(", ")}} + {{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 1ff52fe..9ab16e7 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..6d9feac 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,33 @@ Vue.component( } return artists.join(`, `) }, - } + }, + methods: { + show_popularity_modal: function () { + this.$emit('popularity_click') + } + }, + 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..471d401 --- /dev/null +++ b/css/card.css @@ -0,0 +1,87 @@ +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); + cursor: pointer; +} +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/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/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/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 d6d4df4..52b75ac 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,9 @@ - - + + + @@ -19,6 +20,7 @@ + @@ -26,7 +28,7 @@
-
+
@@ -59,7 +61,7 @@
- +
{{error.main}}
@@ -68,6 +70,7 @@ v-for="top_track in data.tracks" :track="top_track" :key="top_track.id" + @popularity_click="show.modal.popularity = true" >
@@ -75,8 +78,36 @@ v-for="top_artist in data.artists" :artist="top_artist" :key="top_artist.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/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 diff --git a/style.css b/style.css index 8ab3d75..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; } @@ -49,10 +53,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 +65,7 @@ button { font-family: var(--fonts); outline: none; } +button:hover { cursor: pointer; } input[type=number] { background-color: var(--spotify-black); @@ -140,7 +143,7 @@ div.body { border-width: 2px; } -.card { +div#login > div { display: inline-block; color: var(--card-text); padding: 20px; @@ -168,7 +171,7 @@ div.body { /* Tooltip Styling */ .tooltip { display: none !important; - z-index: 10000; + z-index: 2; } .tooltip .tooltip-inner { @@ -287,7 +290,7 @@ div.body { flex-direction: row; flex-wrap: wrap; } - .card { + div#login > div { width: 33%; } } \ No newline at end of file