From 71e6a061140d0135bd6747a2a402fb68293bde59 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 10 Dec 2021 16:50:46 +0300
Subject: [PATCH] make playlist body scrollable

---
 src/data/songs.js          | 214 ++++++++++++++++++++++++++++++++-----
 src/views/PlaylistView.vue |  19 +++-
 2 files changed, 206 insertions(+), 27 deletions(-)

diff --git a/src/data/songs.js b/src/data/songs.js
index 040f9006..0a02901f 100644
--- a/src/data/songs.js
+++ b/src/data/songs.js
@@ -1,29 +1,191 @@
-const songs = [{
-        title: "Because I got high",
-        album: "The best of",
-        artists: ["Weedman, ", "Bobby Brown"],
-        duration: "03:14",
-    },
-    {
-        title: "Is this love",
-        album: "Natural Mystic",
-        artists: ["Bob Marley"],
-        duration: "03:14",
-    },
-    {
-        title: "I'm a little teapot",
-        album: "Love songs",
-        artists: ["Ricky Martin"],
-        duration: "03:14",
-    },
-    {
-        title: "Don't stop me now",
-        album: "Remastered 2011",
-        artists: ["Queen"],
-        duration: "03:14",
-    }
+const songs = [
+  {
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },{
+    title: "Because I got high",
+    album: "The best of",
+    artists: ["Weedman, ", "Bobby Brown"],
+    duration: "03:14",
+  },
+  {
+    title: "Is this love",
+    album: "Natural Mystic",
+    artists: ["Bob Marley"],
+    duration: "03:14",
+  },
+  {
+    title: "I'm a little teapot",
+    album: "Love songs",
+    artists: ["Ricky Martin"],
+    duration: "03:14",
+  },
+  {
+    title: "Don't stop me now",
+    album: "Remastered 2011",
+    artists: ["Queen"],
+    duration: "03:14",
+  },
 ];
 
 export default {
-    songs
-}
\ No newline at end of file
+  songs,
+};
diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue
index 2e78029f..31347b44 100644
--- a/src/views/PlaylistView.vue
+++ b/src/views/PlaylistView.vue
@@ -1,7 +1,11 @@
 <template>
   <Header />
   <div class="p-bg rounded">
-    <SongList />
+    <div class="clip">
+      <div class="scrollable">
+        <SongList />
+      </div>
+    </div>
     <div class="f-artists-p">
       <FeaturedArtists />
     </div>
@@ -33,6 +37,19 @@ export default {
   padding: $small;
 }
 
+.p-bg .clip {
+  height: calc(100% - 14em);
+  padding-bottom: $small;
+  border-bottom: solid 1px $seperator;
+}
+
+.p-bg .scrollable {
+  height: 100%;
+  border-radius: $small;
+  overflow-y: auto;
+  padding-right: $small;
+}
+
 .p-bg .f-artists {
   position: absolute;
   bottom: 0;