client: folder view improvements

src/components/FolderView/SearchBox.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="folder-top flex">
     <div class="fname">
-      <span>Oldies Volume 1</span>
+      <div>
+        <div class="ellip">{{ path.split('/').splice(-1) + "" }}</div>
+      </div>
     </div>
     <div class="fsearch">
       <div>
@@ -12,10 +14,12 @@
 </template>
 
 <script>
-export default {};
+export default {
+  props: ["path"]
+};
 </script>
 
-<style>
+<style lang="scss">
 .folder-top {
   padding-bottom: 1rem;
   margin-bottom: 1rem;
@@ -28,6 +32,16 @@ export default {};
   text-transform: uppercase;
   display: flex;
   align-items: center;
+  // border: solid;
+  // height: 4rem;
+
+  // .name {
+  //   font-size: large;
+  // }
+
+  // .path {
+  //   font-size: $small;
+  // }
 }
 
 .folder-top .fsearch {
@@ -44,7 +58,7 @@ export default {};
 .folder-top .fsearch input {
   width: 30rem;
   border: none;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   padding-left: 1rem;
   background-color: #4645456c;
   color: rgba(255, 255, 255, 0.521);

src/components/FolderView/SongList.vue

@@ -12,7 +12,9 @@
           <td :style="{ width: songTitleWidth + 'px' }" class="flex">
             <div
               class="album-art rounded image"
-              :style='{ backgroundImage: `url("${image_path + song.image}")` }'
+              :style="{
+                backgroundImage: `url(&quot;${image_path + song.image}&quot;)`,
+              }"
             ></div>
             <div>
               <span class="ellipsis">{{ song.title }}</span>
@@ -28,7 +30,7 @@
             :style="{ width: songTitleWidth + 'px' }"
             v-if="songTitleWidth > minWidth"
           >
-            {{ song.length/60 }}
+            {{ `${Math.trunc(song.length / 60)} min` }}
           </td>
         </tr>
       </table>
@@ -45,6 +47,7 @@ export default {
   props: ["songs"],
   setup() {
     const songtitle = ref(null);
+    console.log(songtitle);
     const songTitleWidth = ref(null);
     const image_path = "http://127.0.0.1:8900/images/thumbnails/";
 
@@ -79,7 +82,7 @@ export default {
 .table {
   width: 100%;
   height: calc(100%);
-  background: transparent;
+  background-color: rgba(56, 56, 56, 0.363);
   overflow-y: auto;
 
   &::-webkit-scrollbar {
@@ -89,17 +92,24 @@ export default {
 
 .folder .table table {
   border-collapse: collapse;
-  width: 100%;
   text-transform: capitalize;
   position: relative;
+  margin: 1rem;
+
+  tr {
+    &:hover {
+      td {
+        background-color: rgba(255, 174, 0, 0.534);
+      }
+    }
+  }
 }
 
 .folder .table table td .album-art {
   width: 3rem;
   height: 3rem;
   margin-right: 1rem;
-  // background-color: rgb(194, 67, 67);
-  // background-image: url(../../assets/images/jw.jpeg);
+  background-image: url(../../assets/icons/file.svg);
 }
 
 .folder .table .flex {
@@ -112,22 +122,19 @@ export default {
   bottom: 1.5rem;
   width: calc(100% - 6rem);
 }
-
 td,
 th {
-  text-align: left;
   padding: 8px;
+  text-align: left;
 }
 
 th {
   height: 3rem;
 }
+
 tr:nth-child(even) {
   background-color: rgba(29, 29, 29, 0.767);
 }
-tr:nth-child(odd) {
-  background-color: rgba(56, 56, 56, 0.363);
-}
 
 th {
   text-transform: uppercase;

src/components/LeftSidebar/Navigation.vue

@@ -45,7 +45,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '/' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="folders-icon"></div>
@@ -54,7 +54,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '/' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="settings-icon"></div>