From 4695a849077a5ce0335d7769ff2fa50fe84bb534 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Wed, 25 Sep 2013 10:09:24 +0200
Subject: [PATCH] [ux] conenteditable status to look like input

---
 clientapp/templates.js              |  2 +-
 clientapp/templates/pages/main.jade |  2 +-
 public/css/app/forms.styl           |  3 ++-
 public/css/app/settings.styl        |  8 +++++++-
 public/css/otalk.css                | 18 +++++++++++++++---
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/clientapp/templates.js b/clientapp/templates.js
index 0ef535c..be24648 100644
--- a/clientapp/templates.js
+++ b/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("");
 };
diff --git a/clientapp/templates/pages/main.jade b/clientapp/templates/pages/main.jade
index 116a5e1..0e229c2 100644
--- a/clientapp/templates/pages/main.jade
+++ b/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
diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl
index 8a2aef6..8c111bc 100644
--- a/public/css/app/forms.styl
+++ b/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%)
 
diff --git a/public/css/app/settings.styl b/public/css/app/settings.styl
index 5c146be..c5b402b 100644
--- a/public/css/app/settings.styl
+++ b/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
diff --git a/public/css/otalk.css b/public/css/otalk.css
index a99503a..e629fd5 100644
--- a/public/css/otalk.css
+++ b/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;
 }