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

Improve CSS (Finishes #9 )

Browse source
This commit is contained in:
Tyler-A 2020-07-06 23:39:08 -06:00
parent 5c4c029f79
commit ca83a1750f
8 changed files with 153 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/artist.html
View file

@ -1,19 +1,17 @@
<div class="artist">
<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">
<div class="card">
<div class="image">
<img v-id="artist.image" :src="artist.image.url" :alt="artist.name + 's profile picture'" target="_blank" rel="noopener">
<div class="missing-image" v-else>
<music-note colour="#1DB954"></music-note>
</div>
</div>
<div class="info">
<span class="name">
<span class="title">
<a :href="artist.link" target="_blank" rel="noopener">{{artist.name}}</a>
</span>
<br>
<span class="genres">{{artist.genres.join(", ")}}</span>
<span class="subtitle">{{genres}}</span>
</div>
<div class="popularity">{{artist.popularity}}</div>
<div class="followers">{{artist.follower_count}}</div>
<div class="bottom left corner popularity" v-tooltip="popularity_tooltip">{{artist.popularity}}</div>
<div class="bottom right corner followers" v-tooltip="followers_tooltip">{{artist.follower_count}}</div>
</div>

36
components/artist.js
View file

@ -2,25 +2,37 @@ Vue.component(
`artist`,
{
props: [ `artist` ],
computed: {},
template: `<div class="artist">
<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">
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: `<div class="card">
<div class="image">
<img v-id="artist.image" :src="artist.image.url" :alt="artist.name + 's profile picture'" target="_blank" rel="noopener">
<div class="missing-image" v-else>
<music-note colour="#1DB954"></music-note>
</div>
</div>
<div class="info">
<span class="name">
<span class="title">
<a :href="artist.link" target="_blank" rel="noopener">{{artist.name}}</a>
</span>
<br>
<span class="genres">{{artist.genres.join(", ")}}</span>
<span class="subtitle">{{genres}}</span>
</div>
<div class="popularity">{{artist.popularity}}</div>
<div class="followers">{{artist.follower_count}}</div>
<div class="bottom left corner popularity" v-tooltip="popularity_tooltip">{{artist.popularity}}</div>
<div class="bottom right corner followers" v-tooltip="followers_tooltip">{{artist.follower_count}}</div>
</div>`
}
}
)

24
components/track.html
View file

@ -1,20 +1,22 @@
<div class="track">
<div class="cover center">
<a :href="track.album.link" target="_blank" rel="noopener">
<div class="card">
<div class="image">
<a v-if="track.album.image.url" :href="track.album.link" target="_blank" rel="noopener">
<img :src="track.album.image.url" :alt="track.album.name + ' Cover Image'" class="cover">
</a>
<a v-else :href="track.album.link" target="_blank" rel="noopener">
<div class="missing-image">
<music-note colour="#1DB954"></music-note>
</div>
</a>
</div>
<div class="info">
<span class="name remote" v-if="!track.locality">
<span class="title remote" v-if="!track.locality">
<a :href="track.link" target="_blank" rel="noopener">{{track.name}}</a>
</span>
<span class="name local" v-else>
{{track.name}}
</span>
<br>
<span class="artist" v-html="artists"></span>
<span class="title local" v-else>{{track.name}}</span>
<br>
<span class="subtitle" v-html="artists"></span>
</div>
<div class="popularity" v-tooltip="popularity_tooltip">{{track.popularity}}</div>
<div class="duration">{{duration}}</div>
<div class="popularity bottom left corner" v-tooltip="popularity_tooltip">{{track.popularity}}</div>
<div class="duration bottom right corner">{{duration}}</div>
</div>

44
components/track.js
View file

@ -7,26 +7,6 @@ Vue.component(
popularity_tooltip: `Popularity`
}
},
template: `<div class="track">
<div class="cover center">
<a :href="track.album.link" target="_blank" rel="noopener">
<img :src="track.album.image.url" :alt="track.album.name + ' Cover Image'" class="cover">
</a>
</div>
<div class="info">
<span class="name remote" v-if="!track.locality">
<a :href="track.link" target="_blank" rel="noopener">{{track.name}}</a>
</span>
<span class="name local" v-else>
{{track.name}}
</span>
<br>
<span class="artist" v-html="artists"></span>
<br>
</div>
<div class="popularity" v-tooltip="popularity_tooltip">{{track.popularity}}</div>
<div class="duration">{{duration}}</div>
</div>`,
computed: {
duration: function () {
let timestamp = ``;
@ -58,6 +38,28 @@ Vue.component(
}
return artists.join(`, `)
},
}
},
template: `<div class="card">
<div class="image">
<a v-if="track.album.image.url" :href="track.album.link" target="_blank" rel="noopener">
<img :src="track.album.image.url" :alt="track.album.name + ' Cover Image'" class="cover">
</a>
<a v-else :href="track.album.link" target="_blank" rel="noopener">
<div class="missing-image">
<music-note colour="#1DB954"></music-note>
</div>
</a>
</div>
<div class="info">
<span class="title remote" v-if="!track.locality">
<a :href="track.link" target="_blank" rel="noopener">{{track.name}}</a>
</span>
<span class="title local" v-else>{{track.name}}</span>
<br>
<span class="subtitle" v-html="artists"></span>
</div>
<div class="popularity bottom left corner" v-tooltip="popularity_tooltip">{{track.popularity}}</div>
<div class="duration bottom right corner">{{duration}}</div>
</div>`
}
);