From b05b826f4f0b7a7ee7ea88edf2bafe58ce588de0 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Mon, 6 Dec 2021 21:21:30 -0800
Subject: [PATCH] adjusted artist page to look like eleven artist CSS

---
 resources/cider-ui-tests/style.css            |  8 ++++
 .../cider-ui-tests/views/pages/artist.ejs     | 46 ++++++++++---------
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index a314713f..9ac1da36 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -1356,6 +1356,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     padding: 16px;
 }
 
+.artist-page .well {
+    background: rgba(200, 200, 200, 0.05);
+    border-radius: 10px;
+    padding: 16px;
+    box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
+    margin-top: 16px;
+}
+
 .artist-page .showmoreless {
     font-family: inherit;
     font-size: 16px;
diff --git a/resources/cider-ui-tests/views/pages/artist.ejs b/resources/cider-ui-tests/views/pages/artist.ejs
index da467386..9cb02a86 100644
--- a/resources/cider-ui-tests/views/pages/artist.ejs
+++ b/resources/cider-ui-tests/views/pages/artist.ejs
@@ -18,30 +18,34 @@
             </div>
         </div>
         <div class="artist-body">
-            <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 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 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 class="row">
+            <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')">