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="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>
|
||||
|
|
@ -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>`
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>`
|
||||
}
|
||||
);
|
||||
|
|
@ -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 -->
|
||||
<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="./css/track.css">
|
||||
<link rel="stylesheet" href="./css/artist.css">
|
||||
<link rel="stylesheet" href="./css/card.css">
|
||||
|
||||
<!-- Javascript Imports -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue