83 lines
No EOL
4.8 KiB
Text
83 lines
No EOL
4.8 KiB
Text
<template v-if="page == 'artist-page' && artistPage.data.attributes">
|
|
<div class="content-inner artist-page">
|
|
<div class="artist-header" :style="getArtistPalette(artistPage.data)">
|
|
<animatedartwork-view v-if="app.artistPage.data.attributes.editorialVideo && (app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9 || app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9)" :video="app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9.video ?? (app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')" >
|
|
</animatedartwork-view>
|
|
<div class="row">
|
|
<div class="col-sm" style="width: auto;">
|
|
<div class="artist-image">
|
|
<mediaitem-artwork
|
|
:url="artistPage.data.attributes.artwork ? artistPage.data.attributes.artwork.url : ''"
|
|
size="220" type="artists"></mediaitem-artwork>
|
|
</div>
|
|
</div>
|
|
<div class="col flex-center">
|
|
<h1>{{ artistPage.data.attributes.name }}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="artist-body">
|
|
<div class="row well">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto" v-if="artistPage.data.views['latest-release']">
|
|
<h3>Latest Release</h3>
|
|
<div style="width: auto;margin: 0 auto;">
|
|
<mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data" :item="song">
|
|
</mediaitem-square-sp>
|
|
</div>
|
|
</div>
|
|
<div class="col" v-if="artistPage.data.views['top-songs']">
|
|
<h3>Top Songs</h3>
|
|
<mediaitem-list-item
|
|
v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
|
|
:item="song"></mediaitem-list-item>
|
|
<button class="showmoreless" @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
|
|
<template v-if="!artistPage.topSongsExpanded">
|
|
Show more
|
|
</template>
|
|
<template v-else>
|
|
Show less
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row well">
|
|
<div class="col">
|
|
<template v-for="(view) in artistPage.data.meta.views.order"
|
|
v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h3>{{ artistPage.data.views[view].attributes.title ? artistPage.data.views[view].attributes.title : "???"}}
|
|
</h3>
|
|
</div>
|
|
<div class="col-auto flex-center" v-if="artistPage.data.views[view].data.length >= 10">
|
|
<button class="cd-btn-seeall">See All</button>
|
|
</div>
|
|
</div>
|
|
<mediaitem-scroller-horizontal-large :items="artistPage.data.views[view].data.limit(10)">
|
|
</mediaitem-scroller-horizontal-large>
|
|
</template>
|
|
<div class="row">
|
|
<div class="col" v-if="artistPage.data.attributes.artistBio">
|
|
<h3>About {{ artistPage.data.attributes.name }}</h3>
|
|
<p v-html="artistPage.data.attributes.artistBio"></p>
|
|
</div>
|
|
<div class="col">
|
|
<div v-if="artistPage.data.attributes.origin">
|
|
<h3>{{ artistPage.data.attributes.isGroup ? "Origin" : "Hometown" }}</h3>
|
|
{{ artistPage.data.attributes.origin }}
|
|
</div>
|
|
<div v-if="artistPage.data.attributes.bornOrFormed">
|
|
<h3>{{ artistPage.data.attributes.isGroup ? "Born" : "Formed" }}</h3>
|
|
{{ artistPage.data.attributes.bornOrFormed }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |