Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Make missing artist profile pictures a default & remove click for more info on popularity

Browse source
This commit is contained in:
Tyler-A 2020-07-06 00:15:58 -06:00
parent 43964e38df
commit fb58e20f7a
7 changed files with 39 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/artist.html
View file

@ -1,6 +1,11 @@
<div class="artist"> <div class="artist">
<div class="image profile_pic"> <div class="image profile_pic" v-if="artist.image">
<img :src="artist.image.url" :alt="artist.name + `'s profile picture`"> <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>
<div class="info"> <div class="info">
<span class="name"> <span class="name">

14
components/artist.js
View file

@ -2,13 +2,15 @@ Vue.component(
`artist`, `artist`,
{ {
props: [ `artist` ], props: [ `artist` ],
data: function () {
return {};
},
computed: {}, computed: {},
template: `<div class="artist"> template: `<div class="artist">
<div class="image profile_pic"> <div class="image profile_pic" v-if="artist.image">
<img :src="artist.image.url" :alt="artist.name + \`'s profile picture\`"> <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>
<div class="info"> <div class="info">
<span class="name"> <span class="name">
@ -20,5 +22,5 @@ Vue.component(
<div class="popularity">{{artist.popularity}}</div> <div class="popularity">{{artist.popularity}}</div>
<div class="followers">{{artist.follower_count}}</div> <div class="followers">{{artist.follower_count}}</div>
</div>` </div>`
} }
) )

7
components/icons.js
View file

@ -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>`
}
);

2
components/track.js
View file

@ -4,7 +4,7 @@ Vue.component(
props: [ `track` ], props: [ `track` ],
data: function () { data: function () {
return { return {
popularity_tooltip: `Popularity.\nClick for more information.` popularity_tooltip: `Popularity`
} }
}, },
template: `<div class="track"> template: `<div class="track">

13
css/artist.css
View file

@ -22,6 +22,19 @@ div.artist > div.profile_pic img {
height: 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 { div.artist > div.info {
margin: 0; margin: 0;
text-align: center; text-align: center;

1
index.html
View file

@ -16,6 +16,7 @@
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./components/artist.js" defer async></script> <script src="./components/artist.js" defer async></script>
<script src="./components/track.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="https://unpkg.com/v-tooltip"></script>
<script src="./js/text_computation.js"></script> <script src="./js/text_computation.js"></script>
<script src="./app.js" defer></script> <script src="./app.js" defer></script>

2
js/text_computation.js
View file

@ -13,7 +13,7 @@ function get_button_text () {
else if (this.count > 50) { else if (this.count > 50) {
this.error.main = `Cannot get more than 50 ${this.type.toLowerCase()}`; this.error.main = `Cannot get more than 50 ${this.type.toLowerCase()}`;
return false; return false;
} };
this.error.main = ``; this.error.main = ``;
return this.type; return this.type;
}; };