make playlist body scrollable

src/data/songs.js

@@ -1,29 +1,191 @@
-const songs = [{
+const songs = [
-        title: "Because I got high",
+  {
-        album: "The best of",
+    title: "Because I got high",
-        artists: ["Weedman, ", "Bobby Brown"],
+    album: "The best of",
-        duration: "03:14",
+    artists: ["Weedman, ", "Bobby Brown"],
-    },
+    duration: "03:14",
-    {
+  },
-        title: "Is this love",
+  {
-        album: "Natural Mystic",
+    title: "Is this love",
-        artists: ["Bob Marley"],
+    album: "Natural Mystic",
-        duration: "03:14",
+    artists: ["Bob Marley"],
-    },
+    duration: "03:14",
-    {
+  },
-        title: "I'm a little teapot",
+  {
-        album: "Love songs",
+    title: "I'm a little teapot",
-        artists: ["Ricky Martin"],
+    album: "Love songs",
-        duration: "03:14",
+    artists: ["Ricky Martin"],
-    },
+    duration: "03:14",
-    {
+  },
-        title: "Don't stop me now",
+  {
-        album: "Remastered 2011",
+    title: "Don't stop me now",
-        artists: ["Queen"],
+    album: "Remastered 2011",
-        duration: "03:14",
+    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
+  songs,
-}
+};

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;