Add key modal and Bootstrap

src/public/main.js

@@ -37,9 +37,9 @@ $(function() {
   function addParticipantsMessage (data) {
     var message = '';
     if (data.numUsers === 1) {
-      message += "there's 1 participant";
+      message += "There's 1 participant";
     } else {
-      message += "there are " + data.numUsers + " participants";
+      message += "There are " + data.numUsers + " participants";
     }
     log(message);
   }
@@ -167,7 +167,6 @@ $(function() {
     }
 
     $messages[0].scrollTop = $messages[0].scrollHeight; // minus 60 for key
-    console.log($messages[0]);
   }
 
   // Prevents input from having injected markup
@@ -289,5 +288,10 @@ $(function() {
     removeChatTyping(data);
   });
 
-  setUsername()
+  setUsername();
+
+  $('span.key-btn').click(function() {
+    $('#key-modal').modal('show');
+  });
+
 });

src/public/style.css

@@ -5,19 +5,20 @@
 }
 
 html {
-  font-weight: 300;
+  font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
 
-html, input {
+html, body, input {
   font-family:
+    "Open Sans",
     "HelveticaNeue-Light",
     "Helvetica Neue Light",
     "Helvetica Neue",
     Helvetica,
     Arial,
     "Lucida Grande",
-    sans-serif;
+    sans-serif !important;
 }
 
 html, body {
@@ -113,7 +114,7 @@ ul {
 
 .chatArea {
   height: 100%;
-  padding-bottom: 60px;
+  padding-bottom: 80px;
 }
 
 .messages {
@@ -138,23 +139,33 @@ ul {
 /* Input */
 
 .inputMessage{
-  border: 10px solid #000;
+  border: none;
+  border-top: 2px solid #ececec;
   bottom: 0;
-  height: 60px;
+  height: 70px;
   left: 0;
   outline: none;
   padding-left: 10px;
+  padding-right: 70px;
   position: absolute;
   right: 0;
   width: 100%;
 }
 
-#key {
+span.key-btn {
-  border: 10px solid #000;
+  position: absolute;
-  height: 60px;
+  right: 7px;
-  left: 0;
+  bottom: 8px;  
-  outline: none;
+  cursor: pointer;
-  padding-left: 10px;
+}
-  right: 0;
+
-  width: 100%;
+span.key-btn img {
+  width: 50px;
+}
+
+#key-modal input{
+  width: 100%;
+  height: 50px;
+  padding: 0px 15px;
+}  
 }

src/views/index.mustache

@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <title>FattyChat - Anonomous Chat</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
   <script>
   window.username = '{{username}}';
   </script>
@@ -12,17 +14,37 @@
   <ul class="pages">
     <li class="chat page">
       <div class="chatArea">
-      <input id="key" placeholder="Chat Key">
         <ul class="messages"></ul>
       </div>
       <input class="inputMessage" placeholder="Type here..."/>
+      <span class='key-btn'><img src="https://s3.amazonaws.com/fattychat/img/iconmonstr-key-11-240.png"></span>
     </li>
   </ul>
 
+  <div class="modal fade" id="key-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title">Key</h4>
+        </div>
+        <div class="modal-body">
+          <p>Enter your key below</p>
+          <input id="key" placeholder="Enter key here">
+        </div>
+        <div class="modal-footer">
+          {{!-- <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> --}}
+          <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+
   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script src="https://cdn.socket.io/socket.io-1.4.3.js"></script>
   <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha3.js"></script>
   <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
   <script src="/main.js"></script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){