moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-25 18:52:20 -05:00
Code Issues Releases Wiki Activity

[ux] conenteditable status to look like input

Browse Source
This commit is contained in:
karolinaszczur 2013-09-25 10:09:24 +02:00
parent e6a6446349
commit 4695a84907
5 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
clientapp/templates.js
View File

@ -131,7 +131,7 @@ exports.pages.groupchat = function anonymous(locals) {
exports.pages.main = function anonymous(locals) { exports.pages.main = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { 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(""); return buf.join("");
}; };

2
clientapp/templates/pages/main.jade
View File

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

3
public/css/app/forms.styl
View File

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

8
public/css/app/settings.styl
View File

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

18
public/css/otalk.css
View File

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