From 83cf08978fcfd19bcc7d87a19c8981a4bf52b1f5 Mon Sep 17 00:00:00 2001 From: karolinaszczur Date: Tue, 24 Sep 2013 12:45:31 +0200 Subject: [PATCH 1/2] [ux] make connection status a modal --- clientapp/templates.js | 2 +- clientapp/templates/body.jade | 8 ++++--- public/css/app/connectionStatus.styl | 28 +++++++++++-------------- public/css/app/layout.styl | 3 +++ public/css/otalk.css | 31 ++++++++++++++-------------- 5 files changed, 36 insertions(+), 36 deletions(-) diff --git a/clientapp/templates.js b/clientapp/templates.js index 16fae99..4f3a675 100644 --- a/clientapp/templates.js +++ b/clientapp/templates.js @@ -13,7 +13,7 @@ exports.pages = {}; exports.body = function anonymous(locals) { var buf = []; with (locals || {}) { - buf.push('
'); + buf.push('
'); } return buf.join(""); }; diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade index be67cf0..3f89a22 100644 --- a/clientapp/templates/body.jade +++ b/clientapp/templates/body.jade @@ -1,8 +1,10 @@ body #connectionOverlay - aside#connectionStatus - button.reconnect Reconnect - span.message disconnected + aside#connectionStatus.box + p + | You're currently + strong disconnected + button.reconnect Reconnect aside#menu nav.main li diff --git a/public/css/app/connectionStatus.styl b/public/css/app/connectionStatus.styl index 0469c5f..723a8ff 100644 --- a/public/css/app/connectionStatus.styl +++ b/public/css/app/connectionStatus.styl @@ -15,26 +15,22 @@ height: 0px #connectionStatus - top: -51px + top: -200px #connectionStatus - height: 50px - line-height: 50px - top: 0px; - position: fixed - background-color: #333 - width: 100% - z-index: 100 + height: 75px + width: 400px + top: 30% + left: 50% + margin-left: -200px + position: absolute + z-index: 10 text-align: center - span.message - display: inline-block - padding: 0px 10px - font-weight: bold - font-size: $fontLarge - color: white + p + padding: 0 0 20px 0 + margin: 0 button - padding: 5px 8px position: relative - top: -3px + top: -1px diff --git a/public/css/app/layout.styl b/public/css/app/layout.styl index ea3e14b..b3b0bd3 100644 --- a/public/css/app/layout.styl +++ b/public/css/app/layout.styl @@ -18,3 +18,6 @@ h1, h2, h3, h4 right: 0px left: 181px borderbox() + + .page.main + padding: 20px \ No newline at end of file diff --git a/public/css/otalk.css b/public/css/otalk.css index 1053f56..9dfe20e 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -725,29 +725,25 @@ td { height: 0px; } #connectionOverlay.connected #connectionStatus { - top: -51px; + top: -200px; } #connectionStatus { - height: 50px; - line-height: 50px; - top: 0px; - position: fixed; - background-color: #333; - width: 100%; - z-index: 100; + height: 75px; + width: 400px; + top: 30%; + left: 50%; + margin-left: -200px; + position: absolute; + z-index: 10; text-align: center; } -#connectionStatus span.message { - display: inline-block; - padding: 0px 10px; - font-weight: bold; - font-size: 20px; - color: #fff; +#connectionStatus p { + padding: 0 0 20px 0; + margin: 0; } #connectionStatus button { - padding: 5px 8px; position: relative; - top: -3px; + top: -1px; } body { background: #fff; @@ -773,6 +769,9 @@ h4 { -webkit-box-sizing: border-box; box-sizing: border-box; } +#pages .page.main { + padding: 20px; +} .aux { background: #f7f7f7; } From d3cddf2a4910665b65c7e14e8d57a05ab5c4ccf0 Mon Sep 17 00:00:00 2001 From: karolinaszczur Date: Tue, 24 Sep 2013 13:27:58 +0200 Subject: [PATCH 2/2] [ux] improve chat readability --- public/css/app/chat.styl | 11 +++++------ public/css/otalk.css | 11 +++++------ 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl index d6680c7..700e5cb 100644 --- a/public/css/app/chat.styl +++ b/public/css/app/chat.styl @@ -57,8 +57,6 @@ background: $grayOutline .messages - background: lighten($activeBlue, 97%) - font-weight: normal margin: 0px padding: 0px padding-top: 130px @@ -68,6 +66,7 @@ bottom: 75px width: 100% borderbox() + background: lighten($activeBlue, 97%) li position: relative @@ -85,17 +84,18 @@ .message font-size: 12px margin: 0px - padding: 7px 11px + padding: 10px display: inline-block padding-right: 11px min-width: 20px width: 100% - border-bottom: 1px solid lighten($activeBlue, 90%) borderbox() + &:not(.mine) + color: $activeBlue + &.mine background: white - border-bottom: 1px solid lighten($grayOutline, 10%) .timestamp color: darken($grayOutline, 20%) @@ -113,7 +113,6 @@ word-break: break-word padding: 0px margin: 0px - color: #111 .timestamp font-size: 10px diff --git a/public/css/otalk.css b/public/css/otalk.css index 9dfe20e..80a8cbb 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -603,8 +603,6 @@ td { background: #e4e4e4; } .messages { - background: #f7fdff; - font-weight: normal; margin: 0px; padding: 0px; padding-top: 130px; @@ -616,6 +614,7 @@ td { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + background: #f7fdff; } .messages li { position: relative; @@ -635,19 +634,20 @@ td { .messages .message { font-size: 12px; margin: 0px; - padding: 7px 11px; + padding: 10px; display: inline-block; padding-right: 11px; min-width: 20px; width: 100%; - border-bottom: 1px solid #e4f8ff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } +.messages .message:not(.mine) { + color: #00aeef; +} .messages .message.mine { background: #fff; - border-bottom: 1px solid #e7e7e7; } .messages .message.mine .timestamp { color: #b6b6b6; @@ -663,7 +663,6 @@ td { word-break: break-word; padding: 0px; margin: 0px; - color: #111; } .messages .message .timestamp { font-size: 10px;