From 48cc126bac649492605a2da86fc94e2f70e532d0 Mon Sep 17 00:00:00 2001 From: Lance Stout Date: Wed, 11 Sep 2013 23:53:35 -0700 Subject: [PATCH] Add 'connecting' indicator on first load. --- clientapp/template.html | 10 ++++++++++ clientapp/templates.js | 4 ++-- clientapp/templates/body.jade | 5 ++++- clientapp/templates/pages/main.jade | 1 + clientapp/views/main.js | 2 +- public/style.css | 7 +++---- server.js | 1 + 7 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 clientapp/template.html diff --git a/clientapp/template.html b/clientapp/template.html new file mode 100644 index 0000000..c319eb9 --- /dev/null +++ b/clientapp/template.html @@ -0,0 +1,10 @@ + + + + + + + +

Connecting

+ + diff --git a/clientapp/templates.js b/clientapp/templates.js index 0b56865..545e427 100644 --- a/clientapp/templates.js +++ b/clientapp/templates.js @@ -12,7 +12,7 @@ exports.pages = {}; exports.body = function anonymous(locals) { var buf = []; with (locals || {}) { - buf.push('

'); + buf.push('

'); } return buf.join(""); }; @@ -71,7 +71,7 @@ exports.pages.chat = function anonymous(locals) { exports.pages.main = function anonymous(locals) { var buf = []; with (locals || {}) { - buf.push('
'); + buf.push('

This space intentionally left blank.

'); } return buf.join(""); }; diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade index e778788..397c9a5 100644 --- a/clientapp/templates/body.jade +++ b/clientapp/templates/body.jade @@ -1,6 +1,9 @@ body .wrap - #reconnect + aside#connectionStatus + button.reconnect Reconnect + span.message disconnected + #connectionOverlay header#me img.avatar p.status diff --git a/clientapp/templates/pages/main.jade b/clientapp/templates/pages/main.jade index baedc97..40c0f50 100644 --- a/clientapp/templates/pages/main.jade +++ b/clientapp/templates/pages/main.jade @@ -1 +1,2 @@ section.page.main + p This space intentionally left blank. diff --git a/clientapp/views/main.js b/clientapp/views/main.js index 9c33516..c768275 100644 --- a/clientapp/views/main.js +++ b/clientapp/views/main.js @@ -12,7 +12,7 @@ module.exports = HumanView.extend({ 'click a[href]': 'handleLinkClick' }, classBindings: { - connected: '#reconnect' + connected: '#connectionOverlay' }, render: function () { $('head').append(templates.head()); diff --git a/public/style.css b/public/style.css index fde5521..6c5c380 100644 --- a/public/style.css +++ b/public/style.css @@ -15,9 +15,8 @@ html, body { padding: 5px; } -#reconnect { +#connectionOverlay { z-index: 5000; - position: absolute; left: 0px; top: 0px; height: 100%; @@ -25,7 +24,7 @@ html, body { background-color: rgba(0, 0, 0, .5); } -#reconnect.connected { +#connectionOverlay { display: none; } @@ -195,7 +194,7 @@ nav.main a { overflow-x: hidden; position: relative; margin-top: 50px; - padding-top: 50px; + padding-top: 30px; bottom: 50px; } diff --git a/server.js b/server.js index c3d74b5..71efbb6 100644 --- a/server.js +++ b/server.js @@ -19,6 +19,7 @@ app.use(helmet.contentTypeOptions()); var clientApp = new Moonboots({ main: __dirname + '/clientapp/app.js', + templateFile: __dirname + '/clientapp/template.html', developmentMode: config.isDev, libraries: [ __dirname + '/clientapp/libraries/zepto.js',