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

Finish track V2

Browse source
This commit is contained in:
Oliver-Akins 2020-08-23 01:13:25 -06:00
parent f70d8fb2ad
commit 33cf7db188
1 changed files with 57 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/components/cards/Track.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="card" @click="show_track_info = true"> <div class="card">
<div class="image"> <div class="image">
<img <img
v-if="item.album.images.length !== 0" v-if="item.album.images.length !== 0"
@ -22,25 +22,36 @@
</div> </div>
</div> </div>
<div class="bottom-bar"> <div class="bottom-bar">
<div class="popularity"> <button
class="popularity"
@click="show_pop_modal = true"
>
{{ item.popularity }} {{ item.popularity }}
</div> </button>
<div class="share"> <button
class="share"
name="Share"
@click="show_share_modal = true"
>
<icon <icon
type="share" type="share"
:size="25" :size="22"
:inner-size="25" :inner-size="22"
:primary="css_var('--card-bottom-row-icon-colour')" :primary="css_var('--card-bottom-row-icon-colour')"
/> />
</div> </button>
<div class="information"> <button
class="information"
name="Track Information"
@click="show_track_info = true"
>
<icon <icon
type="info" type="info"
:size="25" :size="22"
:inner-size="25" :inner-size="22"
:primary="css_var('--card-bottom-row-icon-colour')" :primary="css_var('--card-bottom-row-icon-colour')"
/> />
</div> </button>
<div class="duration"> <div class="duration">
{{ duration }} {{ duration }}
</div> </div>
@ -142,7 +153,7 @@ img {
.track-info { .track-info {
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
margin-bottom: 1.25em; margin-bottom: 25px;
display: flex; display: flex;
height: 100%; height: 100%;
} }
@ -163,40 +174,66 @@ img {
color: var(--card-bottom-row-text-colour); color: var(--card-bottom-row-text-colour);
justify-content: space-between; justify-content: space-between;
position: absolute; position: absolute;
padding-right: 5%;
padding-left: 5%;
display: flex; display: flex;
width: 90%; width: 100%;
bottom: 0; bottom: 0;
} }
.bottom-bar > button {
background-color: var(--card-bottom-row-background);
color: var(--card-bottom-row-text-colour);
font-size: initial;
padding: 0;
}
.popularity { cursor: pointer; }
.popularity:hover { background-color: var(--card-bottom-row-hover-background); }
.information, .share {
justify-content: center;
align-items: center;
cursor: pointer;
display: flex;
}
.information:hover, .share:hover {
background-color: var(--card-bottom-row-hover-background);
}
/* Setting the growth and alignments of the bottom bar buttons */ /* Setting the growth and alignments of the bottom bar buttons */
.bottom-bar > div { .bottom-bar > * {
border-color: var(--card-bottom-row-divider-colour); border-color: var(--card-bottom-row-divider-colour);
padding-bottom: 2px; padding-bottom: 2px;
padding-top: 2px; padding-top: 2px;
} }
.bottom-bar > :nth-child(1) { .bottom-bar > :nth-child(1) {
border-radius: 0 0 0 var(--corner-rounding);
border-right-style: solid; border-right-style: solid;
border-width: 2px; border-right-width: 2px;
padding-left: 5%;
text-align: left;
flex-grow: 1; flex-grow: 1;
} }
.bottom-bar > :nth-child(2) { .bottom-bar > :nth-child(2) {
border-radius: 0;
border-right-style: solid; border-right-style: solid;
border-right-width: 1px;
text-align: center; text-align: center;
border-width: 1px;
flex-grow: 2; flex-grow: 2;
} }
.bottom-bar > :nth-child(3) { .bottom-bar > :nth-child(3) {
border-radius: 0;
border-left-style: solid; border-left-style: solid;
border-left-width: 1px;
text-align: center; text-align: center;
border-width: 1px;
flex-grow: 2; flex-grow: 2;
} }
.bottom-bar > :nth-child(4) { .bottom-bar > :nth-child(4) {
border-radius: 0 0 var(--corner-rounding) 0;
border-left-style: solid; border-left-style: solid;
border-left-width: 2px;
padding-right: 5%;
text-align: right; text-align: right;
border-width: 2px;
flex-grow: 1; flex-grow: 1;
} }