diff --git a/clientapp/templates.js b/clientapp/templates.js index 084eedc..8d0ca58 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/chat.styl b/public/css/app/chat.styl index b90d1f7..c0d8416 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%) @@ -116,7 +116,6 @@ word-break: break-word padding: 0px margin: 0px - color: #111 .timestamp font-size: 10px 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 39832a3..affe90b 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -269,6 +269,9 @@ h4 { -webkit-box-sizing: border-box; box-sizing: border-box; } +#pages .page.main { + padding: 20px; +} #connectionOverlay { position: fixed; top: 0px; @@ -286,29 +289,25 @@ h4 { 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; } #menu { position: fixed; @@ -668,8 +667,6 @@ h4 { background: #e4e4e4; } .messages { - background: #f7fdff; - font-weight: normal; margin: 0px; padding: 0px; padding-top: 130px; @@ -681,6 +678,7 @@ h4 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + background: #f7fdff; } .messages li { position: relative; @@ -700,19 +698,20 @@ h4 { .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; @@ -731,7 +730,6 @@ h4 { word-break: break-word; padding: 0px; margin: 0px; - color: #111; } .messages .message .timestamp { font-size: 10px;