From 3e3c73d1685d579b66047f72f5bd82fbfe2da30b Mon Sep 17 00:00:00 2001
From: "Nicolas A. Tonne" <nixatto@gmail.com>
Date: Sat, 9 May 2015 02:20:45 +0200
Subject: [PATCH] No injections, better style

---
 index.php            |  6 +++---
 static/css/style.css | 18 ++++++++++++++++--
 static/js/chat.js    |  4 +++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/index.php b/index.php
index 71ef0fb3..0184d2b0 100755
--- a/index.php
+++ b/index.php
@@ -137,8 +137,8 @@
         <div class="row">
             <div class="col s12 m9 video-container hide-on-small-only">
 
-                <ul class="side-nav left-aligned chat-bar" id="chat-bar" style="position: absolute;display: inline;will-change: left;margin: 0;padding: 0;float: left;">
-                    <li id="chat-log" style="padding:0 0 0 11px">
+                <ul class="side-nav left-aligned chat-bar" id="chat-bar">
+                    <li id="chat-log">
                         <ul class="collapsible collapsible-accordion">
                             <li class="active">
 
@@ -151,7 +151,7 @@
                     </li>
                     <li id="chat-input">
                       <form onsubmit="chat(this.input);return false;">
-                        <input id="text-chat-input" name="input" type="text" autocomplete="off">
+                        <input id="text-chat-input" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150">
                       </form>
                     </li>
                 </ul>
diff --git a/static/css/style.css b/static/css/style.css
index b760bff2..77d3a84c 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -193,16 +193,29 @@ hide mdi-action-visibility mdi-action-visibility-off
 /*------------------- Channel page ---------------------------------------------------------------------------- */
 
 #chat {
-  height: 81%;
+  height: calc(100% - 121px);
   overflow-y: scroll;
   text-align:left;
   word-wrap:break-word;
 }
 
-#chat-log {
+#chat-bar{
+    position: absolute;
+    display: inline;
+    will-change: left;
+    margin: 0;
+    padding: 0;
+    float: left;
+}
+
+ul #chat-log{
   padding: 0px 0px 0px 11px !important;
 }
 
+#chat-input{
+    background-color: rgba(0,0,0,0.1);
+}
+
 #search_loader {
   height:64px;
   padding: 0 15px;
@@ -229,6 +242,7 @@ hide mdi-action-visibility mdi-action-visibility-off
     margin-left: 25%;
 
 }
+
 #channelpage{
     background-color:#2D2D2D;
 }
diff --git a/static/js/chat.js b/static/js/chat.js
index 850c54e5..e37c4eb5 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -16,7 +16,9 @@ document.getElementById("chat-btn").addEventListener("click", function(){
 socket.on("chat,"+chan.toLowerCase(), function(data)
 {
   var color = intToARGB(hashCode(data.substring(0,8))).substring(0,6);
-	$("#chat").append("<li><span style='color:"+color+";'>"+data.substring(0,8)+"</span>"+data.substring(8)+"</li>");
+	$("#chat").append("<li><span style='color:"+color+";'>"+data.substring(0,8)+"</span></li>");
+  var in_text = document.createTextNode(data.substring(8));
+  $("#chat li:last")[0].appendChild(in_text);
   document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight
 });