Remove new message and change username buttons (user just presses enter instead) and update a bunch of css

share/static/css/style.css

@@ -169,6 +169,7 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
 
 .chat-container {
   display: flex;
+  font-family: monospace;
 }
 
 .chat-users {
@@ -177,6 +178,7 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
   border-radius: 2px;
   overflow: auto;
   background: #f2f2f2;
+  margin: 1rem 0 1rem 1rem;
 }
 
 .chat-users .editable-username {
@@ -185,6 +187,11 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
   flex-direction: column;
 }
 
+.chat-users .editable-username input {
+  font-family: monospace;
+  font-size: 1em;
+}
+
 .chat-users #user-list li {
   margin-bottom: 1em;
 }
@@ -193,8 +200,8 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
   display: flex;
   flex-direction: column;
   flex: 1;
-  margin: 0 1rem;
-  height: calc(100vh - (45px + 2em));
+  margin: 1rem 1rem 0 1rem;
+  height: calc(100vh - (65px + 2em));
 }
 
 .chat-wrapper #chat {
@@ -206,6 +213,12 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
   padding: 0 1rem;
 }
 
+.chat-wrapper .status {
+  font-style: italic;
+  font-size: 0.8em;
+  color: #666666;
+}
+
 .chat-wrapper .username {
   font-weight: bold;
   display: block;
@@ -217,11 +230,16 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
 }
 
 .chat-wrapper .chat-form {
-  display: flex;
+  display: block;
+  margin: 0.2rem 1rem 1rem 0;
+  padding: -0.5em;
 }
 
 .chat-wrapper input#new-message {
   height: 100%;
+  width: 100%;
+  font-family: monospace;
+  font-size: 1em;
 }
 
 @media (max-width: 992px) {

share/static/js/chat.js

@@ -41,27 +41,16 @@ $(function () {
         emitMessage(socket);
       }
     });
-    $('#send-button').on('click', function (e) {
-      emitMessage(socket);
-    });
 
     // Keep buttons disabled unless changed or not empty
     $('#username').on('keyup', function (event) {
       if ($('#username').val() !== '' && $('#username').val() !== current_username) {
-        $('#update-username').removeAttr('disabled');
         if (event.keyCode == 13) {
           current_username = updateUsername(socket);
         }
-      } else {
-        $('#update-username').attr('disabled', true);
       }
     });
 
-    // Update username
-    $('#update-username').on('click', function () {
-      current_username = updateUsername(socket);
-    });
-
     // Show warning of losing data
     $(window).on('beforeunload', function (e) {
       e.preventDefault();
@@ -103,7 +92,6 @@ var updateUsername = function (socket) {
   }).done(function (response) {
     console.log(response);
   });
-  $('#update-username').attr('disabled', true);
   return username;
 }
 
@@ -138,7 +126,7 @@ var scrollBottomMaybe = function (scrollDiff) {
 
 var addStatusMessage = function (message) {
   $('#chat').append(
-    `<p><small><i>${sanitizeHTML(message)}</i></small></p>`
+    `<p class="status">${sanitizeHTML(message)}</p>`
   );
 }
 

share/templates/chat.html

@@ -24,19 +24,15 @@
     <div class="chat-users">
       <div class="editable-username">
         <input id="username" value="{{ username }}" />
-        <button id="update-username" disabled>Set Name</button>
       </div>
       <ul id="user-list">
       </ul>
     </div>
     <div class="chat-wrapper">
-      <p class="chat-header">Chat Messages</p>
-
       <div id="chat"></div>
 
       <div class="chat-form">
-        <p><input type="text" id="new-message" name="new-message" placeholder="Type your message" /></p>
-        <p><button type="button" id="send-button" class="button">Send Message</button></p>
+        <input type="text" id="new-message" name="new-message" placeholder="Type your message" />
       </div>
 
     </div>