add album explorer

src/assets/css/global.scss

@@ -36,9 +36,9 @@ a {
 }
 
 .seperator {
-  border: 1px solid;
+  border-top: .1em $seperator solid;
   color: transparent;
-  margin: 0rem;
+  margin: $small 0 $small 0;
 }
 
 .hidden {
@@ -90,6 +90,14 @@ a {
   transition-property: width;
 }
 
+.ellip {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .rounded {
   border-radius: 10px;
 }
@@ -132,7 +140,6 @@ a {
   transition: transform 0.3s ease-in-out;
 }
 
-
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;

src/components/AlbumsExplorer/TopAlbums.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="top-albums">
+    <h3 class="heading">TOP ALBUMS</h3>
+    <div class="items">
+      <div class="item rounded" v-for="album in albums" :key="album">
+        <div class="image rounded"></div>
+        <div class="info">
+          <div class="name ellip">{{ album.title }}</div>
+          <div class="artist ellip">{{ album.artist }}</div>
+          <div class="seperator"></div>
+          <div class="top">
+            <div class="play-icon"></div>
+            <div class="text ellip">{{ album.top_track }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+    const albums = [
+      {
+        title: "Thriller",
+        artist: "Michael Jackson, Sting, Shaggy, Juice WRLD",
+        top_track: "Beat It and althought you whatever",
+      },
+      {
+        title: "Figting Demons",
+        artist: "Juice WRLD",
+        top_track: "Girl Of My Dreams",
+      },
+      {
+        title: "Crybaby",
+        artist: "Lil Peep",
+        top_track: "Lil kennedy",
+      },
+    ];
+
+    return {
+      albums,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.top-albums {
+  height: 13rem;
+  border-radius: $small;
+  // background: linear-gradient(to bottom right, #5a1c11 60%, #110000);
+  background-color: rgb(12, 1, 1);
+  padding: $small;
+
+  .heading {
+    margin: 0 0 $small;
+  }
+
+  .items {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: $small;
+
+    .item {
+      height: 10rem;
+      width: 100%;
+      background-color: rgb(122, 72, 5);
+      display: grid;
+      align-items: center;
+      grid-template-columns: 7.5rem 1fr;
+      padding: $small;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        background-color: rgba(214, 80, 39, 0.76);
+        transition: all 0.2s ease-in-out;
+      }
+
+      .image {
+        height: 7rem;
+        width: 7rem;
+        background-image: url(../../assets/images/tk.jpg);
+        border-radius: $small;
+      }
+
+      .info .name {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+
+      .info .artist {
+        font-size: small;
+      }
+
+      .info .top {
+        height: 2.5rem;
+        background-color: rgb(53, 12, 12);
+        border-radius: $small;
+        margin-left: auto;
+        display: grid;
+        grid-template-columns: 2.5rem 1fr;
+        align-items: center;
+        transition: all 0.2s ease-in-out;
+        user-select: none;
+
+       
+
+        .play-icon {
+          margin: 0 0 0 $small;
+          height: 1.5rem;
+          width: 1.5rem;
+          background-image: url(../../assets/icons/play.svg);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          transition: all 0.2s ease-in-out;
+        }
+
+        .text {
+          color: white;
+        }
+
+        &:hover {
+          background-color: rgb(112, 29, 29);
+          transition: all 0.2s ease-in-out;
+
+          .play-icon {
+            transform: scale(1.2);
+            transition: all 0.2s ease-in-out;
+          }
+        }
+
+         &:active {
+          transform: scale(0.95);
+          transition: all .1s ease-in-out;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/FolderView/SearchBox.vue

@@ -27,7 +27,7 @@ export default {};
   color: rgba(255, 255, 255, 0.438);
   text-transform: uppercase;
   display: flex;
-  align-itrems: center;
+  align-items: center;
 }
 
 .folder-top .fsearch {

src/components/LeftSidebar/Navigation.vue

@@ -9,7 +9,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'Home' }">
+    <router-link :to="{ name: 'AlbumsExplorer' }">
       <div class="nav-button" id="album-button">
         <div class="in">
           <div class="nav-icon image" id="album-icon"></div>

src/components/PlaylistView/FeaturedArtists.vue

@@ -153,10 +153,10 @@ export default {
   align-items: flex-end;
   flex-wrap: nowrap;
   overflow-x: scroll;
-}
 
-.f-artists .artists::-webkit-scrollbar {
+  &::-webkit-scrollbar {
-  display: none;
+    display: none;
+  }
 }
 
 .f-artists .artist {
@@ -174,23 +174,29 @@ export default {
   justify-content: center;
   transition: all 0.5s ease-in-out;
   cursor: pointer;
-}
 
-.f-artists .artist:hover {
+  .artist-image {
-  transform: translateY(-1em);
+    width: 7em;
-  transition: all 0.5s ease-in-out;
+    height: 7em;
-}
+    margin-left: 0.5em;
+    border-radius: 50%;
+    margin-bottom: $small;
+    background: url(../../assets/images/girl1.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 
-.f-artists .artist-image {
+  .artist-name {
-  width: 7em;
+    margin: 0;
-  height: 7em;
+    text-align: center;
-  margin-left: 0.5em;
+    font-size: small;
-  border-radius: 50%;
+    width: 10em;
-  margin-bottom: $small;
+  }
-  background: url(../../assets/images/girl1.jpg);
+  &:hover {
-  background-size: cover;
+    transform: translateY(-1em);
-  background-repeat: no-repeat;
+    transition: all 0.5s ease-in-out;
-  background-position: center;
+  }
 }
 
 .f-artists .c1 {
@@ -200,51 +206,44 @@ export default {
   background-image: url(../../assets/images/gradient1.gif);
   overflow: hidden;
   margin-left: -0.1rem;
-}
 
-.c1:hover > .s2 {
+  &:hover > .s2 {
-  background: rgba(53, 53, 146, 0.8);
+    background: rgba(53, 53, 146, 0.8);
-  transition: all 0.5s ease;
+    transition: all 0.5s ease;
-  width: 12em;
+    width: 12em;
-  height: 12em;
+    height: 12em;
-}
+  }
 
-.f-artists .c1 p {
+  p {
-  position: absolute;
+    position: absolute;
-  bottom: -2rem;
+    bottom: -2rem;
-  margin-left: 0.5rem;
+    margin-left: 0.5rem;
-  z-index: 1;
+    z-index: 1;
-  font-size: 2rem;
+    font-size: 2rem;
-  font-weight: 700;
+    font-weight: 700;
-  color: #ffffff;
+    color: #ffffff;
-}
+  }
 
-.f-artists .artist-name {
+   .blur {
-  margin: 0;
+    position: absolute;
-  text-align: center;
+    width: 100%;
-  font-size: small;
+    height: 100%;
-  width: 10em;
+    background: rgba(0, 0, 0, 0);
-}
+    backdrop-filter: blur(100px);
+    -webkit-backdrop-filter: blur(100px);
+    -moz-backdrop-filter: blur(100px);
+    border-radius: $small;
+  }
 
-.f-artists .blur {
+   .s2 {
-  position: absolute;
+    position: absolute;
-  width: 100%;
+    left: -2em;
-  height: 100%;
+    bottom: -4em;
-  background: rgba(0, 0, 0, 0);
+    width: 10em;
-  backdrop-filter: blur(100px);
+    height: 10em;
-  -webkit-backdrop-filter: blur(100px);
+    background: rgba(53, 53, 146, 0.445);
-  -moz-backdrop-filter: blur(100px);
+    border-radius: 50%;
-  border-radius: $small;
+    transition: all 0.5s ease;
-}
+  }
-
-.f-artists .s2 {
-  position: absolute;
-  left: -2em;
-  bottom: -4em;
-  width: 10em;
-  height: 10em;
-  background: rgba(53, 53, 146, 0.445);
-  border-radius: 50%;
-  transition: all 0.5s ease;
 }
 </style>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home.vue";
 import FolderView from "../views/FolderView.vue";
 import PlaylistView from "../views/PlaylistView.vue";
+import AlbumsExplorer from "../views/AlbumsExplorer.vue";
 
 const routes = [
   {
@@ -18,6 +19,11 @@ const routes = [
     path: "/playlist",
     name: "PlaylistView",
     component: PlaylistView,
+  },
+  {
+    path: "/albums",
+    name: "AlbumsExplorer",
+    component: AlbumsExplorer,
   }
 ];
 

src/views/AlbumsExplorer.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="a-container">
+    <TopAlbums />
+  </div>
+</template>
+
+<script>
+import TopAlbums from "../components/AlbumsExplorer/TopAlbums.vue";
+
+export default {
+  components: {
+    TopAlbums,
+  },
+};
+</script>
+
+<style lang="scss">
+.a-container {
+  height: 100%;
+  border-radius: $small;
+  background-color: $card-dark;
+  padding: $small;
+}
+</style>

src/views/FolderView.vue

@@ -29,13 +29,13 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 #f-view-parent {
   position: relative;
   height: 100%;
   background-color: #131313b2;
-  padding-left: 1rem;
+  padding-left: $small;
-  padding-right: 1rem;
+  padding-right: $small;
   padding-top: 5rem;
 }