add folder list

src/App.vue

@@ -8,9 +8,7 @@
           ><div ref="logo" class="logo"></div
         ></router-link>
       </div>
-      <!-- <hr class="seperator" /> -->
       <Navigation :collapsed="collapsed" />
-      <!-- <hr class="seperator" /> -->
       <PinnedStuff :collapsed="collapsed" />
       <div id="settings-button">
         <div class="in">
@@ -53,8 +51,6 @@ export default {
 </script>
 
 <style>
-
-
 .logo {
   height: 30px;
   width: 150px;

src/assets/css/global.css

@@ -1,5 +1,6 @@
 :root {
-  --grey: #ffffff48;
+  --seperator: #ffffff48;
+  --green: #4AD168;
 }
 
 body {
@@ -19,10 +20,10 @@ a {
   color: #fff;
 }
 
-hr,
 .seperator {
   border: 1px solid;
-  color: #ffffff48;
+  color: transparent;
+  margin: 0em;
 }
 
 .hidden {
@@ -75,7 +76,10 @@ hr,
 }
 .rounded {
   border-radius: 10px;
-  overflow: hidden;
+}
+
+.circular {
+  border-radius: 20px;
 }
 
 .flex {
@@ -91,6 +95,8 @@ hr,
   grid-area: content;
   border-radius: 5px;
   padding: 10px;
+  overflow: hidden;
+  height: 100%;
 }
 
 .r-sidebar {

src/components/FolderView/FolderList.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="f-container" v-for="folder in folders" :key="folder">
+    <router-link :to="{ path: '/' }">
+      <div class="f-item circular">
+        <div class="f-item-bg"></div>
+        <span class="f-item-text">{{ folder.name }}</span>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script>
+import Folders from "../../data/folders.js";
+
+export default {
+  setup() {
+    const folders = Folders.folders;
+
+    return { folders };
+  },
+};
+</script>
+
+<style>
+.f-item {
+  width: 10em;
+  height: 10em;
+  background-color: var(--green);
+  display: flex;
+  justify-content: center;
+  position: relative;
+  background-image: url(../../assets/icons/folder.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 50%;
+}
+
+.f-item-text {
+  width: calc(100% - 10%);
+  line-height-step: 2;
+  position: absolute;
+  bottom: -3em;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.f-item-bg {
+  height: 100px;
+  width: 100%;
+  color: red;
+}
+</style>

src/components/FolderView/SearchBox.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="folder-top flex">
+    <div class="fname">
+      <span>Oldies Volume 1</span>
+    </div>
+    <div class="fsearch">
+      <div>
+        <input type="search" placeholder="Search here" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.folder-top {
+  padding-bottom: 1em;
+  margin-bottom: 1em;
+  border-bottom: 1px solid var(--seperator);
+}
+
+.folder-top .fname {
+  width: 50%;
+  color: rgba(255, 255, 255, 0.438);
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+}
+
+.folder-top .fsearch {
+  width: 50%;
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 10px;
+}
+
+.folder-top .fsearch div {
+  width: 100%;
+}
+
+.folder-top .fsearch input {
+  width: 100%;
+  border: none;
+  border-radius: 2em;
+  padding-left: 1em;
+  background-color: #0101016c;
+  color: rgba(255, 255, 255, 0.521);
+  font-size: 1em;
+  line-height: 3em;
+  outline: none;
+}
+.folder-top .fsearch input::-webkit-search-cancel-button {
+  position: relative;
+  right: 20px;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  border: solid;
+}
+
+.folder-top .fsearch input:focus {
+  color: rgb(75, 74, 74);
+  outline: 0.1em solid var(--green);
+}
+</style>

src/components/FolderView/SongList.vue

@@ -1,115 +1,126 @@
 <template>
-  <div class="rounded folder">
+  <div class="folder">
-    <div class="folder-top flex">
+    <div class="table" ref="songtitle">
-      <div class="fname">
+      <table>
-        <span>Oldies Volume 1</span>
+        <tr>
-      </div>
+          <th>Track</th>
-      <div class="fsearch">
+          <th>Artist</th>
-        <div>
+          <th>Album</th>
-          <input type="text" placeholder="Search here" />
+          <th v-if="songTitleWidth > minWidth">Duration</th>
-        </div>
+        </tr>
-      </div>
+        <tr v-for="song in songs" :key="song">
-    </div>
+          <td class="flex">
-    <div class="table">
-      <div>
-        <div class="theaders">
-          <div>Track</div>
-          <div>Artist</div>
-          <div>Album</div>
-          <div>Duration</div>
-        </div>
-        <hr />
-        <div class="theaders">
-          <div class="flex">
             <div class="album-art rounded"></div>
-            <span>Some broken hearts never mend</span>
+            <div class="title-artist">
-          </div>
+              <span :style="{ width: songTitleWidth + 'px' }">{{
-          <div class="flex">Don Williams</div>
+                song.title
-          <div class="flex">Best Of</div>
+              }}</span>
-          <div class="flex">3:17</div>
+            </div>
-        </div>
+          </td>
-      </div>
+          <td :style="{ width: songTitleWidth + 'px' }"><span class="artist" v-for="artist in song.artists" :key="artist">{{ artist}}</span></td>
+          <td :style="{ width: songTitleWidth + 'px' }">{{ song.album }}</td>
+          <td
+            :style="{ width: songTitleWidth + 'px' }"
+            v-if="songTitleWidth > minWidth"
+          >
+            {{ song.duration }}
+          </td>
+        </tr>
+      </table>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+import { ref } from "@vue/reactivity";
+import { onMounted, onUnmounted } from "@vue/runtime-core";
+import Songs from '../../data/songs.js'
+
+export default {
+  setup() {
+    const songtitle = ref(null);
+    const songTitleWidth = ref(null);
+
+    const minWidth = ref(250);
+
+    const songs = Songs.songs
+
+    const resizeSongTitleWidth = () => {
+      songTitleWidth.value = songtitle.value.clientWidth / 3;
+      console.log(songtitle.value.clientWidth / 3);
+    };
+
+    onMounted(() => {
+      window.addEventListener("resize", () => {
+        resizeSongTitleWidth();
+      });
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener("resize", () => {
+        resizeSongTitleWidth();
+      });
+    });
+
+    return { songtitle, songTitleWidth, songs, minWidth };
+  },
+};
 </script>
 
 <style>
-.theaders {
+.table {
-  display: grid;
+  width: 100%;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-auto-columns: 1fr;
-  gap: 0px 0px;
-  grid-auto-flow: row;
 }
 
-.theaders .flex {
+.folder .table table {
+  border-collapse: collapse;
+  width: 100%;
+  text-transform: capitalize;
+}
+
+.folder .table table td .album-art {
+  width: 3em;
+  height: 3em;
+  margin-right: 1em;
+  background-color: #ccc;
+  background-image: url(../../assets/images/Jim_Reeves.png);
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.folder .table .flex {
   align-items: center;
-  /* border: solid; */
+  justify-content: flex-start;
 }
 
-.theaders .flex span {
+.folder .table .flex span {
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  
+  text-overflow: ellipsis;
 }
-.theaders .album-art {
+
-  width: 50px;
+td,
-  height: 50px;
+th {
-  margin-right: 10px;
+  text-align: left;
-  background: rgb(172, 13, 13);
+  padding: 8px;
+}
+th {
+  text-transform: uppercase;
+  font-weight: normal;
+}
+tr {
+  border-bottom: 1px solid var(--seperator);
 }
 
 .folder {
-  background-color: rgba(0, 0, 0, 0.144);
+  padding-bottom: 1em;
-  padding: 20px 20px 20px 20px;
+  margin-bottom: 1em;
 }
 
-.folder-top {
+td .artist {
-  padding-bottom: 20px;
+  color: #b1b1b1fd;
-  margin-bottom: 20px;
+  font-weight: lighter;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.445);
+  margin-right: 0.5em;
-}
-
-.folder-top .fname {
-  width: 50%;
-  color: rgba(255, 255, 255, 0.438);
-  text-transform: uppercase;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-}
-
-.folder-top .fsearch {
-  width: 50%;
-  display: flex;
-  justify-content: flex-end;
-  margin-right: 10px;
-}
-
-.folder-top .fsearch div {
-  width: 100%;
-  padding-right: 20px;
-}
-
-.folder-top .fsearch input {
-  width: 100%;
-  height: 50px;
-  border: none;
-  border-radius: 10px;
-  outline: none;
-  padding-left: 10px;
-  background-color: #0101016c;
-  color: rgba(255, 255, 255, 0.521);
-  font-size: large;
-  line-height: 50px;
-}
-
-.folder-top .fsearch input:focus {
-  color: #fff;
 }
 </style>

src/components/LeftSidebar/PinnedStuff.vue

@@ -126,7 +126,7 @@ export default {
 }
 
 #pinned-container .seperator {
-  color: var(--grey);
+  color: var(--seperator);
 }
 
 #pinned-container {

src/data/folders.js

@@ -0,0 +1,24 @@
+const folders = [
+  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
+  {
+    name: "HiFi Gold by Elton John",
+  },
+];
+
+export default {
+  folders,
+};

src/data/songs.js

@@ -0,0 +1,24 @@
+const songs = [
+  {
+    title: "Loved by the best",
+    album: "Love songs",
+    artists: ["Don Williams,", "Kenny Rogers"],
+    duration: "03:14",
+  },
+  {
+    title: "Loved by the best",
+    album: "Love songs",
+    artists: ["Don Williams"],
+    duration: "03:14",
+  },
+  {
+    title: "Loved by the best",
+    album: "Love songs",
+    artists: ["Don Williams"],
+    duration: "03:14",
+  },
+];
+
+export default {
+  songs
+}

src/views/FolderView.vue

@@ -1,19 +1,23 @@
 <template>
-  <div>
+  <div id="f-view-parent" class="rounded">
-    <SongList/>
+    <SearchBox />
-    <!-- <hr> -->
+    <div id="scrollable">
-    <FolderList/>
+      <SongList />
+      <FolderList />
+    </div>
   </div>
 </template>
 
 <script>
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
+import SearchBox from "@/components/FolderView/SearchBox.vue";
 
 export default {
   components: {
     SongList,
-    FolderList
+    FolderList,
+    SearchBox,
   },
   setup() {
     return {
@@ -24,5 +28,18 @@ export default {
 </script>
 
 <style>
+#f-view-parent {
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.24);
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 1em;
+  overflow: hidden;
+  /* border: solid; */
+}
+
+#scrollable {
+  overflow: scroll;
   
+}
 </style>