From 43c1f70380ba642648b4c416f1b1536d05676318 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 10 Dec 2021 16:10:06 +0300
Subject: [PATCH] implement wheel scroll on featured artists.

add next-prev buttons too
---
 src/App.vue                                   |  48 +------
 src/assets/css/global.scss                    |   2 +-
 src/assets/icons/right-arrow.svg              |   3 +
 src/components/LeftSidebar/Navigation.vue     |  21 ++-
 src/components/LeftSidebar/PinnedStuff.vue    |   2 -
 .../PlaylistView/FeaturedArtists.vue          | 130 ++++++++++++++----
 src/components/PlaylistView/Header.vue        |   4 +-
 7 files changed, 129 insertions(+), 81 deletions(-)
 create mode 100644 src/assets/icons/right-arrow.svg

diff --git a/src/App.vue b/src/App.vue
index c5a01c05..993f3f43 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,12 +10,6 @@
       </div>
       <Navigation :collapsed="collapsed" />
       <PinnedStuff :collapsed="collapsed" />
-      <div id="settings-button">
-        <div class="in">
-          <div class="nav-icon image" id="settings-icon"></div>
-          <span id="text">Settings</span>
-        </div>
-      </div>
     </div>
     <div class="content">
       <router-view />
@@ -114,15 +108,6 @@ export default {
   animation-iteration-count: 1;
 }
 
-.nav-container .in {
-  display: flex;
-  align-items: center;
-}
-
-.collapsed .in {
-  flex-direction: column;
-}
-
 .l-sidebar {
   position: relative;
 }
@@ -139,40 +124,9 @@ export default {
   cursor: pointer;
 }
 
-.l-container #settings-button {
-  position: absolute;
-  bottom: 0;
-  display: flex;
-  height: 50px;
-  width: 100%;
-  cursor: pointer;
-  border-radius: 0 0 $small $small;
-  border-top: solid .1rem $seperator
-}
-
-#settings-button .in {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.l-container #settings-button #settings-icon {
-  margin-left: 1.5rem;
-  margin-right: 0.25rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  background-image: url(./assets/icons/settings.svg);
-}
-
-.collapsed #settings-button #settings-icon {
-  margin-right: 0;
-}
-
-.collapsed #settings-button #text {
-  display: none;
-}
 .m-np {
   position: absolute;
   bottom: 0;
 }
+
 </style>
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index cc6b1840..48d448f1 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -79,7 +79,7 @@ a {
 }
 
 .l-sidebar {
-  width: 250px;
+  width: 15em;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
   margin: 0.5rem 0 0.5rem 0.5rem;
diff --git a/src/assets/icons/right-arrow.svg b/src/assets/icons/right-arrow.svg
new file mode 100644
index 00000000..b23b235c
--- /dev/null
+++ b/src/assets/icons/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0201 6L8.61011 7.41L13.1901 12L8.61011 16.59L10.0201 18L16.0201 12L10.0201 6Z" fill="white"/>
+</svg>
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index af116c96..bd5fd9e6 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -53,6 +53,15 @@
         </div>
       </div>
     </router-link>
+    <hr />
+    <router-link :to="{ name: 'FolderView' }">
+      <div class="nav-button" id="folders-button">
+        <div class="in">
+          <div class="nav-icon image" id="settings-icon"></div>
+          <span id="text">Settings</span>
+        </div>
+      </div>
+    </router-link>
   </div>
 </template>
 
@@ -65,7 +74,7 @@ export default {
 
 
 
-<style>
+<style lang="scss">
 .side-nav-container .in {
   display: flex;
   align-items: center;
@@ -89,12 +98,13 @@ export default {
   background-color: transparent;
   height: 100%;
   padding: 10px;
+  transition: all 0.3s ease-in-out;
 }
 
-
-.collapsed .nav-button span {
-  font-size: small;
+.collapsed .nav-button {
+  font-size: smaller;
   margin-top: 5px;
+  transition: all .2s ease-in-out;
 }
 
 .side-nav-container .nav-button:hover {
@@ -135,6 +145,9 @@ export default {
 .side-nav-container #folders-button #folders-icon {
   background-image: url(../../assets/icons/folder.svg);
 }
+.side-nav-container #folders-button #settings-icon {
+  background-image: url(../../assets/icons/settings.svg);
+}
 
 .side-nav-container #folders-button #text {
   margin-top: 5px;
diff --git a/src/components/LeftSidebar/PinnedStuff.vue b/src/components/LeftSidebar/PinnedStuff.vue
index 0f7df0e7..94b6ee94 100644
--- a/src/components/LeftSidebar/PinnedStuff.vue
+++ b/src/components/LeftSidebar/PinnedStuff.vue
@@ -6,7 +6,6 @@
   >
     <div>
       <div class="nav-button" id="pinned-button">
-        <!-- <div class="nav-icon" id="pinned-icon"></div> -->
         <span id="text">Quick access</span>
       </div>
     </div>
@@ -62,7 +61,6 @@ export default {
 </script>
 
 <style>
-
 #pinned-container .nav-button {
   color: rgba(255, 255, 255, 0.671);
 }
diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue
index 8bdbb01f..7db88927 100644
--- a/src/components/PlaylistView/FeaturedArtists.vue
+++ b/src/components/PlaylistView/FeaturedArtists.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="f-artists">
+    <div class="xcontrols">
+      <div class="prev" @click="scrollLeftX"></div>
+      <div class="next" @click="scrollRightX"></div>
+    </div>
     <div class="artists" ref="artists_dom" v-on:mouseover="say">
       <div class="artist c1">
         <div class="blur"></div>
@@ -9,7 +13,7 @@
       <div class="artist" v-for="artist in artists" :key="artist">
         <div>
           <div class="artist-image image"></div>
-          <p class="artist-name">{{ artist }}</p>
+          <p class="artist-name ellipsis">{{ artist }}</p>
           <div class="a-circle"></div>
         </div>
       </div>
@@ -17,38 +21,62 @@
   </div>
 </template>
 <script>
-import { ref } from '@vue/reactivity';
+import { ref } from "@vue/reactivity";
 
 export default {
   setup() {
     const artists = [
-      "Eminem",
-      "Drake",
-      "Kendrick Lamar",
-      "Eminem",
-      "Drake",
-      "Kendrick Lamar",
-      "Eminem",
-      "Drake",
-      "Kendrick Lamar",
-      "Eminem",
-      "Drake",
-      "Kendrick Lamar",
-      "Eminem",
-      "Drake",
-      "Kendrick Lamar",
+      "Michael John Montgomery",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
     ];
 
-    const artists_dom = ref(null)
+    const artists_dom = ref(null);
+
+    const scrollLeftX = () => {
+      const dom = artists_dom.value;
+      dom.scrollBy({
+        left: -700,
+        behavior: "smooth",
+      });
+    };
+
+    const scrollRightX = () => {
+      const dom = artists_dom.value;
+      dom.scrollBy({
+        left: 700,
+        behavior: "smooth",
+      });
+    };
+
+    const scroll = (e) => {
+      artists_dom.value.scrollBy({
+        left: e.deltaY < 0 ? -700 : 700,
+        behavior: "smooth",
+      });
+    };
 
     const say = () => {
-      
-    }
+      artists_dom.value.addEventListener("wheel", (e) => {
+        e.preventDefault();
+        scroll(e);
+      });
+    };
 
     return {
       artists,
       artists_dom,
-      say
+      say,
+      scrollLeftX,
+      scrollRightX,
     };
   },
 };
@@ -57,7 +85,7 @@ export default {
 <style lang="scss">
 .f-artists {
   position: relative;
-  height: 12em;
+  height: 14em;
   width: calc(100% - 1em);
   background-color: #1f1e1d;
   padding: $small;
@@ -65,6 +93,52 @@ export default {
   user-select: none;
 }
 
+.f-artists .xcontrols {
+  z-index: 1;
+  width: 5rem;
+  height: 2rem;
+  position: absolute;
+  top: 0.75rem;
+  right: 0.5rem;
+  display: flex;
+  justify-content: space-between;
+
+  .next,
+  .prev {
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    transition: all 0.5s ease;
+  }
+
+  .next {
+    background: url(../../assets/icons/right-arrow.svg) no-repeat center;
+  }
+
+  .prev {
+    background: url(../../assets/icons/right-arrow.svg) no-repeat center;
+    transform: rotate(180deg);
+  }
+
+  .next:hover,
+  .prev:hover {
+    transform: scale(1.2);
+    transition: all 0.5s ease;
+  }
+
+  .prev:hover {
+    transform: rotate(180deg) scale(1.2);
+  }
+
+  .next:active {
+    transform: scale(0.5);
+  }
+
+  .prev:active {
+    transform: rotate(180deg) scale(0.5);
+  }
+}
+
 .f-artists .heading {
   color: #fff;
   margin: 0 0 1em 1em;
@@ -74,11 +148,11 @@ export default {
   position: absolute;
   bottom: 1em;
   width: calc(100% - 1em);
-  height: 11em;
+  height: 13em;
   display: flex;
   align-items: flex-end;
   flex-wrap: nowrap;
-  overflow-y: scroll;
+  overflow-x: scroll;
 }
 
 .f-artists .artists::-webkit-scrollbar {
@@ -107,9 +181,14 @@ export default {
   transition: all 0.5s ease-in-out;
 }
 
+.f-artists .artist:active {
+  transform: translateY(0.9);
+}
+
 .f-artists .artist-image {
   width: 7em;
   height: 7em;
+  margin-left: 0.5em;
   border-radius: 50%;
   margin-bottom: $small;
   background: url(../../assets/images/girl1.jpg);
@@ -127,7 +206,7 @@ export default {
   margin-left: -0.1rem;
 }
 
-.f-artists .c1:hover > .s2 {
+.c1:hover > .s2 {
   background: rgba(53, 53, 146, 0.8);
   transition: all 0.5s ease;
   width: 12em;
@@ -148,6 +227,7 @@ export default {
   margin: 0;
   text-align: center;
   font-size: small;
+  width: 10em;
 }
 
 .f-artists .blur {
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 2e5ed16f..d5e25283 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -152,7 +152,7 @@
   width: 5em;
   background-color: $blue;
   border-radius: $small;
-  transition: transform 0.5s;
+  transition: transform 1s;
 }
 
 .p-header .info .albums .first {
@@ -185,7 +185,7 @@
 }
 
 .p-header .info .albums .item:hover {
-  transition: transform 1s;
+  transition: transform .5s;
   transform: scale(1.5);
   cursor: pointer;
   z-index: 3;