[ux] conenteditable status to look like input

clientapp/templates.js

@@ -131,7 +131,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><div><h3>Current status<span contenteditable="true" class="status"></span></h3></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
+        buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -2,7 +2,7 @@ section.page.main
 
   div
     h3 Current status
-      span.status(contenteditable="true")
+    .status(contenteditable="true")
 
   div#avatarChanger
     h3 Change Avatar

public/css/app/forms.styl

@@ -27,7 +27,8 @@ input[type=text]:focus,
 input[type=email]:focus, 
 input[type=search]:focus,
 input[type=password]:focus,
-textarea:focus
+textarea:focus,
+.main .status:focus
   outline: none
   border: 1px solid lighten($activeBlue, 50%)
 

public/css/app/settings.styl

@@ -1,14 +1,20 @@
 @import '../_variables'
 @import '../_mixins'
 
-.main div
+.main > div
   padding: 20px
   border-bottom: 1px solid $grayOutline
 
   &:last-of-type
     border: none
 
+  .status
+    padding: 5px
+    background: $grayBackground
+    roundall(3px)
+
 .uploadRegion
+  padding: 15px
   font-size: $fontSmall
   roundall(3px)
   margin: 10px 0

public/css/otalk.css

@@ -781,14 +781,25 @@ h3 {
   border: 1px solid #efe391;
   color: #d2bd2d;
 }
-.main div {
+.main > div {
   padding: 20px;
   border-bottom: 1px solid #e4e4e4;
 }
-.main div:last-of-type {
+.main > div:last-of-type {
   border: none;
 }
+.main > div .status {
+  padding: 5px;
+  background: #f7f7f7;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
+}
 .uploadRegion {
+  padding: 15px;
   font-size: 12px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -905,7 +916,8 @@ input[type=text]:focus,
 input[type=email]:focus,
 input[type=search]:focus,
 input[type=password]:focus,
-textarea:focus {
+textarea:focus,
+.main .status:focus {
   outline: none;
   border: 1px solid #78daff;
 }