Styling the top bar and messages to be clean and semi-responsive

clay-to-n · Jan 7, 2015 · 947edb2 · 947edb2
1 parent a4a8b91
commit 947edb2
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 12 deletions.
diff --git a/public/index.html b/public/index.html
@@ -41,16 +41,19 @@
           }, errBack);
         }
       }, false);
-</script>
+    </script>
   </head>
 
   <body>
 
-    <nav class="navbar navbar-default navbar-fixed-top">
-      <div class="container">
-        <label>User:</label>
-      <input id="name" type="text" value="Anonymous">
-      </div>
+
+    <nav id="top-bar" class="navbar navbar-fixed-top" role="navigation">
+      <ul class="nav navbar-nav navbar-left">
+        <li><a class="navbar-brand" href="#">meanChat</a></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li><input id="username" class="well-sm" type="text" placeholder="Anonymous"></li>
+      </ul>
     </nav>
 
     <ul class="messages"></ul>
@@ -98,7 +101,7 @@
 
       $('div').submit(function(){
         var message = {
-          'sender': $('#name').val(),
+          'sender': $('#username').val(),
           'text': $('#msg-text').val()
         };
         socket.emit('chat message', message);
@@ -151,7 +154,7 @@
         var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
         context.drawImage(video, 0, 0, 160, 120);
         var image = convertCanvasToImage(canvas);
-        var imgSender = ($('#name').val()).concat(': ');
+        var imgSender = ($('#username').val()).concat(': ');
         var imgString = $('#msgText').val();
         $('#msgText').val('');
         $('.messages').append($('<li style="font-weight:bold">').text(imgSender));

diff --git a/public/styles/index.css b/public/styles/index.css
@@ -1,15 +1,52 @@
-body {
+#body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font: 13px Helvetica, Arial;
 }
-#purple-header {
-  color:#cdbfe3;
+
+.navbar-collapse.collapse {
+  display: block!important;
+}
+.navbar-nav>li, .navbar-nav {
+  float: left !important;
+}
+.navbar-nav.navbar-right:last-child {
+  margin-right: -15px !important;
+  margin-top: 0;
+}
+.navbar-right {
+  float: right!important;
+}
+.navbar-brand {
+  color: white;
+}
+
+#top-bar {
   background-color: #6f5499;
   background-image: linear-gradient(to bottom,#563d7c 0,#6f5499 100%);
+  height: 50px;
   padding: 0 5% 0 5%;
 }
+#top-bar #username {
+  padding: 6px;
+  background-color:rgba(0,0,0,0) !important;
+  border:none !important;
+  color: white;
+  margin-top: 10px;
+}
+
+#top-bar textarea:focus, #top-bar input:focus, #top-bar input[type]:focus, #top-bar .uneditable-input:focus {   
+    border-color: rgba(255, 255, 255, 1.0);
+    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.175) inset, 0 0 8px rgba(255, 255, 255, 0.8);
+    border-top: 0;
+    outline: 0 none;
+    -webkit-transition: 0.2s ease-in-out all;
+    -moz-transition: 0.2s ease-in-out all;
+    -ms-transition: 0.2s ease-in-out all;
+    -o-transition: 0.2s ease-in-out all;
+    transition: 0.2s ease-in-out all;
+}
+
 #bottom-bar {
   position: fixed;
   bottom: 0;
@@ -41,6 +78,7 @@ img {
   list-style-type: none;
   width: 100%;
   margin: 0;
+  margin-top: 50px;
   padding: 0;
   float:left;
 }