okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

artist page formatting

Browse source
This commit is contained in:
booploops 2021-12-06 20:27:46 -08:00
parent d38e29adef
commit a892305c09
2 changed files with 32 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

3
resources/cider-ui-tests/style.css
View file

@ -1349,12 +1349,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.artist-page .artist-image { .artist-page .artist-image {
width: 200px; width: 200px;
height: 200px; height: 200px;
background: red;
margin: 32px; margin: 32px;
} }
.artist-page .artist-body { .artist-page .artist-body {
padding: 16px;
} }
.artist-page .showmoreless { .artist-page .showmoreless {

43
resources/cider-ui-tests/views/pages/artist.ejs
View file

@ -1,10 +1,15 @@
<template v-if="page == 'artist-page' && artistPage.data.attributes"> <template v-if="page == 'artist-page' && artistPage.data.attributes">
<div class="content-inner artist-page"> <div class="content-inner artist-page">
<div class="artist-header"> <div class="artist-header" :style="{
'background': '#' + artistPage.data.attributes.artwork.bgColor,
'color': '#' + artistPage.data.attributes.artwork.textColor1
}">
<div class="row"> <div class="row">
<div class="col-sm" style="width: auto;"> <div class="col-sm" style="width: auto;">
<div class="artist-image"> <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> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -16,9 +21,10 @@
<div class="row"> <div class="row">
<div class="col-auto" v-if="artistPage.data.views['latest-release']"> <div class="col-auto" v-if="artistPage.data.views['latest-release']">
<h3>Latest Release</h3> <h3>Latest Release</h3>
<mediaitem-square-sp <div style="width: auto;margin: 0 auto;">
v-for="song in artistPage.data.views['latest-release'].data" <mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data" :item="song">
:item="song"></mediaitem-square-sp> </mediaitem-square-sp>
</div>
</div> </div>
<div class="col" v-if="artistPage.data.views['top-songs']"> <div class="col" v-if="artistPage.data.views['top-songs']">
<h3>Top Songs</h3> <h3>Top Songs</h3>
@ -37,27 +43,36 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<template v-for="(view) in artistPage.data.meta.views.order" v-if="artistPage.data.views[view].data.length != 0"> <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="row">
<div class="col"> <div class="col">
<h3>{{ artistPage.data.views[view].attributes.title ? artistPage.data.views[view].attributes.title : "???"}}</h3> <h3>{{ artistPage.data.views[view].attributes.title ? artistPage.data.views[view].attributes.title : "???"}}
</h3>
</div> </div>
<div class="col-auto flex-center" v-if="view.data >= 10"> <div class="col-auto flex-center" v-if="artistPage.data.views[view].data.length >= 10">
<button class="cd-btn-seeall">See All</button> <button class="cd-btn-seeall">See All</button>
</div> </div>
</div> </div>
<mediaitem-scroller-horizontal-large <mediaitem-scroller-horizontal-large :items="artistPage.data.views[view].data.limit(10)">
:items="artistPage.data.views[view].data.limit(10)"></mediaitem-scroller-horizontal-large> </mediaitem-scroller-horizontal-large>
</template> </template>
<div class="row"> <div class="row">
<div class="col"> <div class="col" v-if="artistPage.data.attributes.artistBio">
<h3>About Artist Name</h3> <h3>About {{ artistPage.data.attributes.name }}</h3>
<p v-html="artistPage.data.attributes.artistBio"></p>
</div> </div>
<div class="col"> <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>
<h3>Similar Artists</h3>
</div> </div>
</div> </div>
</div> </div>