worked on and improved chat view

app/client/scripts/events.js

@@ -292,7 +292,9 @@ Template.playlist.events({
     "keyup #search-playlist": function(){
         if($("#search-playlist").val().length === 0){
             $(".pl-item").show();
+            $("#up-next").show();
         } else {
+            $("#up-next").hide();
             $(".pl-item").hide();
             var input = $("#search-playlist").val().toLowerCase();
             $(".pl-item .pl-title").each(function(i, el){

app/client/templates/playlist.html

@@ -3,7 +3,7 @@
         <input type="text" id="search-playlist" style="padding-left: 10px;"/>
         <label for="search-playlist">Search playlist by song/artist</label>
     </div>
-    <ul>
+    <ul id="up-next">
         {{#each currentSong}}
             <p style="margin: -20px 0 0 15px; font-weight: 300;">Up Next</p>
             <li class="pl-item" style="color: rgb(107, 197, 164) !important;">
@@ -13,8 +13,8 @@
                 <p id="pl-artist" style="margin-top: -20px; font-size: 0.7em">{{artist}}</p>
             </li>
         {{/each}}
+        <hr style="clear: both">
     </ul>
-    <hr style="clear: both">
     <ul id="playlist-ul" style="max-height: 60%; overflow-y: scroll; margin-top: 30px">
         {{#each playlist_songs}}
             <li class="pl-item" style="clear: both">

app/client/templates/room.html

@@ -69,14 +69,13 @@
         <ul class="chat-ul">
             {{#each globalChat}}
                 {{#emojione}}
-                    <li class="chat-message">
-                        <span title="{{time}}" style="float: right;">{{rtime time}}</span>
-                        <small class="rank-{{this.rawrank}}">{{this.rank}}</small>
-                        <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank">{{this.username}}</a>
-                        <p style="clear: both; line-height: initial;">{{this.message}}</p>
+                    <li class="chat-message" style="line-height: 30px">
+                        <span title="{{time}}" style="float: right; margin-top: 15px">{{rtime time}}</span>
+                        <small class="rank-{{this.rawrank}}" style="margin-top: 15px">{{this.rank}}</small>
+                        <a style="text-decoration: none; font-size: 0.9em; height: 0.9em; font-weight: 500" href="/u/{{this.username}}" target="_blank">{{this.username}}</a>
+                        <p style="clear: both; line-height: 1.2em; margin-left: 13px; margin-bottom: 30px; font-size: 1.2em; height: 0">{{this.message}}</p>
                     </li>
                 {{/emojione}}
-                <hr>
             {{/each}}
         </ul>
         <div>