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