From 5ebe7b0dffbda00a6b34ea0d843573369a5bac77 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 17 Dec 2021 01:59:17 +0300
Subject: [PATCH] client: add info icon

for no folders in folder view
---
 src/components/FolderView/FolderList.vue | 12 ++++++++++--
 src/components/FolderView/SongList.vue   | 14 +++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index a6bb1a77..87da4fe7 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="f-container rounded">
+  <div class="f-container rounded" :class="{ info: !folders.length }">
     <p v-if="folders.length">folders in this directory</p>
     <div id="f-items" v-if="folders.length">
       <router-link
@@ -23,7 +23,7 @@
 export default {
   props: ["folders"],
   setup() {
-    console.log('props.folders')
+    console.log("props.folders");
   },
 };
 </script>
@@ -35,6 +35,14 @@ export default {
   padding: 1rem;
 }
 
+.info {
+  background-image: url(../../assets/icons/info.svg);
+  background-repeat: no-repeat;
+  background-position: 1rem;
+  background-size: 2rem 2rem;
+  padding-left: 4rem;
+}
+
 #f-items {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 59466776..32806d63 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -17,13 +17,18 @@
               }"
             ></div>
             <div>
-              <span class="ellipsis">{{ song.title }}</span>
+              <span class="ellip">{{ song.title }}</span>
             </div>
           </td>
           <td :style="{ width: songTitleWidth + 'px' }">
-            <span class="artist" v-for="artist in song.artists" :key="artist">{{
-              artist
-            }}</span>
+            <div class="ellip">
+              <span
+                class="artist"
+                v-for="artist in song.artists"
+                :key="artist"
+                >{{ artist }}</span
+              >
+            </div>
           </td>
           <td :style="{ width: songTitleWidth + 'px' }">{{ song.album }}</td>
           <td
@@ -146,7 +151,6 @@ th {
 }
 
 td .artist {
-  color: #b1b1b1fd;
   font-weight: lighter;
   margin-right: 0.5rem;
 }