Fixed small issue with adding songs, fixed search playlist overlapping the playlist.

app/client/app.css

@@ -909,9 +909,21 @@ ul#playlist{
     color: white;
     font-size: 21px;
     max-height: 100%;
+    height: 100%;
+    /*overflow: auto;*/
+}
+
+#playlist-ul {
+    margin: 0;
+    color: white;
+    font-size: 21px;
+    max-height: calc(100% - 48px);
+    height: calc(100% - 48px);
     overflow: auto;
+    padding-left: 5px;
 }
 
+
 #s2 {
     opacity: 0.66666666666666;
 }
@@ -1234,14 +1246,13 @@ nav form input[type="image"]{
     margin-right: 30em;
 }
 #search-playlist{
-    position: absolute;
     outline: 0;
     border: none;
     border-bottom: 3px solid rgba(255, 255, 255, 0.4);
     background-color: #50a3a2;
     width: 100%;
     padding: 10px 15px;
-    margin: 0 auto 10px auto;
+    margin: 0 auto 0 auto;
     display: block;
     text-align: center;
     font-size: 18px;

app/client/client.js

@@ -318,14 +318,14 @@ Template.room.events({
         e.preventDefault();
         parts = location.href.split('/');
         var roomType = parts.pop();
-        var genre = id.toLowerCase();
+        var genre = roomType.toLowerCase();
         var type = $("#type").val();
         id = $("#id").val();
         var title = $("#title").val();
         var artist = $("#artist").val();
         var img = $("#img").val();
         var songData = {type: type, id: id, title: title, artist: artist, img: img};
-        if(Playlists.find({type: roomType, "songs.title": songData.title}, {songs: {$elemMatch: {title: songData.title}}}).count() !== 0) {
+        if(Playlists.find({type: genre, "songs.title": songData.title}, {songs: {$elemMatch: {title: songData.title}}}).count() !== 0) {
             $(".landing").prepend("<div class='alert alert-danger alert-dismissible' role='alert' style='margin-bottom: 0'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'><i class='fa fa-times'></i></span></button><strong>Song not added.</strong> This song is already is in the playlist.</div>");
         } else{
             Meteor.call("addSongToQueue", genre, songData, function(err, res) {

app/client/templates/playlist.html

@@ -1,6 +1,6 @@
 <template name="playlist">
     <input type="text" id="search-playlist" placeholder="Search playlist..."  onfocus="this.placeholder = ''" onblur="this.placeholder = 'Search playlist...'" />
-    <ul id="playlist">
+    <ul id="playlist-ul">
       {{#each playlist_songs}}
         <li class="pl-item">
             {{#if current}}<i class="fa fa-arrow-right"></i>{{/if}}