From f9cb47083f55988b6836ee518390e51703d37814 Mon Sep 17 00:00:00 2001
From: yazninja <yazlesean@gmail.com>
Date: Mon, 25 Jul 2022 16:51:31 +0800
Subject: [PATCH] stylize new listen now childs

---
 src/renderer/views/components/listennow-child.ejs | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/renderer/views/components/listennow-child.ejs b/src/renderer/views/components/listennow-child.ejs
index d885ebb2..8f7bcf6c 100644
--- a/src/renderer/views/components/listennow-child.ejs
+++ b/src/renderer/views/components/listennow-child.ejs
@@ -2,15 +2,18 @@
     <div v-observe-visibility="{callback: visibilityChanged}">
     <template v-if="isVisible && recom.attributes.display.kind != 'MusicSuperHeroShelf'">    
         <div class="row">
-            <div class="col" v-if="recom?.relationships['primary-content']?.data?.length > 0" style="display: flex;">
+            <div class="col" v-if="recom?.relationships['primary-content']?.data?.length > 0" style="display: flex; margin-block:1rem;">
                 <div @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" class="listennow-chip" style="height: 40px;width: 40px;align-self: center;margin-right: 10px;" :class="{ 'circle': recom?.relationships['primary-content']?.data[0]?.type == 'artists'  }">
                     <mediaitem-artwork v-if="recom?.relationships['primary-content']?.data[0]?.attributes?.artwork != null" :url="recom?.relationships['primary-content']?.data[0]?.attributes?.artwork?.url" :size="100"></mediaitem-artwork>
                 </div>
-                <h3 @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" style="width: fit-content;" :class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
-                    {{ recom.attributes.title ? recom.attributes.title.stringForDisplay : "  "}}</h3>
+                <div @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" style="width: fit-content;" :class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
+                    <span style="opacity: 0.5; font-weight: bold;"> {{ recom.attributes.titleWithoutName.stringForDisplay }} </span>
+                    <h3 style="margin-block: 0"> {{ recom.attributes.title.stringForDisplay.replace(recom.attributes.titleWithoutName.stringForDisplay, '') }}</h3>
+
+                </div>
             </div>
-            <div class="col" v-else>
-                <h3 @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" style="width: fit-content;" :class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
+            <div class="col" v-else style="display: flex; margin-block:1rem;">
+                <h3 @click="navigateContent(recom?.relationships['primary-content']?.data[0] ?? recom?.attributes?.title?.contentIds[0] ?? '')" style="width: fit-content; margin-block:0;" :class="{'item-navigate' : (recom?.attributes?.title?.contentIds?.length ?? 0) > 0 | recom?.relationships['primary-content']?.data?.length > 0}">
                     {{ recom.attributes.title ? recom.attributes.title.stringForDisplay : "  "}}</h3>
             </div>
             <div class="col-auto cider-flex-center" v-if="recom.relationships.contents.data.length >= 10">