- ![]()
-
-
-
+
+
\ 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: `
+ ![]()
+
-
+
{{artist.name}}
- {{artist.genres.join(", ")}} + {{genres}}
- - {{artist.genres.join(", ")}} + {{genres}}
{{artist.popularity}}
- {{artist.follower_count}}
+ {{artist.popularity}}
+ {{artist.follower_count}}
-
- ![]()
-
-
-
+ 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: `
+
`
-}
+ }
)
\ 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 @@
-
+ ![]()
+
-
+
{{artist.name}}
- {{artist.genres.join(", ")}} + {{genres}}
- - {{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.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: ``,
computed: {
duration: function () {
let timestamp = ``;
@@ -58,6 +38,28 @@ Vue.component(
}
return artists.join(`, `)
},
- }
+ },
+ template: `
+
![]()
+
+
+
+
-
+
{{track.name}}
-
- {{track.name}}
-
-
- + {{track.name}}
+
- - + {{track.name}}
+
{{track.popularity}}
- {{duration}}
+ {{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 @@
-
-
+
{{track.popularity}}
+ {{duration}}
+