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

Add the bottom bar with the icons.

Browse source 
Adds styling for the bottom of the card.
This commit is contained in:
Oliver-Akins 2020-08-22 00:05:43 -06:00
parent 0e757cabf5
commit d7d780c188
1 changed files with 71 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,19 +21,30 @@
{{ item.artists.map(x => x.name).join(`, `) }}
</div>
</div>
<div
v-tooltip.auto="popularity_tooltip"
class="popularity corner"
@click.self.stop="show_pop_modal = true"
>
<div class="bottom-bar">
<div class="popularity">
{{ item.popularity }}
</div>
<div
v-tooltip.auto="duration_tooltip"
class="duration corner"
>
<div class="share">
<icon
type="share"
:size="25"
:inner-size="25"
:primary="css_var('--card-bottom-row-icon-colour')"
/>
</div>
<div class="information">
<icon
type="info"
:size="25"
:inner-size="25"
:primary="css_var('--card-bottom-row-icon-colour')"
/>
</div>
<div class="duration">
{{ duration }}
</div>
</div>
<PopularityModal
v-if="show_pop_modal"
@close="show_pop_modal = false"
@ -48,6 +59,7 @@
<script>
// Import Components
import Icon from "../Icon";
import PopularityModal from "../modals/PopularityInfo.vue";
import DetailedTrackModal from "../modals/DetailedTrack.vue";
@ -56,6 +68,7 @@ export default {
components: {
PopularityModal: PopularityModal,
TrackInfo: DetailedTrackModal,
icon: Icon,
},
props: {
item: {
@ -100,7 +113,6 @@ export default {
.card {
border-radius: var(--corner-rounding);
background-color: var(--card-colour);
padding: 10px 10px 1.75em;
color: var(--card-text);
flex-direction: column;
align-items: center;
@ -108,6 +120,7 @@ export default {
position: relative;
margin: 5px auto;
display: flex;
padding: 10px;
width: 90%;
}
@ -118,6 +131,14 @@ img {
height: var(--size);
}
.track-info {
justify-content: center;
flex-direction: column;
margin-bottom: 1.25em;
display: flex;
height: 100%;
}
.title {
text-align: center;
font-size: larger;
@ -128,27 +149,49 @@ img {
font-size: smaller;
}
.corner {
background-color: var(--on-card-colour);
color: var(--on-card-text);
.bottom-bar {
border-radius: 0 0 var(--corner-rounding) var(--corner-rounding);
background-color: var(--card-bottom-row-background);
color: var(--card-bottom-row-text-colour);
justify-content: space-between;
position: absolute;
padding: 1px 6px;
padding-right: 5%;
padding-left: 5%;
display: flex;
width: 90%;
bottom: 0;
}
.popularity {
border-radius: 0 var(--corner-rounding) 0 var(--corner-rounding);
bottom: 0;
left: 0;
/* Setting the growth and alignments of the bottom bar buttons */
.bottom-bar > div {
border-color: var(--card-bottom-row-divider-colour);
padding-bottom: 2px;
padding-top: 2px;
}
.popularity:hover {
cursor: pointer;
.bottom-bar > :nth-child(1) {
border-right-style: solid;
border-width: 2px;
flex-grow: 1;
}
.bottom-bar > :nth-child(2) {
border-right-style: solid;
text-align: center;
border-width: 1px;
flex-grow: 2;
}
.bottom-bar > :nth-child(3) {
border-left-style: solid;
text-align: center;
border-width: 1px;
flex-grow: 2;
}
.bottom-bar > :nth-child(4) {
border-left-style: solid;
text-align: right;
border-width: 2px;
flex-grow: 1;
}
.duration {
border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;
bottom: 0;
right: 0;
}
@media only screen and (min-width: 768px) {
.card {