From a892305c09875a9fb0bda39ff9d71f4be658a1aa Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 6 Dec 2021 20:27:46 -0800
Subject: [PATCH] artist page formatting

---
 resources/cider-ui-tests/style.css            |  3 +-
 .../cider-ui-tests/views/pages/artist.ejs     | 47 ++++++++++++-------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 7fb87b18..08198878 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -1349,12 +1349,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .artist-page .artist-image {
     width: 200px;
     height: 200px;
-    background: red;
     margin: 32px;
 }
 
 .artist-page .artist-body {
-    
+    padding: 16px;
 }
 
 .artist-page .showmoreless {
diff --git a/resources/cider-ui-tests/views/pages/artist.ejs b/resources/cider-ui-tests/views/pages/artist.ejs
index df0abb15..da467386 100644
--- a/resources/cider-ui-tests/views/pages/artist.ejs
+++ b/resources/cider-ui-tests/views/pages/artist.ejs
@@ -1,10 +1,15 @@
 <template v-if="page == 'artist-page' && artistPage.data.attributes">
     <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="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">
@@ -16,15 +21,16 @@
             <div class="row">
                 <div class="col-auto" v-if="artistPage.data.views['latest-release']">
                     <h3>Latest Release</h3>
-                    <mediaitem-square-sp
-                    v-for="song in artistPage.data.views['latest-release'].data"
-                    :item="song"></mediaitem-square-sp>
+                    <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>
+                        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
@@ -37,27 +43,36 @@
             </div>
             <div class="row">
                 <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="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 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>
                             </div>
                         </div>
-                        <mediaitem-scroller-horizontal-large
-                        :items="artistPage.data.views[view].data.limit(10)"></mediaitem-scroller-horizontal-large>
+                        <mediaitem-scroller-horizontal-large :items="artistPage.data.views[view].data.limit(10)">
+                        </mediaitem-scroller-horizontal-large>
                     </template>
                     <div class="row">
-                        <div class="col">
-                            <h3>About Artist Name</h3>
+                        <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>
-                    <h3>Similar Artists</h3>
                 </div>
             </div>
         </div>