Update the artist card to the V2 design
This commit is contained in:
Oliver-Akins
parent
ae430bfa49
commit
29eca28e46
1 changed files with 96 additions and 45 deletions
|
|
@ -4,50 +4,70 @@
|
|||
<img
|
||||
v-if="item.images.length !== 0"
|
||||
:src="item.images[0].url"
|
||||
:alt="`${item.name} profile image`"
|
||||
:alt="`${item.name}'s artist image`"
|
||||
>
|
||||
<icon
|
||||
v-else
|
||||
type="notes"
|
||||
:size="230"
|
||||
:border="115"
|
||||
:size="200"
|
||||
:border="100"
|
||||
:primary="'--missing-picture-foreground'"
|
||||
:background="'--missing-picture-background'"
|
||||
/>
|
||||
</div>
|
||||
<div class="artist-info">
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="subtitle">{{ genres }}</div>
|
||||
<div class="title">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
{{ item.genres.map(x => x.toTitleCase()).join(`, `) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-tooltip.auto="popularity_tooltip"
|
||||
class="popularity corner"
|
||||
@click.self="show_pop_modal = true"
|
||||
>
|
||||
{{ item.popularity }}
|
||||
</div>
|
||||
<div
|
||||
v-tooltip.auto="followers_tooltip"
|
||||
class="followers corner"
|
||||
>
|
||||
{{ item.followers.total.toLocaleString() }}
|
||||
<div class="bottom-bar">
|
||||
<button
|
||||
v-tooltip="popularity_tooltip"
|
||||
class="popularity"
|
||||
@click="show_pop_modal = true"
|
||||
>
|
||||
{{ item.popularity }}
|
||||
</button>
|
||||
<button
|
||||
v-tooltip="share_tooltip"
|
||||
class="share"
|
||||
name="Share"
|
||||
@click="copy_text(item.external_urls.spotify)"
|
||||
>
|
||||
<icon
|
||||
type="share"
|
||||
:size="22"
|
||||
:inner-size="22"
|
||||
:primary="'--card-bottom-row-icon-colour'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<PopularityModal
|
||||
v-if="show_pop_modal"
|
||||
@close="show_pop_modal = false"
|
||||
/>
|
||||
<Sharing
|
||||
v-if="show_share_modal"
|
||||
:track="item"
|
||||
@close="show_share_modal = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Import Components
|
||||
import Icon from "../Icon";
|
||||
import PopularityModal from "../modals/PopularityInfo.vue";
|
||||
import ShareModal from "../modals/ShareTrack";
|
||||
import PopularityModal from "../modals/PopularityInfo";
|
||||
|
||||
export default {
|
||||
name: `ArtistCard`,
|
||||
name: `TrackCard`,
|
||||
components: {
|
||||
PopularityModal: PopularityModal,
|
||||
Sharing: ShareModal,
|
||||
icon: Icon,
|
||||
},
|
||||
props: {
|
||||
|
|
@ -57,19 +77,12 @@ export default {
|
|||
}
|
||||
},
|
||||
data() { return {
|
||||
followers_tooltip: `Total Followers`,
|
||||
popularity_tooltip: `Artist Popularity`,
|
||||
share_tooltip: `Click to Copy Artist Link`,
|
||||
show_pop_modal: false,
|
||||
show_share_modal: false,
|
||||
}},
|
||||
computed: {
|
||||
genres() {
|
||||
let genres = [];
|
||||
for (var genre of this.item.genres) {
|
||||
genres.push(genre.toTitleCase());
|
||||
};
|
||||
return genres.join(`, `);
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -81,13 +94,13 @@ export default {
|
|||
border-width: var(--card-border-width);
|
||||
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;
|
||||
position: relative;
|
||||
margin: 5px auto;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
|
@ -96,7 +109,15 @@ img {
|
|||
--size: 230px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: var(--corner-rounding);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -109,27 +130,57 @@ 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;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
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 {
|
||||
border-radius: 0 var(--corner-rounding) 0 var(--corner-rounding);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.popularity:hover {
|
||||
|
||||
.popularity { cursor: pointer; }
|
||||
.popularity:hover { background-color: var(--card-bottom-row-hover-background); }
|
||||
|
||||
.share {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
.share:hover {
|
||||
background-color: var(--card-bottom-row-hover-background);
|
||||
}
|
||||
|
||||
.followers {
|
||||
border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
/* Setting the growth and alignments of the bottom bar buttons */
|
||||
.bottom-bar > * {
|
||||
border-color: var(--card-bottom-row-divider-colour);
|
||||
padding-bottom: 2px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.bottom-bar > :first-child {
|
||||
border-radius: 0 0 0 var(--corner-rounding);
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.bottom-bar > :last-child {
|
||||
border-radius: 0 0 var(--corner-rounding) 0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.card {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue