From 83cf08978fcfd19bcc7d87a19c8981a4bf52b1f5 Mon Sep 17 00:00:00 2001 From: karolinaszczur Date: Tue, 24 Sep 2013 12:45:31 +0200 Subject: [PATCH] [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; }