Improve CSS (Finishes #9 )
This commit is contained in:
Tyler-A
parent
5c4c029f79
commit
ca83a1750f
8 changed files with 153 additions and 237 deletions
|
|
@ -1,19 +1,17 @@
|
||||||
<div class="artist">
|
<div class="card">
|
||||||
<div class="image profile_pic" v-if="artist.image">
|
<div class="image">
|
||||||
<img :src="artist.image.url" :alt="artist.name + 's profile picture'">
|
<img v-id="artist.image" :src="artist.image.url" :alt="artist.name + 's profile picture'" target="_blank" rel="noopener">
|
||||||
</div>
|
<div class="missing-image" v-else>
|
||||||
<div class="image profile_pic" v-else>
|
|
||||||
<div class="missing-circle">
|
|
||||||
<music-note colour="#1DB954"></music-note>
|
<music-note colour="#1DB954"></music-note>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<span class="name">
|
<span class="title">
|
||||||
<a :href="artist.link" target="_blank" rel="noopener">{{artist.name}}</a>
|
<a :href="artist.link" target="_blank" rel="noopener">{{artist.name}}</a>
|
||||||
</span>
|
</span>
|
||||||
<br>
|
<br>
|
||||||
<span class="genres">{{artist.genres.join(", ")}}</span>
|
<span class="subtitle">{{genres}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="popularity">{{artist.popularity}}</div>
|
<div class="bottom left corner popularity" v-tooltip="popularity_tooltip">{{artist.popularity}}</div>
|
||||||
<div class="followers">{{artist.follower_count}}</div>
|
<div class="bottom right corner followers" v-tooltip="followers_tooltip">{{artist.follower_count}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2,25 +2,37 @@ Vue.component(
|
||||||
`artist`,
|
`artist`,
|
||||||
{
|
{
|
||||||
props: [ `artist` ],
|
props: [ `artist` ],
|
||||||
computed: {},
|
data: function () {
|
||||||
template: `<div class="artist">
|
return {
|
||||||
<div class="image profile_pic" v-if="artist.image">
|
popularity_tooltip: `Popularity`,
|
||||||
<img :src="artist.image.url" :alt="artist.name + 's profile picture'">
|
followers_tooltip: `Followers`,
|
||||||
</div>
|
};
|
||||||
<div class="image profile_pic" v-else>
|
},
|
||||||
<div class="missing-circle">
|
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>
|
<music-note colour="#1DB954"></music-note>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<span class="name">
|
<span class="title">
|
||||||
<a :href="artist.link" target="_blank" rel="noopener">{{artist.name}}</a>
|
<a :href="artist.link" target="_blank" rel="noopener">{{artist.name}}</a>
|
||||||
</span>
|
</span>
|
||||||
<br>
|
<br>
|
||||||
<span class="genres">{{artist.genres.join(", ")}}</span>
|
<span class="subtitle">{{genres}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="popularity">{{artist.popularity}}</div>
|
<div class="bottom left corner popularity" v-tooltip="popularity_tooltip">{{artist.popularity}}</div>
|
||||||
<div class="followers">{{artist.follower_count}}</div>
|
<div class="bottom right corner followers" v-tooltip="followers_tooltip">{{artist.follower_count}}</div>
|
||||||
</div>`
|
</div>`
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
@ -1,20 +1,22 @@
|
||||||
<div class="track">
|
<div class="card">
|
||||||
<div class="cover center">
|
<div class="image">
|
||||||
<a :href="track.album.link" target="_blank" rel="noopener">
|
<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">
|
<img :src="track.album.image.url" :alt="track.album.name + ' Cover Image'" class="cover">
|
||||||
</a>
|
</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>
|
||||||
<div class="info">
|
<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>
|
<a :href="track.link" target="_blank" rel="noopener">{{track.name}}</a>
|
||||||
</span>
|
</span>
|
||||||
<span class="name local" v-else>
|
<span class="title local" v-else>{{track.name}}</span>
|
||||||
{{track.name}}
|
|
||||||
</span>
|
|
||||||
<br>
|
|
||||||
<span class="artist" v-html="artists"></span>
|
|
||||||
<br>
|
<br>
|
||||||
|
<span class="subtitle" v-html="artists"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="popularity" v-tooltip="popularity_tooltip">{{track.popularity}}</div>
|
<div class="popularity bottom left corner" v-tooltip="popularity_tooltip">{{track.popularity}}</div>
|
||||||
<div class="duration">{{duration}}</div>
|
<div class="duration bottom right corner">{{duration}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -7,26 +7,6 @@ Vue.component(
|
||||||
popularity_tooltip: `Popularity`
|
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: {
|
computed: {
|
||||||
duration: function () {
|
duration: function () {
|
||||||
let timestamp = ``;
|
let timestamp = ``;
|
||||||
|
|
@ -58,6 +38,28 @@ Vue.component(
|
||||||
}
|
}
|
||||||
return artists.join(`, `)
|
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>`
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
84
css/card.css
Normal file
84
css/card.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -8,8 +8,7 @@
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<link rel="stylesheet" href="./css/track.css">
|
<link rel="stylesheet" href="./css/card.css">
|
||||||
<link rel="stylesheet" href="./css/artist.css">
|
|
||||||
|
|
||||||
<!-- Javascript Imports -->
|
<!-- Javascript Imports -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue