diff --git a/clientapp/templates.js b/clientapp/templates.js index 78a2063..0ef535c 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('

Current status:

Change Avatar

Drag and drop a new avatar here

This space intentionally blank

'); + buf.push('

Current status

Change Avatar

Drag and drop a new avatar here

Alerts

'); } return buf.join(""); }; diff --git a/clientapp/templates/pages/main.jade b/clientapp/templates/pages/main.jade index d2059cf..116a5e1 100644 --- a/clientapp/templates/pages/main.jade +++ b/clientapp/templates/pages/main.jade @@ -1,16 +1,17 @@ section.page.main - p Current status: - span.status(contenteditable="true") + div + h3 Current status + span.status(contenteditable="true") div#avatarChanger - h1 Change Avatar + h3 Change Avatar div.uploadRegion p Drag and drop a new avatar here img form input#uploader(type="file") - button.enableAlerts Enable alerts - - h1 This space intentionally blank + div + h3 Alerts + button.enableAlerts Enable alerts diff --git a/public/css/app/layout.styl b/public/css/app/layout.styl index b3b0bd3..dfba8d7 100644 --- a/public/css/app/layout.styl +++ b/public/css/app/layout.styl @@ -12,12 +12,13 @@ body h1, h2, h3, h4 color: darken($baseText, 30%) +h3 + margin-top: 0 + font-size: $fontMedium + #pages position: absolute top: 0px right: 0px left: 181px borderbox() - - .page.main - padding: 20px \ No newline at end of file diff --git a/public/css/app/settings.styl b/public/css/app/settings.styl index 335c3a5..5c146be 100644 --- a/public/css/app/settings.styl +++ b/public/css/app/settings.styl @@ -1,12 +1,22 @@ @import '../_variables' @import '../_mixins' +.main div + padding: 20px + border-bottom: 1px solid $grayOutline + + &:last-of-type + border: none + .uploadRegion - font-size: 12px - roundall: 10px - border: 1px dashed #777 - margin: 10px - text-align: center + font-size: $fontSmall + roundall(3px) + margin: 10px 0 + color: $textSecondary + background: $grayBackground + + p + margin: 0 input width: 100% diff --git a/public/css/otalk.css b/public/css/otalk.css index 4984d1f..a99503a 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -260,6 +260,10 @@ h3, h4 { color: #3c3c3c; } +h3 { + margin-top: 0; + font-size: 14px; +} #pages { position: absolute; top: 0px; @@ -269,9 +273,6 @@ h4 { -webkit-box-sizing: border-box; box-sizing: border-box; } -#pages .page.main { - padding: 20px; -} #connectionOverlay { position: fixed; top: 0px; @@ -780,17 +781,27 @@ h4 { border: 1px solid #efe391; color: #d2bd2d; } +.main div { + padding: 20px; + border-bottom: 1px solid #e4e4e4; +} +.main div:last-of-type { + border: none; +} .uploadRegion { font-size: 12px; - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - -o-border-radius: 10px; - -border-radius: 10px; - border-radius: 10px; - border: 1px dashed #777; - margin: 10px; - text-align: center; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -o-border-radius: 3px; + -border-radius: 3px; + border-radius: 3px; + margin: 10px 0; + color: #b7b7b7; + background: #f7f7f7; +} +.uploadRegion p { + margin: 0; } .uploadRegion input { width: 100%;