From c7374e8eb576fbb609f101898b8b7ab257d60943 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 11 Dec 2021 13:46:05 +0300
Subject: [PATCH] add all albums view

---
 src/assets/css/global.scss                  |   3 +-
 src/components/AlbumsExplorer/AlbumList.vue | 163 +++++++++++++++++++-
 src/components/AlbumsExplorer/TopAlbums.vue |  39 ++++-
 src/components/FolderView/SearchBox.vue     |   2 +-
 src/components/FolderView/SongList.vue      |  12 +-
 src/components/PlaylistView/SongList.vue    |  94 +++++++++++
 src/views/AlbumsExplorer.vue                |   2 -
 src/views/PlaylistView.vue                  |   4 +-
 8 files changed, 293 insertions(+), 26 deletions(-)
 create mode 100644 src/components/PlaylistView/SongList.vue

diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 41a66c98..29cd41b6 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -2,6 +2,7 @@
   --separator: #ffffff46;
   --green: #4ad168;
 }
+
 * {
   box-sizing: border-box;
 }
@@ -36,7 +37,7 @@ a {
 }
 
 .separator {
-  border-top: .1em $separator solid;
+  border-top: .1px $separator solid;
   color: transparent;
   margin: $small 0 $small 0;
 }
diff --git a/src/components/AlbumsExplorer/AlbumList.vue b/src/components/AlbumsExplorer/AlbumList.vue
index df247cc7..6c871c90 100644
--- a/src/components/AlbumsExplorer/AlbumList.vue
+++ b/src/components/AlbumsExplorer/AlbumList.vue
@@ -1,19 +1,89 @@
 <template>
   <div class="albums-view rounded">
-    <div class="al-header rounded">
+    <div class="al-header">
       <div class="heading">ALL ALBUMS</div>
-      <div class="search" >
-        <input type="search" placeholder="Search albums">
+      <div class="search">
+        <input type="search" placeholder="Search albums" />
+      </div>
+    </div>
+    <div class="all-albums">
+      <div class="item rounded" v-for="album in albums" :key="album">
+        <div class="play"></div>
+        <div class="album-art image rounded"></div>
+        <div class="name ellip">{{album.title}}</div>
+        <div class="artist ellip">{{album.artist}}</div>
       </div>
     </div>
-    <div class="all-albums"></div>
   </div>
 </template>
 <script>
 export default {
   setup() {
     const albums = [
+      
       {
+        title: "Album 2 af sjf s d kjf saf ",
+        artist: "Artist  ad asd f adf d da df d adf ds d fadsf fs dfds sf dadf d",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },{
+        title: "Album 1",
+        artist: "Artist 1",
+      },
+      {
+        title: "Album 2",
+        artist: "Artist 2",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },{
+        title: "Album 1",
+        artist: "Artist 1",
+      },
+      {
+        title: "Album 2",
+        artist: "Artist 2",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },{
+        title: "Album 1",
+        artist: "Artist 1",
+      },
+      {
+        title: "Album 2",
+        artist: "Artist 2",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },{
+        title: "Album 1",
+        artist: "Artist 1",
+      },
+      {
+        title: "Album 2",
+        artist: "Artist 2",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },{
+        title: "Album 1",
+        artist: "Artist 1",
+      },
+      {
+        title: "Album 2",
+        artist: "Artist 2",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },{
         title: "Album 1",
         artist: "Artist 1",
       },
@@ -36,24 +106,101 @@ export default {
 
 <style lang="scss">
 .albums-view {
-  height: calc(100% - 13rem);
+  height: calc(100% - 14.5rem);
   padding: $small;
   margin-top: $small;
   overflow: hidden;
   background-color: $card-dark;
 
+  .all-albums {
+    height: calc(100% - 4rem);
+    border-top: 1px solid $separator;
+    padding: $small 0 0 0;
+    overflow-y: auto;
+
+    .item {
+      position: relative;
+      width: 10.9rem;
+      height: 13rem;
+      padding: $small 0.95rem $small 0.95rem;
+      margin: $smaller;
+      transition: all 0.2s ease-in-out;
+      cursor: pointer;
+      float: left;
+
+      .play {
+        position: absolute;
+        bottom: 3rem;
+        left: $small;
+        height: 3rem;
+        width: 3rem;
+        background: url(../../assets/icons/play.svg) no-repeat center;
+        background-size: 60%;
+        cursor: pointer;
+        opacity: 0;
+        transition: all 0.5s ease-in-out;
+      }
+
+      &:hover {
+        background-color: rgb(87, 74, 74);
+
+        .play {
+          transition: 0.5s all ease;
+          opacity: 1;
+        }
+      }
+
+      .album-art {
+        height: 9em;
+        width: 9em;
+        background-image: url(../../assets/images/girl1.jpg);
+      }
+
+      .name {
+        text-align: left;
+        font-weight: bold;
+        margin-top: $small;
+      }
+
+      .artist {
+        font-size: small;
+        font-weight: lighter;
+        text-align: left;
+      }
+    }
+  }
+
   .al-header {
     display: flex;
     align-items: center;
     position: relative;
-    background-color: rgb(48, 43, 43);
-    // border: solid;
     height: 4em;
-    // padding: $small;
+    padding: 0 $small 0 $small;
 
     .search {
       position: absolute;
       right: 0;
+      padding-right: $small;
+
+      input {
+        width: 30rem;
+        border: none;
+        border-radius: 2rem;
+        padding-left: 1rem;
+        background-color: #4645456c;
+        color: rgba(255, 255, 255, 0.521);
+        font-size: 1rem;
+        line-height: 3rem;
+        outline: none;
+      }
+
+      input::-webkit-search-cancel-button {
+        position: relative;
+        right: 20px;
+        cursor: pointer;
+        width: 50px;
+        height: 50px;
+      }
     }
   }
 }
diff --git a/src/components/AlbumsExplorer/TopAlbums.vue b/src/components/AlbumsExplorer/TopAlbums.vue
index 3b6905cc..a953c56a 100644
--- a/src/components/AlbumsExplorer/TopAlbums.vue
+++ b/src/components/AlbumsExplorer/TopAlbums.vue
@@ -48,13 +48,13 @@ export default {
 
 <style lang="scss">
 .top-albums {
-  height: 12.5rem;
+  height: 14rem;
   border-radius: $small;
-  background-color: rgb(44, 42, 42);
+  background-color: $card-dark;
   padding: $small;
 
   .heading {
-    margin: 0 0 $small;
+    margin: $small 0 1.5em $small;
   }
 
   .items {
@@ -73,10 +73,14 @@ export default {
       cursor: pointer;
       transition: all 0.2s ease-in-out;
 
+      &:hover {
+        transform: translateY(-.5em);
+      }
+
       .image {
         height: 7rem;
         width: 7rem;
-        background-image: url(../../assets/images/tk.jpg);
+        background-image: url(../../assets/images/girl1.jpg);
         border-radius: $small;
       }
 
@@ -91,7 +95,7 @@ export default {
 
       .info .top {
         height: 2.5rem;
-        background-color: rgb(20, 46, 129);
+        background-color: rgb(51, 129, 20);
         border-radius: $small;
         margin-left: auto;
         display: grid;
@@ -102,8 +106,8 @@ export default {
 
         .play-icon {
           margin: 0 0 0 $small;
-          height: 1.5rem;
-          width: 1.5rem;
+          height: 1.2rem;
+          width: 1.2rem;
           background-image: url(../../assets/icons/play.svg);
           background-size: contain;
           background-repeat: no-repeat;
@@ -116,7 +120,7 @@ export default {
         }
 
         &:hover {
-          background-color: rgb(31, 68, 150);
+          background-color: rgb(0, 134, 89);
           transition: all 0.2s ease-in-out;
 
           .play-icon {
@@ -130,6 +134,25 @@ export default {
           transition: all 0.1s ease-in-out;
         }
       }
+      &:first-child {
+        background-color: rgb(177, 116, 2);
+
+        .image {
+          background-image: url(../../assets/images/girl2.jpg);
+        }
+      }
+
+      &:nth-child(2){
+        background-color: rgb(0, 74, 117);
+
+        .image {
+          background-image: url(../../assets/images/girl3.jpg);
+        }
+      }
+
+      &:nth-child(3){
+        background-color: rgb(161, 106, 106);
+      }
     }
   }
 }
diff --git a/src/components/FolderView/SearchBox.vue b/src/components/FolderView/SearchBox.vue
index ed4d04db..3554cf34 100644
--- a/src/components/FolderView/SearchBox.vue
+++ b/src/components/FolderView/SearchBox.vue
@@ -63,6 +63,6 @@ export default {};
 
 .folder-top .fsearch input:focus {
   color: rgb(255, 255, 255);
-  outline: 0.1rem solid #fafafa52;
+  outline: 1px solid #fafafa52;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index ca027620..c9d34a90 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -72,17 +72,23 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 .table {
   width: 100%;
+  height: calc(100%);
   background: transparent;
-  overflow: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .folder .table table {
   border-collapse: collapse;
   width: 100%;
   text-transform: capitalize;
+  position: relative;
 }
 
 .folder .table table td .album-art {
@@ -111,7 +117,7 @@ th {
 }
 
 th {
-  height: 2em;
+  height: 3rem;
 }
 tr:nth-child(even) {
   background-color: rgba(29, 29, 29, 0.767);
diff --git a/src/components/PlaylistView/SongList.vue b/src/components/PlaylistView/SongList.vue
new file mode 100644
index 00000000..ebf97eab
--- /dev/null
+++ b/src/components/PlaylistView/SongList.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="folder" id="p-table">
+    <div class="table rounded"  ref="songtitle">
+      <table>
+        <tr>
+          <th>Track</th>
+          <th>Artist</th>
+          <th>Album</th>
+          <th v-if="songTitleWidth > minWidth">Duration</th>
+        </tr>
+        <tr v-for="song in songs" :key="song">
+          <td :style="{ width: songTitleWidth + 'px' }" class="flex">
+            <div class="album-art rounded image"></div>
+            <div>
+              <span class="ellipsis">{{ song.title }}</span>
+            </div>
+          </td>
+          <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>
+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(300);
+
+    const songs = Songs.songs;
+
+    const resizeSongTitleWidth = () => {
+      let a = songtitle.value.clientWidth;
+
+      songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
+    };
+
+    onMounted(() => {
+      resizeSongTitleWidth();
+      
+      window.addEventListener("resize", () => {
+        resizeSongTitleWidth();
+      });
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener("resize", () => {
+        resizeSongTitleWidth();
+      });
+    });
+
+    return { songtitle, songTitleWidth, songs, minWidth };
+  },
+};
+</script>
+
+<style lang="scss">
+#p-table {
+  height: calc(100% - 0rem) !important;
+  overflow: hidden;
+  padding-bottom: 0rem;
+
+  table {    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    th {
+      position: sticky;
+      background-color: rgb(58, 57, 57);
+      top: 0;
+      z-index: 5;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/AlbumsExplorer.vue b/src/views/AlbumsExplorer.vue
index ab16e29e..e9f16185 100644
--- a/src/views/AlbumsExplorer.vue
+++ b/src/views/AlbumsExplorer.vue
@@ -21,7 +21,5 @@ export default {
 .a-container {
   height: 100%;
   border-radius: $small;
-  // background-color: $card-dark;
-  // padding: $small;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue
index 30dbe343..931cc744 100644
--- a/src/views/PlaylistView.vue
+++ b/src/views/PlaylistView.vue
@@ -14,7 +14,7 @@
 
 <script>
 import Header from "@/components/PlaylistView/Header.vue";
-import SongList from "@/components/FolderView/SongList.vue";
+import SongList from "@/components/PlaylistView/SongList.vue";
 import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
 
 export default {
@@ -46,8 +46,6 @@ export default {
 .p-bg .scrollable {
   height: 100%;
   border-radius: $small;
-  overflow-y: auto;
-  padding-right: $small;
 }
 
 .p-bg .f-artists {