From fb58e20f7a8e625ecd5ca560b0e7d247ae2c7cbc Mon Sep 17 00:00:00 2001
From: Tyler-A <tyler.akins1999@gmail.com>
Date: Mon, 6 Jul 2020 00:15:58 -0600
Subject: [PATCH] Make missing artist profile pictures a default & remove click
 for more info on popularity

---
 components/artist.html |  9 +++++++--
 components/artist.js   | 14 ++++++++------
 components/icons.js    |  7 +++++++
 components/track.js    |  2 +-
 css/artist.css         | 15 ++++++++++++++-
 index.html             |  1 +
 js/text_computation.js |  2 +-
 7 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/components/artist.html b/components/artist.html
index 0a09fd8..8272f7a 100644
--- a/components/artist.html
+++ b/components/artist.html
@@ -1,6 +1,11 @@
 <div class="artist">
-	<div class="image profile_pic">
-		<img :src="artist.image.url" :alt="artist.name + `'s profile picture`">
+	<div class="image profile_pic" v-if="artist.image">
+		<img :src="artist.image.url" :alt="artist.name + 's profile picture'">
+	</div>
+	<div class="image profile_pic" v-else>
+		<div class="missing-circle">
+			<music-note colour="#1DB954"></music-note>
+		</div>
 	</div>
 	<div class="info">
 		<span class="name">
diff --git a/components/artist.js b/components/artist.js
index 7fcd7ca..722cc27 100644
--- a/components/artist.js
+++ b/components/artist.js
@@ -2,13 +2,15 @@ Vue.component(
 	`artist`,
 	{
 		props: [ `artist` ],
-		data: function () {
-			return {};
-		},
 		computed: {},
 		template: `<div class="artist">
-	<div class="image profile_pic">
-		<img :src="artist.image.url" :alt="artist.name + \`'s profile picture\`">
+	<div class="image profile_pic" v-if="artist.image">
+		<img :src="artist.image.url" :alt="artist.name + 's profile picture'">
+	</div>
+	<div class="image profile_pic" v-else>
+		<div class="missing-circle">
+			<music-note colour="#1DB954"></music-note>
+		</div>
 	</div>
 	<div class="info">
 		<span class="name">
@@ -20,5 +22,5 @@ Vue.component(
 	<div class="popularity">{{artist.popularity}}</div>
 	<div class="followers">{{artist.follower_count}}</div>
 </div>`
-	}
+}
 )
\ No newline at end of file
diff --git a/components/icons.js b/components/icons.js
index e69de29..a7c9751 100644
--- a/components/icons.js
+++ b/components/icons.js
@@ -0,0 +1,7 @@
+Vue.component(
+	`music-note`,
+	{
+		props: [ `colour` ],
+		template: `<svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none" rx="0" ry="0"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M17.4911 2.11667L21.4511 4.09667C21.9411 4.34667 22.1411 4.93667 21.8911 5.43667C21.6411 5.93667 21.0411 6.13667 20.5511 5.88667L18.0011 4.61667L17.9911 16.4367C17.9911 16.4467 17.9936 16.4567 17.9961 16.4667C17.9986 16.4767 18.0011 16.4867 18.0011 16.4967C18.0011 18.4267 16.4311 19.9967 14.5011 19.9967C12.5711 19.9967 11.0011 18.4267 11.0011 16.4967C11.0011 14.5667 12.5711 12.9967 14.5011 12.9967C15.0411 12.9967 15.5411 13.1267 16.0011 13.3467L16.0111 3.10667C15.9911 2.99667 16.0011 2.87667 16.0311 2.75667C16.1711 2.14667 16.9411 1.80667 17.4911 2.11667ZM12.8911 5.43664C12.6511 5.93664 12.0511 6.13664 11.5511 5.88664L9.0011 4.61664L8.9911 18.4366C8.9911 18.4466 8.9936 18.4566 8.9961 18.4666C8.9986 18.4766 9.0011 18.4866 9.0011 18.4966C9.0011 20.4266 7.4311 21.9966 5.5011 21.9966C3.5711 21.9966 2.0011 20.4266 2.0011 18.4966C2.0011 16.5666 3.5711 14.9966 5.5011 14.9966C6.0411 14.9966 6.5411 15.1266 7.0011 15.3466L7.0111 3.10664C6.9911 2.99664 7.0011 2.87664 7.0311 2.76664C7.1711 2.14664 7.9411 1.81664 8.4911 2.12664L12.4411 4.09664C12.9411 4.34664 13.1411 4.94664 12.8911 5.43664Z" :fill="colour || '#ffffff'"></path></svg>`
+	}
+);
\ No newline at end of file
diff --git a/components/track.js b/components/track.js
index ed2dd9f..3d14916 100644
--- a/components/track.js
+++ b/components/track.js
@@ -4,7 +4,7 @@ Vue.component(
 		props: [ `track` ],
 		data: function () {
 			return {
-				popularity_tooltip: `Popularity.\nClick for more information.`
+				popularity_tooltip: `Popularity`
 			}
 		},
 		template: `<div class="track">
diff --git a/css/artist.css b/css/artist.css
index ffa6d93..76cb5d9 100644
--- a/css/artist.css
+++ b/css/artist.css
@@ -17,11 +17,24 @@ div.artist {
 div.artist > div.profile_pic {
 	text-align: center;
 }
-div.artist > div.profile_pic img {
+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;
diff --git a/index.html b/index.html
index 3357e72..d6d4df4 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
 	<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>
+	<script src="./components/icons.js" defer async></script>
 	<script src="https://unpkg.com/v-tooltip"></script>
 	<script src="./js/text_computation.js"></script>
 	<script src="./app.js" defer></script>
diff --git a/js/text_computation.js b/js/text_computation.js
index c62cc63..0b10959 100644
--- a/js/text_computation.js
+++ b/js/text_computation.js
@@ -13,7 +13,7 @@ function get_button_text () {
 	else if (this.count > 50) {
 		this.error.main = `Cannot get more than 50 ${this.type.toLowerCase()}`;
 		return false;
-	}
+	};
 	this.error.main = ``;
 	return this.type;
 };
\ No newline at end of file