Improved chat and playlist slideout.

app/client/stylesheets/app.css

@@ -317,11 +317,13 @@ hr{
     text-align: center;
     background-color: #028A77 !important;
     margin: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
     color: white;
 }
 
 .chat-ul{
-    height: 70%;
+    height: calc(100% - 164px);
     overflow-y: scroll;
 }
 
@@ -343,6 +345,15 @@ hr{
     height: 36px;
     line-height: 36px;
     margin: 0 10px !important;
+    position: absolute;
+    bottom: 72px;
+    width: calc(100% - 20px);
+}
+
+#chat-input-div {
+    position: absolute;
+    bottom: 80px;
+    width: 100%;
 }
 
 .vote_count {
@@ -387,3 +398,17 @@ hr{
         line-height: 1.8em;
     }
 }
+
+.rank-admin {
+    color: red;
+    margin-right: 3px;
+}
+
+.rank-moderator {
+    color: green;
+    margin-right: 3px;
+}
+
+.side-nav li {
+    padding: 0 !important;
+}

app/client/templates/playlist.html

@@ -15,7 +15,7 @@
         {{/each}}
         <hr style="clear: both">
     </ul>
-    <ul id="playlist-ul" style="max-height: 60%; overflow-y: scroll; margin-top: 30px">
+    <ul id="playlist-ul" style="max-height: calc(100% - 240px); overflow-y: scroll;">
         {{#each playlist_songs}}
             <li class="pl-item" style="clear: both">
                 <p style="float:right; margin-top: -20px;">{{formatTime duration}}</p>

app/client/templates/room.html

@@ -68,15 +68,14 @@
                 {{#emojione}}
                     <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>
+                        <a style="text-decoration: none; font-size: 0.9em; height: 0.9em; font-weight: 500" href="/u/{{this.username}}" target="_blank"><span class="rank-{{this.rawrank}}">{{this.rank}}</span>{{this.username}}</a>
                         <p style="clear: both; line-height: 1.2em; margin-left: 13px; margin-bottom: 0; font-size: 1.2em">{{this.message}}</p>
                     </li>
                 {{/emojione}}
             {{/each}}
         </ul>
         <div>
-            <div class="row">
+            <div class="row" id="chat-input-div">
                 <div class="input-field col s12">
                   <input id="chat-message" type="text">
                   <label for="chat-message">Send a message</label>