diff --git a/clientapp/pages/chat.js b/clientapp/pages/chat.js
index a360f14..f8e21f1 100644
--- a/clientapp/pages/chat.js
+++ b/clientapp/pages/chat.js
@@ -3,7 +3,6 @@
var BasePage = require('./base');
var templates = require('../templates');
-var ContactListItem = require('../views/contactListItem');
var Message = require('../views/message');
var MessageModel = require('../models/message');
@@ -16,22 +15,36 @@ module.exports = BasePage.extend({
this.render();
},
events: {
- 'keydown #chatBuffer': 'handleKeyDown',
- 'keyup #chatBuffer': 'handleKeyUp'
+ 'keydown textarea': 'handleKeyDown',
+ 'keyup textarea': 'handleKeyUp'
},
srcBindings: {
avatar: 'header .avatar'
},
textBindings: {
displayName: 'header .name',
- formattedTZO: 'header #tzo'
+ formattedTZO: 'header .tzo'
+ },
+ show: function (animation) {
+ BasePage.prototype.show.apply(this, [animation]);
+ client.sendMessage({
+ to: this.model.lockedResource || this.model.jid,
+ chatState: 'active'
+ });
+ },
+ hide: function () {
+ BasePage.prototype.hide.apply(this);
+ client.sendMessage({
+ to: this.model.lockedResource || this.model.jid,
+ chatState: 'inactive'
+ });
},
render: function () {
this.renderAndBind();
this.typingTimer = null;
- this.$chatInput = this.$('#chatBuffer');
- this.$messageList = this.$('#conversation');
- this.renderCollection(this.model.messages, Message, this.$('#conversation'));
+ this.$chatInput = this.$('.chatBox textarea');
+ this.$messageList = this.$('.messages');
+ this.renderCollection(this.model.messages, Message, this.$('.messages'));
this.registerBindings();
return this;
},
diff --git a/clientapp/pages/wrapper.js b/clientapp/pages/wrapper.js
deleted file mode 100644
index c782ac7..0000000
--- a/clientapp/pages/wrapper.js
+++ /dev/null
@@ -1,17 +0,0 @@
-"use strict";
-
-var BasePage = require('pages/base');
-var templates = require('templates');
-
-
-module.exports = BasePage.extend({
- template: templates.pages.wrapper,
- initialize: function (spec) {
- this.url = spec.url;
- },
- render: function () {
- this.basicRender();
- this.$el.load(this.url);
- return this;
- }
-});
diff --git a/clientapp/template.html b/clientapp/template.html
index a8848a0..061f61e 100644
--- a/clientapp/template.html
+++ b/clientapp/template.html
@@ -7,7 +7,7 @@
- 
+ 
Connecting...
diff --git a/clientapp/templates.js b/clientapp/templates.js
index 10360ee..6a9895e 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("");
};
@@ -90,7 +90,7 @@ exports.misc.growlMessage = function anonymous(locals) {
exports.pages.chat = function anonymous(locals) {
var buf = [];
with (locals || {}) {
- buf.push('');
+ buf.push('');
}
return buf.join("");
};
@@ -99,7 +99,7 @@ exports.pages.chat = function anonymous(locals) {
exports.pages.main = function anonymous(locals) {
var buf = [];
with (locals || {}) {
- buf.push('');
+ buf.push('This space intentionally blank
');
}
return buf.join("");
};
@@ -113,15 +113,6 @@ exports.pages.signin = function anonymous(locals) {
return buf.join("");
};
-// wrapper.jade compiled template
-exports.pages.wrapper = function anonymous(locals) {
- var buf = [];
- with (locals || {}) {
- buf.push('');
- }
- return buf.join("");
-};
-
// attach to window or export with commonJS
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade
index f4b37cf..af33d67 100644
--- a/clientapp/templates/body.jade
+++ b/clientapp/templates/body.jade
@@ -1,17 +1,18 @@
body
- .wrap
- #connectionOverlay
- aside#connectionStatus
- button.reconnect Reconnect
- span.message disconnected
- header#me
- img.avatar
- p.status
+ #connectionOverlay
+ aside#connectionStatus
+ button.reconnect Reconnect
+ span.message disconnected
+ aside#menu
nav.main
li
a(href="/logout") Logout
li
a(href="/") Settings
- nav#contactList
- section#pages
- footer
+ section#roster
+ h1 Roster
+ nav
+ section#bookmarks
+ h1 Bookmarks
+ nav
+ section#pages
diff --git a/clientapp/templates/includes/contactListItem.jade b/clientapp/templates/includes/contactListItem.jade
index e00e587..ad3320b 100644
--- a/clientapp/templates/includes/contactListItem.jade
+++ b/clientapp/templates/includes/contactListItem.jade
@@ -1,5 +1,5 @@
li.contact
- img.avatar(src=contact.avatar)
- .name=contact.displayName
- .unread=contact.unreadCount
- .status=contact.status
+ img.avatar(src=contact.avatar)
+ .name=contact.displayName
+ .unread=contact.unreadCount
+ .status=contact.status
diff --git a/clientapp/templates/includes/message.jade b/clientapp/templates/includes/message.jade
index 19d9fbe..3246f0b 100644
--- a/clientapp/templates/includes/message.jade
+++ b/clientapp/templates/includes/message.jade
@@ -1,4 +1,4 @@
li
- .message
- span.timestamp=message.created
- p.body=message.body
+ .message
+ span.timestamp=message.created
+ p.body=message.body
diff --git a/clientapp/templates/misc/growlMessage.jade b/clientapp/templates/misc/growlMessage.jade
index 9f267b8..95b1ea6 100644
--- a/clientapp/templates/misc/growlMessage.jade
+++ b/clientapp/templates/misc/growlMessage.jade
@@ -4,4 +4,4 @@
if title
h1= title
if description
- p= description
\ No newline at end of file
+ p= description
diff --git a/clientapp/templates/pages/chat.jade b/clientapp/templates/pages/chat.jade
index 67004b6..2d827fd 100644
--- a/clientapp/templates/pages/chat.jade
+++ b/clientapp/templates/pages/chat.jade
@@ -1,9 +1,10 @@
section.page.chat
- header.contactInfo
- img.avatar(width=30, height=30)
- h1.name
- #tzo
- ul#conversation
- div#chatInput
- form
- textarea#chatBuffer(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
+ section.conversation
+ header
+ img.avatar
+ h1.name
+ .tzo
+ ul.messages
+ .chatBox
+ form
+ textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
diff --git a/clientapp/templates/pages/main.jade b/clientapp/templates/pages/main.jade
index cb01d82..d244218 100644
--- a/clientapp/templates/pages/main.jade
+++ b/clientapp/templates/pages/main.jade
@@ -1,6 +1,4 @@
section.page.main
- button.enableAlerts Enable alerts
+ button.enableAlerts Enable alerts
- section.notifications
- h1 Notifications
- ul
+ h1 This space intentionally blank
diff --git a/clientapp/templates/pages/signin.jade b/clientapp/templates/pages/signin.jade
index bbbb6f6..bb78331 100644
--- a/clientapp/templates/pages/signin.jade
+++ b/clientapp/templates/pages/signin.jade
@@ -1,10 +1,10 @@
section.page.signin
- div#loginForm
- form
- label JID:
- input(type="text", id="jid", placeholder="you@aweso.me")
- label Password:
- input(type="password", id="password")
- label WebSocket URL:
- input(type="text", id="wsURL", placeholder="wss://aweso.me:5281/xmpp-websocket")
- input(type="submit", value="Connect")
+ div#loginForm
+ form
+ label JID:
+ input(type="text", id="jid", placeholder="you@aweso.me")
+ label Password:
+ input(type="password", id="password")
+ label WebSocket URL:
+ input(type="text", id="wsURL", placeholder="wss://aweso.me:5281/xmpp-websocket")
+ input(type="submit", value="Connect")
diff --git a/clientapp/templates/pages/wrapper.jade b/clientapp/templates/pages/wrapper.jade
deleted file mode 100644
index 691d458..0000000
--- a/clientapp/templates/pages/wrapper.jade
+++ /dev/null
@@ -1 +0,0 @@
-.page
diff --git a/clientapp/views/contactListItem.js b/clientapp/views/contactListItem.js
index 018c31a..694bc7e 100644
--- a/clientapp/views/contactListItem.js
+++ b/clientapp/views/contactListItem.js
@@ -24,13 +24,13 @@ module.exports = HumanView.extend({
avatar: '.avatar'
},
events: {
- 'click': 'goChat'
+ 'click': 'handleClick'
},
render: function () {
this.renderAndBind({contact: this.model});
return this;
},
- goChat: function () {
+ handleClick: function () {
app.navigate('chat/' + this.model.jid);
}
});
diff --git a/clientapp/views/main.js b/clientapp/views/main.js
index a67e3ef..296f318 100644
--- a/clientapp/views/main.js
+++ b/clientapp/views/main.js
@@ -18,7 +18,7 @@ module.exports = HumanView.extend({
$('head').append(templates.head());
$('body').removeClass('aux');
this.renderAndBind();
- this.renderCollection(me.contacts, ContactListItem, this.$('#contactList'));
+ this.renderCollection(me.contacts, ContactListItem, this.$('#roster nav'));
return this;
},
handleLinkClick: function (e) {
diff --git a/clientapp/views/message.js b/clientapp/views/message.js
index 3a6deec..46d9f66 100644
--- a/clientapp/views/message.js
+++ b/clientapp/views/message.js
@@ -13,10 +13,10 @@ module.exports = HumanView.extend({
},
classBindings: {
mine: '.message',
- receiptReceived: '',
- acked: '',
- delayed: '',
- edited: ''
+ receiptReceived: '.message',
+ acked: '.message',
+ delayed: '.message',
+ edited: '.message'
},
textBindings: {
body: '.body',
diff --git a/public/css/_mixins.styl b/public/css/_mixins.styl
new file mode 100644
index 0000000..fc6d60b
--- /dev/null
+++ b/public/css/_mixins.styl
@@ -0,0 +1,164 @@
+@import _variables
+
+helv()
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
+
+shadow($color, $x, $y, $blur)
+ -webkit-box-shadow: $color $x $y $blur
+ -moz-box-shadow: $color $x $y $blur
+ box-shadow: $color $x $y $blur
+
+innerShadow($color, $x, $y, $blur)
+ -moz-box-shadow: inset $color $x $y $blur
+ -webkit-box-shadow: inset $color $x $y $blur
+ box-shadow: inset $color $x $y $blur
+
+gradient($top, $bottom)
+ background: $top
+ background-image: -moz-linear-gradient(top, $top, $bottom)
+ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $top),color-stop(1, $bottom))
+
+radial($inner, $outer)
+ background: $inner
+ background-image: -webkit-radial-gradient(center center, circle cover, $inner, $outer)
+ background-image: -moz-radial-gradient(center center, circle cover, $inner, $outer)
+ background-image: -ms-radial-gradient(center center, circle cover, $inner, $outer)
+ background-image: -o-radial-gradient(center center, circle cover, $inner, $outer)
+ background-image: radial-gradient(center center, circle cover, $inner, $outer)
+
+roundall($round)
+ -moz-border-radius: $round
+ -webkit-border-radius: $round
+ -khtml-border-radius: $round
+ -o-border-radius: $round
+ -border-radius: $round
+ border-radius: $round
+
+round($roundtl, $roundtr, $roundbr, $roundbl)
+ -webkit-border-top-left-radius: $roundtl
+ -webkit-border-top-right-radius: $roundtr
+ -webkit-border-bottom-left-radius: $roundbl
+ -webkit-border-bottom-right-radius: $roundbr
+ -moz-border-radius-topleft: $roundtl
+ -moz-border-radius-topright: $roundtr
+ -moz-border-radius-bottomleft: $roundbl
+ -moz-border-radius-bottomright: $roundbr
+ -border-top-left-radius: $roundtl
+ -border-top-right-radius: $roundtr
+ -border-bottom-left-radius: $roundbl
+ -border-bottom-right-radius: $roundbr
+ border-top-left-radius: $roundtl
+ border-top-right-radius: $roundtr
+ border-bottom-left-radius: $roundbl
+ border-bottom-right-radius: $roundbr
+
+textShadow($color, $x, $y, $blur)
+ text-shadow: $color $x $y $blur
+
+calc()
+ if current-property
+ add-property(current-property[0], s('-webkit-calc(%s)', unquote(arguments)))
+ add-property(current-property[0], s('-moz-calc(%s)', unquote(arguments)))
+ add-property(current-property[0], s('-ms-calc(%s)', unquote(arguments)))
+ add-property(current-property[0], s('-o-calc(%s)', unquote(arguments)))
+ s('calc(%s)', unquote(arguments))
+ else
+ error('calc() must be used within a property')
+
+noselect()
+ -webkit-touch-callout: none
+ -webkit-user-select: none
+ -khtml-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+ user-select: none
+
+turn($deg)
+ -moz-transform: rotate($deg)
+ -webkit-transform: rotate($deg)
+ -o-transform: rotate($deg)
+ transform: rotate($deg)
+
+transform($param)
+ -webkit-transform: $param
+ -moz-transform: $param
+ -ms-transform: $param
+ transform: $param
+
+transition($attr, $dur, $timing, $delay)
+ -webkit-transition: $attr $dur $timing $delay
+ -o-transition: $attr $dur $timing $delay
+ transition: $attr $dur $timing $delay
+ -moz-transition: $attr $dur $timing $delay
+
+flip-horizontal()
+ -moz-transform: scaleX(-1)
+ -webkit-transform: scaleX(-1)
+ -o-transform: scaleX(-1)
+ transform: scaleX(-1)
+ -ms-filter: fliph
+ filter: fliph
+
+flip-vertical()
+ -moz-transform: scaleY(-1)
+ -webkit-transform: scaleY(-1)
+ -o-transform: scaleY(-1)
+ transform: scaleY(-1)
+ -ms-filter: flipv
+ filter: flipv
+
+colorDot($color)
+ display: block
+ height: 10px
+ width: 10px
+ gradient: $color + #777 $color + #000
+ border-radius: 25px
+ border-bottom: 1px solid rgba(0,0,0,1)
+ border-top: 1px solid rgba(255,255,255,.9)
+
+imagesprite($width, $height, $sx, $x, $y)
+ background-repeat: none
+ width: ($width)px
+ height: ($height)px
+ background-image: url("/images/sprite.png")
+ background-position: ($sx * $x * -1)px ($sx * $y * -1)px
+
+borderbox()
+ -moz-box-sizing: border-box
+ -webkit-box-sizing: border-box
+ box-sizing: border-box
+
+// avatars
+avatarLG()
+ width: 50px
+ height: 50px
+ roundall: 3px
+
+avatarMD()
+ width: 30px
+ height: 30px
+ roundall: 3px
+
+avatarSM()
+ width: 20px
+ height: 20px
+ roundall: 3px
+
+avatarOverlay()
+ content: ""
+ height: 100%
+ width: 100%
+ position: absolute
+ top: 0
+ left: 0
+ display: block
+ z-index: 70
+ background: -moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(247,247,247,.1) 10%, rgba(247,247,247,.1) 94%, rgba(229,229,229,.1) 100%)
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(10%,rgba(247,247,247,.1)), color-stop(94%,rgba(247,247,247,.1)), color-stop(100%,rgba(229,229,229,.1)))
+ background: -webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(247,247,247,.1) 10%,rgba(247,247,247,.1) 94%,rgba(229,229,229,.1) 100%)
+ background: linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(247,247,247,.1) 10%,rgba(247,247,247,.1) 94%,rgba(229,229,229,.1) 100%)
+
+// this if for the content flash and hardware acceleration bugs in webkit
+webkit-transition-fix()
+ -webkit-backface-visibility: hidden
+ //-webkit-transform: translateZ(0)
diff --git a/public/css/_reset.styl b/public/css/_reset.styl
new file mode 100644
index 0000000..af44afb
--- /dev/null
+++ b/public/css/_reset.styl
@@ -0,0 +1,210 @@
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
+ display: block
+
+audio, canvas, video
+ display: inline-block
+ *display: inline
+ *zoom: 1
+
+audio:not([controls])
+ display: none
+
+[hidden]
+ display: none
+
+html
+ font-size: 100%
+ -webkit-text-size-adjust: 100%
+ -ms-text-size-adjust: 100%
+
+html, button, input, select, textarea
+ font-family: sans-serif
+ color: #222
+
+body
+ margin: 0
+ font-size: 1em
+ line-height: 1.4
+
+a
+ color: #00e
+
+a:visited
+ color: #551a8b
+
+a:hover
+ color: #06e
+
+a:focus
+ outline: thin dotted
+
+a:hover, a:active
+ outline: 0
+
+abbr[title]
+ border-bottom: 1px dotted
+
+b, strong
+ font-weight: bold
+
+blockquote
+ margin: 1em 40px
+
+dfn
+ font-style: italic
+
+hr
+ display: block
+ height: 1px
+ border: 0
+ border-top: 1px solid #ccc
+ margin: 1em 0
+ padding: 0
+
+ins
+ background: #ff9
+ color: #000
+ text-decoration: none
+
+mark
+ background: #ff0
+ color: #000
+ font-style: italic
+ font-weight: bold
+
+pre, code, kbd, samp
+ font-family: monospace, serif
+ _font-family: 'courier new', monospace
+ font-size: 1em
+
+pre
+ white-space: pre-wrap
+ word-wrap: break-word
+
+q
+ quotes: none
+
+q:before, q:after
+ content: none
+
+small
+ font-size: 85%
+
+sub, sup
+ font-size: 75%
+ line-height: 0
+ position: relative
+ vertical-align: baseline
+
+sup
+ top: -0.5em
+
+sub
+ bottom: -0.25em
+
+ul, ol
+ margin: 1em 0
+ padding: 0 0 0 40px
+
+dd
+ margin: 0 0 0 40px
+
+nav ul, nav ol
+ list-style: none
+ list-style-image: none
+ margin: 0
+ padding: 0
+
+img
+ border: 0
+ -ms-interpolation-mode: bicubic
+ vertical-align: middle
+
+svg:not(:root)
+ overflow: hidden
+
+figure
+ margin: 0
+
+form
+ margin: 0
+
+fieldset
+ border: 0
+ margin: 0
+ padding: 0
+
+label
+ cursor: pointer
+
+legend
+ border: 0
+ *margin-left: -7px
+ padding: 0
+ white-space: normal
+
+button, input, select, textarea
+ font-size: 100%
+ margin: 0
+ vertical-align: baseline
+ *vertical-align: middle
+
+button, input
+ line-height: normal
+
+button, input[type="button"], input[type="reset"], input[type="submit"]
+ cursor: pointer
+ -webkit-appearance: button
+ *overflow: visible
+
+button[disabled], input[disabled]
+ cursor: default
+
+input[type="checkbox"], input[type="radio"]
+ box-sizing: border-box
+ padding: 0
+ *width: 13px
+ *height: 13px
+
+input[type="search"]
+ -webkit-appearance: textfield
+ -moz-box-sizing: content-box
+ -webkit-box-sizing: content-box
+ box-sizing: content-box
+
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button
+ -webkit-appearance: none
+
+button::-moz-focus-inner, input::-moz-focus-inner
+ border: 0
+ padding: 0
+
+textarea
+ overflow: auto
+ vertical-align: top
+ resize: vertical
+
+input:valid, textarea:valid
+
+input:invalid, textarea:invalid
+ background-color: #f0dddd
+
+table
+ border-collapse: collapse
+ border-spacing: 0
+
+td
+ vertical-align: top
+
+
+.clearfix:before, .clearfix:after
+ content: "\0020"
+ display: block
+ height: 0
+ visibility: hidden
+
+.clearfix:after
+ clear: both
+
+.clearfix
+ zoom: 1
diff --git a/public/css/_variables.styl b/public/css/_variables.styl
new file mode 100644
index 0000000..5d70147
--- /dev/null
+++ b/public/css/_variables.styl
@@ -0,0 +1,30 @@
+// colors
+
+$header = #404040
+$bodybg = #202020
+
+$red = #c80000
+$text = #333
+$subtext = #777
+
+$pink = #EB008B
+$ltgray = #EBECEC
+$dkgray = #202020
+$blue = #00aeef
+$dkblue = #006991
+
+
+// font sizes
+
+$fontLG = 20px
+$fontMD = 16px
+$fontSM = 13px
+
+
+// dimensions
+
+$base = 10px
+$seven = 7 * $base
+$five = 5 * $base
+$three = 3 * $base
+$page = 38 * $base
diff --git a/public/css/app/aux.styl b/public/css/app/aux.styl
new file mode 100644
index 0000000..fdc90dc
--- /dev/null
+++ b/public/css/app/aux.styl
@@ -0,0 +1,63 @@
+.aux
+ header
+ margin-top: 10%
+ text-align: center
+
+#logo
+ margin: auto
+
+#loginbox
+ position: relative
+ margin: auto
+ margin-top: 5%
+ padding: 20px
+ background-color: white
+ width: 75%
+
+ label
+ display: block
+ margin-bottom: 5px
+ font-size: 13px
+ font-weight: bold
+ color: #777
+
+ input
+ width: 100%
+ display: block
+ height: 35px
+ font-size: 14px
+ padding: 10px 0.5em
+ margin-bottom: 15px
+ background-color: #f9fafa
+ border: 1px solid #eeeeee
+ color: #2e2d2d
+ borderbox()
+
+ &:focus
+ border: 1px solid #a7d9eb
+ outline: 0px
+
+ button, .andyetLogin
+ text-decoration: none
+ text-align: center
+ roundall: 3px
+ border: none
+ height: 35px
+ padding: 0 1em
+ color: white
+ background-color: #7ec6e2
+ line-height: 35px
+ font-size: 16px
+ cursor: pointer
+
+ .andyetLogin
+ display: block
+ float: right
+ font-size: 14px
+
+ h2
+ color: #222
+ padding-bottom: 10px
+ border-bottom: 1px solid #f8f8f8
+
+
diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
new file mode 100644
index 0000000..ae46453
--- /dev/null
+++ b/public/css/app/chat.styl
@@ -0,0 +1,160 @@
+@import '../_variables'
+@import '../_mixins'
+
+.page.chat
+ padding-top: 0px
+ height: 100%
+ borderbox()
+
+.conversation
+ position: relative
+ bottom: 0px
+ left: 0px
+ right: 0px
+ padding: 0px
+ height: 100%
+ width: 100%
+ borderbox()
+
+ header
+ padding: 5px
+ gradient: #e1e4e6 #cacdce
+ shadow: rgba(#000,0.1) 2px 1px 5px
+ border-bottom: 1px solid #aaa
+ position: fixed
+ right: 0px
+ left: 156px
+ z-index: 10
+ font-size: 14px
+ borderbox()
+ color: #222
+ font-weight: normal
+ font-size: 11px
+
+ .avatar
+ margin-right: 5px
+ roundall: 5px
+ width: 30px
+ height: 30px
+ position: absolute
+ top: 11px
+ left: 11px
+ vertical-align: top
+
+ .name
+ margin: 15px
+ padding: 0px
+ margin-left: 45px
+ font-size: 14px
+ line-height: 14px
+
+.messages
+ background: #ecf0f2
+ font-weight: normal
+ margin: 0px
+ padding: 0px
+ padding-top: 150px
+ overflow-y: auto
+ overflow-x: hidden
+ position: relative
+ bottom: 75px
+ width: 100%
+ borderbox()
+
+ li
+ position: relative
+ z-index: 1
+ list-style: none
+ margin: 0px
+ padding: 0px
+ width: 100%
+ display: block
+ borderbox()
+
+ .message
+ color: #33404c
+ font-size: 12px
+ margin: 0px
+ padding: 7px 11px
+ display: inline-block
+ padding-right: 11px
+ min-width: 20px
+ width: 100%
+ border-bottom: 1px solid #ccc
+ borderbox()
+
+ &.mine
+ background: #eaf7ff
+ border-bottom: 1px solid #bbe0fa
+
+ .timestamp
+ color: #bbe0fa
+
+ &.delayed
+ .timestamp:before
+ content: '@ '
+
+ &.edited
+ .timestamp:before
+ content: 'edited '
+
+ .body
+ display: inline
+ word-break: break-word
+ padding: 0px
+ margin: 0px
+ color: #111
+
+ .timestamp
+ font-size: 12px
+ color: #bbb
+ font-weight: bold
+ float: right
+ display: block
+ margin-right: 15px
+
+.chatBox
+ borderbox()
+ border-top: 1px solid rgba(0,0,0,.08)
+ bottom: 0px
+ position: fixed
+ right: 0px
+ left: 156px
+ z-index: 200
+
+ form
+ gradient: #e1e4e6 #cacdce
+ padding: 11px
+ border-top: 1px solid #fff
+ border-left: 1px solid #ddd
+ border-right: 1px solid #ddd
+
+ .formwrap
+ borderbox()
+ width: 100%
+ padding-right: 80px
+ position: relative
+
+ textarea
+ background-color: #fff
+ width: 100%
+ height: 30px
+ border: 1px solid #ccc
+ border-top-color: #bbb
+ roundall: 5px
+ innerShadow: rgba(0,0,0,.1) 0 -1px 3px
+ line-height: 18px
+ outline: none
+ resize: none
+ color: #222f3b
+ font-size: 14px
+ -webkit-font-smoothing: antialiased
+ padding: 5px
+ borderbox()
+
+ &:focus
+ border-color: #bbb
+ border-top-color: #aaa
+
+ &.editing
+ background-color: yellow
diff --git a/public/css/app/connectionStatus.styl b/public/css/app/connectionStatus.styl
new file mode 100644
index 0000000..215e57c
--- /dev/null
+++ b/public/css/app/connectionStatus.styl
@@ -0,0 +1,40 @@
+@import '../_variables'
+@import '../_mixins'
+
+#connectionOverlay
+ position: fixed
+ top: 0px
+ left: 0px
+ width: 100%
+ height: 100%
+ background: rgba(0, 0, 0, 0.5)
+ z-index: 1000
+ transition: all .25s linear 0
+
+ &.connected
+ height: 0px
+
+ #connectionStatus
+ top: -51px
+
+#connectionStatus
+ height: 50px
+ line-height: 50px
+ top: 0px;
+ position: fixed
+ background-color: #333
+ border-bottom: 1px solid #000
+ width: 100%
+ z-index: 9999
+ text-align: center
+
+ span.message
+ display: inline-block
+ padding: 0px 10px
+ font-weight: bold
+ font-size: 24px
+
+ button
+ padding: 5px 8px
+ position: relative
+ top: -3px
diff --git a/public/css/app/layout.styl b/public/css/app/layout.styl
new file mode 100644
index 0000000..5077da8
--- /dev/null
+++ b/public/css/app/layout.styl
@@ -0,0 +1,20 @@
+@import '../_variables'
+@import '../_mixins'
+
+body
+ background: #ecf0f2
+ color: #222
+ font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif
+ font-size: 17px
+ font-weight: 500
+ -webkit-font-smoothing: antialiased
+
+ #pages
+ position: absolute
+ top: 0px
+ right: 0px
+ left: 156px
+ borderbox()
+
+ #menu
+ width: 155px
diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
new file mode 100644
index 0000000..1f22bed
--- /dev/null
+++ b/public/css/app/roster.styl
@@ -0,0 +1,143 @@
+@import '../_variables'
+@import '../_mixins'
+
+#menu
+ position: fixed
+ top: 0px
+ bottom: 0px
+ left: 0px
+ width: 155px
+ background-color: #1c232d
+ z-index: 300
+ overflow-y: auto;
+ overflow-x: hidden;
+ webkit-transition-fix()
+ noselect()
+ shadow: #000 1px 0px 1px
+
+ .main
+ li
+ list-style-type: none
+ padding: 5px
+ line-height: 12px
+
+ &:hover
+ background-color: #2a323f
+
+ a
+ color: #666
+
+ a
+ text-decoration: none
+ font-size: 12px
+ color: #777
+
+
+ h1
+ font-size: 11px
+ margin: 0px
+ margin-bottom: 1px
+ padding: 5px
+ color: #222
+ border-top: 1px solid #fff
+ border-bottom: 1px solid #aaa
+ gradient: #e1e4e6 #cacdce
+ shadow: rgba(0,0,0,0.75) 2px 1px 5px
+ text-shadow: #fff 1px 1px 1px
+
+#roster
+ li
+ list-style-type: none
+ padding: 11px
+ margin: 0px
+ position: relative
+ min-height: 20px
+ font-size: 11px
+ color: #fff
+
+ &:nth-child(2n)
+ background-color: #1e252f
+
+ &:hover
+ background-color: #2a323f
+
+ &.hasUnread .unread
+ display: block
+
+ &.online,
+ &.chat
+ border-left: 2px solid green
+
+ &.dnd
+ border-left: 2px solid red
+
+ &.away,
+ &.xa
+ border-left: 2px solid orange
+
+ &.offline
+ border-left: 2px solid #222
+ color: #aaa
+
+ img
+ opacity: .25
+
+ .status
+ color: #777
+
+ &.activeContact
+ gradient: #35c8ff #00aeef
+ border-top: 1px solid #8de0ff
+ border-bottom: 1px solid #004a65
+
+ &.composing
+ border-right: 4px solid orange
+
+ &.paused
+ border-right: 4px solid #666
+
+ img
+ opacity: 1
+
+ .avatar
+ vertical-align: top
+ margin-right: 5px
+ position: absolute
+ left: 5px
+ top: 5px
+ width: 30px
+ height: 30px
+ roundall: 5px
+ shadow: rgba(0,0,0,0.5) -1px -1px 1px
+ noselect()
+
+ .name
+ margin: 0px
+ margin-left: 40px
+ font-weight: bold
+ text-shadow: rgba(0,0,0,0.5) -1px -1px 1px
+
+ .status
+ color: #ccc
+ font-size: 10px
+ font-style: italic
+ font-weight: 600
+ margin: 0px
+ margin-left: 40px
+ text-shadow: rgba(0,0,0,0.5) 1px 1px 1px
+
+ .unread
+ display: none
+ color: white
+ padding-left: 5px
+ padding-right: 5px
+ roundall: 11px
+ position: absolute
+ top: 20px
+ left: 20px
+ text-align: center
+ font-weight: bold
+ background-color: red
+ border: 1px solid white
+ text-shadow: rgba(0,0,0,0.5) 1px 1px 1px
+ shadow: rgba(0,0,0,0.5) 1px 1px 1px
diff --git a/public/css/otalk.css b/public/css/otalk.css
new file mode 100644
index 0000000..1ffed31
--- /dev/null
+++ b/public/css/otalk.css
@@ -0,0 +1,739 @@
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+ display: block;
+}
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+audio:not([controls]) {
+ display: none;
+}
+[hidden] {
+ display: none;
+}
+html {
+ font-size: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+html,
+button,
+input,
+select,
+textarea {
+ font-family: sans-serif;
+ color: #222;
+}
+body {
+ margin: 0;
+ font-size: 1em;
+ line-height: 1.4;
+}
+a {
+ color: #00e;
+}
+a:visited {
+ color: #551a8b;
+}
+a:hover {
+ color: #06e;
+}
+a:focus {
+ outline: thin dotted;
+}
+a:hover,
+a:active {
+ outline: 0;
+}
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+b,
+strong {
+ font-weight: bold;
+}
+blockquote {
+ margin: 1em 40px;
+}
+dfn {
+ font-style: italic;
+}
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+ins {
+ background: #ff9;
+ color: #000;
+ text-decoration: none;
+}
+mark {
+ background: #ff0;
+ color: #000;
+ font-style: italic;
+ font-weight: bold;
+}
+pre,
+code,
+kbd,
+samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+pre {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+q {
+ quotes: none;
+}
+q:before,
+q:after {
+ content: none;
+}
+small {
+ font-size: 85%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+ul,
+ol {
+ margin: 1em 0;
+ padding: 0 0 0 40px;
+}
+dd {
+ margin: 0 0 0 40px;
+}
+nav ul,
+nav ol {
+ list-style: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+}
+img {
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+ vertical-align: middle;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+figure {
+ margin: 0;
+}
+form {
+ margin: 0;
+}
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+label {
+ cursor: pointer;
+}
+legend {
+ border: 0;
+ *margin-left: -7px;
+ padding: 0;
+ white-space: normal;
+}
+button,
+input,
+select,
+textarea {
+ font-size: 100%;
+ margin: 0;
+ vertical-align: baseline;
+ *vertical-align: middle;
+}
+button,
+input {
+ line-height: normal;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+ *overflow: visible;
+}
+button[disabled],
+input[disabled] {
+ cursor: default;
+}
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+ *width: 13px;
+ *height: 13px;
+}
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+textarea {
+ overflow: auto;
+ vertical-align: top;
+ resize: vertical;
+}
+input:valid,
+textarea:valid,
+input:invalid,
+textarea:invalid {
+ background-color: #f0dddd;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+td {
+ vertical-align: top;
+}
+.clearfix:before,
+.clearfix:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ visibility: hidden;
+}
+.clearfix:after {
+ clear: both;
+}
+.clearfix {
+ zoom: 1;
+}
+#menu {
+ position: fixed;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ width: 155px;
+ background-color: #1c232d;
+ z-index: 300;
+ overflow-y: auto;
+ overflow-x: hidden;
+ -webkit-backface-visibility: hidden;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-box-shadow: #000 1px 0px 1px;
+ -moz-box-shadow: #000 1px 0px 1px;
+ box-shadow: #000 1px 0px 1px;
+}
+#menu .main li {
+ list-style-type: none;
+ padding: 5px;
+ line-height: 12px;
+}
+#menu .main li:hover {
+ background-color: #2a323f;
+}
+#menu .main li:hover a {
+ color: #666;
+}
+#menu .main li a {
+ text-decoration: none;
+ font-size: 12px;
+ color: #777;
+}
+#menu h1 {
+ font-size: 11px;
+ margin: 0px;
+ margin-bottom: 1px;
+ padding: 5px;
+ color: #222;
+ border-top: 1px solid #fff;
+ border-bottom: 1px solid #aaa;
+ background: #e1e4e6;
+ background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
+ -webkit-box-shadow: rgba(0,0,0,0.75) 2px 1px 5px;
+ -moz-box-shadow: rgba(0,0,0,0.75) 2px 1px 5px;
+ box-shadow: rgba(0,0,0,0.75) 2px 1px 5px;
+ text-shadow: #fff 1px 1px 1px;
+}
+#roster li {
+ list-style-type: none;
+ padding: 11px;
+ margin: 0px;
+ position: relative;
+ min-height: 20px;
+ font-size: 11px;
+ color: #fff;
+}
+#roster li:nth-child(2n) {
+ background-color: #1e252f;
+}
+#roster li:hover {
+ background-color: #2a323f;
+}
+#roster li.hasUnread .unread {
+ display: block;
+}
+#roster li.online,
+#roster li.chat {
+ border-left: 2px solid #008000;
+}
+#roster li.dnd {
+ border-left: 2px solid #f00;
+}
+#roster li.away,
+#roster li.xa {
+ border-left: 2px solid #ffa500;
+}
+#roster li.offline {
+ border-left: 2px solid #222;
+ color: #aaa;
+}
+#roster li.offline img {
+ opacity: 0.25;
+}
+#roster li.offline .status {
+ color: #777;
+}
+#roster li.activeContact {
+ background: #35c8ff;
+ background-image: -moz-linear-gradient(top, #35c8ff, #00aeef);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35c8ff), color-stop(1, #00aeef));
+ border-top: 1px solid #8de0ff;
+ border-bottom: 1px solid #004a65;
+}
+#roster li.composing {
+ border-right: 4px solid #ffa500;
+}
+#roster li.paused {
+ border-right: 4px solid #666;
+}
+#roster li img {
+ opacity: 1;
+}
+#roster li .avatar {
+ vertical-align: top;
+ margin-right: 5px;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ width: 30px;
+ height: 30px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ -o-border-radius: 5px;
+ -border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
+ -moz-box-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
+ box-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+#roster li .name {
+ margin: 0px;
+ margin-left: 40px;
+ font-weight: bold;
+ text-shadow: rgba(0,0,0,0.5) -1px -1px 1px;
+}
+#roster li .status {
+ color: #ccc;
+ font-size: 10px;
+ font-style: italic;
+ font-weight: 600;
+ margin: 0px;
+ margin-left: 40px;
+ text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
+}
+#roster li .unread {
+ display: none;
+ color: #fff;
+ padding-left: 5px;
+ padding-right: 5px;
+ -moz-border-radius: 11px;
+ -webkit-border-radius: 11px;
+ -khtml-border-radius: 11px;
+ -o-border-radius: 11px;
+ -border-radius: 11px;
+ border-radius: 11px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ text-align: center;
+ font-weight: bold;
+ background-color: #f00;
+ border: 1px solid #fff;
+ text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
+ -webkit-box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
+ -moz-box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
+ box-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
+}
+.page.chat {
+ padding-top: 0px;
+ height: 100%;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.conversation {
+ position: relative;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ padding: 0px;
+ height: 100%;
+ width: 100%;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.conversation header {
+ padding: 5px;
+ background: #e1e4e6;
+ background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
+ -webkit-box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
+ -moz-box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
+ box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
+ border-bottom: 1px solid #aaa;
+ position: fixed;
+ right: 0px;
+ left: 156px;
+ z-index: 10;
+ font-size: 14px;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ color: #222;
+ font-weight: normal;
+ font-size: 11px;
+}
+.conversation header .avatar {
+ margin-right: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ -o-border-radius: 5px;
+ -border-radius: 5px;
+ border-radius: 5px;
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top: 11px;
+ left: 11px;
+ vertical-align: top;
+}
+.conversation header .name {
+ margin: 15px;
+ padding: 0px;
+ margin-left: 45px;
+ font-size: 14px;
+ line-height: 14px;
+}
+.messages {
+ background: #ecf0f2;
+ font-weight: normal;
+ margin: 0px;
+ padding: 0px;
+ padding-top: 150px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
+ bottom: 75px;
+ width: 100%;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.messages li {
+ position: relative;
+ z-index: 1;
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+ width: 100%;
+ display: block;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.messages .message {
+ color: #33404c;
+ font-size: 12px;
+ margin: 0px;
+ padding: 7px 11px;
+ display: inline-block;
+ padding-right: 11px;
+ min-width: 20px;
+ width: 100%;
+ border-bottom: 1px solid #ccc;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.messages .message.mine {
+ background: #eaf7ff;
+ border-bottom: 1px solid #bbe0fa;
+}
+.messages .message.mine .timestamp {
+ color: #bbe0fa;
+}
+.messages .message.delayed .timestamp:before {
+ content: '@ ';
+}
+.messages .message.edited .timestamp:before {
+ content: 'edited ';
+}
+.messages .message .body {
+ display: inline;
+ word-break: break-word;
+ padding: 0px;
+ margin: 0px;
+ color: #111;
+}
+.messages .message .timestamp {
+ font-size: 12px;
+ color: #bbb;
+ font-weight: bold;
+ float: right;
+ display: block;
+ margin-right: 15px;
+}
+.chatBox {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border-top: 1px solid rgba(0,0,0,0.08);
+ bottom: 0px;
+ position: fixed;
+ right: 0px;
+ left: 156px;
+ z-index: 200;
+}
+.chatBox form {
+ background: #e1e4e6;
+ background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
+ padding: 11px;
+ border-top: 1px solid #fff;
+ border-left: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+}
+.chatBox .formwrap {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ padding-right: 80px;
+ position: relative;
+}
+.chatBox textarea {
+ background-color: #fff;
+ width: 100%;
+ height: 30px;
+ border: 1px solid #ccc;
+ border-top-color: #bbb;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ -o-border-radius: 5px;
+ -border-radius: 5px;
+ border-radius: 5px;
+ -moz-box-shadow: inset rgba(0,0,0,0.1) 0 -1px 3px;
+ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 -1px 3px;
+ box-shadow: inset rgba(0,0,0,0.1) 0 -1px 3px;
+ line-height: 18px;
+ outline: none;
+ resize: none;
+ color: #222f3b;
+ font-size: 14px;
+ -webkit-font-smoothing: antialiased;
+ padding: 5px;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.chatBox textarea:focus {
+ border-color: #bbb;
+ border-top-color: #aaa;
+}
+.chatBox textarea.editing {
+ background-color: #ff0;
+}
+#connectionOverlay {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.5);
+ z-index: 1000;
+ -webkit-transition: all 0.25s linear 0;
+ -o-transition: all 0.25s linear 0;
+ transition: all 0.25s linear 0;
+ -moz-transition: all 0.25s linear 0;
+}
+#connectionOverlay.connected {
+ height: 0px;
+}
+#connectionOverlay.connected #connectionStatus {
+ top: -51px;
+}
+#connectionStatus {
+ height: 50px;
+ line-height: 50px;
+ top: 0px;
+ position: fixed;
+ background-color: #333;
+ border-bottom: 1px solid #000;
+ width: 100%;
+ z-index: 9999;
+ text-align: center;
+}
+#connectionStatus span.message {
+ display: inline-block;
+ padding: 0px 10px;
+ font-weight: bold;
+ font-size: 24px;
+}
+#connectionStatus button {
+ padding: 5px 8px;
+ position: relative;
+ top: -3px;
+}
+body {
+ background: #ecf0f2;
+ color: #222;
+ font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 17px;
+ font-weight: 500;
+ -webkit-font-smoothing: antialiased;
+}
+body #pages {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ left: 156px;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+body #menu {
+ width: 155px;
+}
+.aux header {
+ margin-top: 10%;
+ text-align: center;
+}
+#logo {
+ margin: auto;
+}
+#loginbox {
+ position: relative;
+ margin: auto;
+ margin-top: 5%;
+ padding: 20px;
+ background-color: #fff;
+ width: 75%;
+}
+#loginbox label {
+ display: block;
+ margin-bottom: 5px;
+ font-size: 13px;
+ font-weight: bold;
+ color: #777;
+}
+#loginbox input {
+ width: 100%;
+ display: block;
+ height: 35px;
+ font-size: 14px;
+ padding: 10px 0.5em;
+ margin-bottom: 15px;
+ background-color: #f9fafa;
+ border: 1px solid #eee;
+ color: #2e2d2d;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+#loginbox input:focus {
+ border: 1px solid #a7d9eb;
+ outline: 0px;
+}
+#loginbox button,
+#loginbox .andyetLogin {
+ text-decoration: none;
+ 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;
+ border: none;
+ height: 35px;
+ padding: 0 1em;
+ color: #fff;
+ background-color: #7ec6e2;
+ line-height: 35px;
+ font-size: 16px;
+ cursor: pointer;
+}
+#loginbox .andyetLogin {
+ display: block;
+ float: right;
+ font-size: 14px;
+}
+#loginbox h2 {
+ color: #222;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #f8f8f8;
+}
diff --git a/public/css/otalk.styl b/public/css/otalk.styl
new file mode 100644
index 0000000..fa0affb
--- /dev/null
+++ b/public/css/otalk.styl
@@ -0,0 +1,8 @@
+@import '_reset'
+@import '_variables'
+@import '_mixins'
+@import 'app/roster'
+@import 'app/chat'
+@import 'app/connectionStatus'
+@import 'app/layout'
+@import 'app/aux'
diff --git a/public/logo.png b/public/images/logo.png
similarity index 100%
rename from public/logo.png
rename to public/images/logo.png
diff --git a/public/login.js b/public/js/login.js
similarity index 100%
rename from public/login.js
rename to public/js/login.js
diff --git a/public/logout.js b/public/js/logout.js
similarity index 100%
rename from public/logout.js
rename to public/js/logout.js
diff --git a/public/oauthLogin.js b/public/js/oauthLogin.js
similarity index 100%
rename from public/oauthLogin.js
rename to public/js/oauthLogin.js
diff --git a/public/zepto.js b/public/js/zepto.js
similarity index 100%
rename from public/zepto.js
rename to public/js/zepto.js
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index 8265f81..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,419 +0,0 @@
-html, body {
- font-family: 'lucida grande';
- font-size: 11px;
- padding: 0px;
- margin: 0px;
- background-color: #ecf0f2;
- color: #2e2d2d;
-}
-
-#pages {
- margin-left: 156px;
-}
-
-#log {
- padding: 5px;
-}
-
-#connectionOverlay {
- z-index: 5000;
- left: 0px;
- top: 0px;
- height: 100%;
- width: 100%;
- background-color: rgba(0, 0, 0, .5);
-}
-
-#connectionOverlay {
- display: none;
-}
-
-#me {
- display: none;
-}
-
-nav.main {
- background-color: #1C232D;
- width: 156px;
- border-right: 1px solid black;
- padding: 5px;
- margin: 0px;
- text-align: center;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- position: fixed;
- bottom: 0px;
- left: 0px;
-}
-
-nav.main li {
- display: inline-block;
- margin: 5px;
-}
-
-nav.main a {
- display: block;
- text-decoration: none;
- text-align: center;
- border-radius: 3px;
- border: none;
- height: 20px;
- padding: 0 5px;
- color: white;
- background-color: #333;
- line-height: 20px;
- font-size: 12px;
- cursor: pointer;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
-}
-
-#contactList {
- top: 0px;
- bottom: 40px;
- width: 155px;
- background-color: #1C232D;
- position: fixed;
- overflow-y: auto;
- overflow-x: hidden;
- padding: 0px;
- margin: 0px;
- border-right: 1px solid black;
- color: #efefef;
- text-shadow: 1px 1px 1px #444;
-}
-
-#contactList > li {
- list-style-type: none;
- padding: 10px;
- margin: 0px;
- position: relative;
-}
-
-#contactList li:nth-child(2n) {
- background-color: #1e252f;
-}
-
-#contactList li:hover {
- background-color: #2a323f;
-}
-
-.contact {
- min-height: 20px;
-}
-
-.contact .avatar {
- vertical-align: top;
- margin-right: 5px;
- border-radius: 5px;
- width: 30px;
- height: 30px;
- position: absolute;
- left: 5px;
- top: 5px;
-}
-
-.contact .name {
- margin: 0px;
- margin-left: 40px;
-}
-
-.contact .status {
- color: #ccc;
- font-style: italic;
- font-size: 10px;
- margin: 0px;
- margin-left: 40px;
-}
-
-.contact.offline img {
- opacity: 0.25;
-}
-
-.contact.online img, .contact.chat img {
- opacity: 1;
-}
-
-.contact.dnd img {
- opacity: 1;
-}
-
-.contact.away img, .contact.xa img {
- opacity: 1;
-}
-
-.contact.online, .contact.chat {
- border-left: 2px solid green;
-}
-
-.contact.away {
- border-left: 2px solid orange;
-}
-
-.contact.dnd {
- border-left: 2px solid red;
-}
-
-.contact.xa {
- border-left: 2px solid orange;
-}
-
-.contact.offline {
- border-left: 2px solid #222;
- color: #aaa;
-}
-
-.contact.composing {
- border-right: 4px solid orange;
-}
-
-.contact.paused {
- border-right: 4px solid #666;
-}
-
-.contact.offline .status {
- color: #777;
-}
-
-.contact.activeContact {
- background-color: #35c8ff;
- background-image: -moz-linear-gradient(top, #35c8ff, #00aeef);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35c8ff), color-stop(1, #00aeef));
-}
-
-.chatView {
- position: relative;
-}
-
-#conversation {
- background: #ecf0f2;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- bottom: 0;
- margin: 0;
- padding-bottom: 30px;
- max-width: 100%;
- padding: 0;
- overflow-x: hidden;
- position: relative;
- margin-top: 50px;
- padding-top: 50px;
- bottom: 50px;
-}
-
-#conversation li {
- position: relative;
- z-index: 1;
- list-style: none;
- margin: 0;
- padding: 0;
- width: 100%;
- display: block;
-}
-
-#conversation .message {
- color: #33404c;
- font-size: 11px;
- padding: 7px 10px;
- display: inline-block;
- margin: 0;
- padding-right: 10px;
- min-width: 20px;
- width: 100%;
- border-bottom: 1px solid #ccc;
-/* background: #f1fce7; */
-}
-
-#conversation .body {
- display: inline;
- word-break: break-word;
- padding: 0;
- margin: 0;
- color: #111;
-}
-
-#conversation .message.mine {
- background: #EAF7FF;
- border-bottom: 1px solid #BBE0FA;
-}
-
-#conversation .timestamp {
- font-size: 11px;
- color: #bbb;
- font-weight: bold;
- float: right;
- display: block;
- margin-right: 15px;
-}
-
-#conversation .mine .timestamp {
- color: #BBE0FA;
-}
-
-.delayed .timestamp:before {
- content: '@ '
-}
-
-.edited .timestamp:before {
- content: 'edited '
-}
-
-.contactInfo {
- padding: 5px;
- background-color: #e1e4e6;
- background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
- -webkit-box-shadow: color 2px 1px 5px;
- -moz-box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
- box-shadow: rgba(0,0,0,0.1) 2px 1px 5px;
- border-bottom: 1px solid #aaa;
- min-height: 30px;
- position: fixed;
- top: 0px;
- width: 100%;
- z-index: 1000;
-}
-
-.contactInfo .avatar {
- float: left;
- margin-right: 5px;
- border-radius: 5px;
- width: 30px;
- height: 30px;
- position: absolute;
- top: 10px;
- left: 10px;
-}
-
-.contactInfo .name {
- margin-left: 45px;
- font-size: 14px;
-}
-
-.contact .unread {
- display: none;
- color: white;
- width: 20px;
- border-radius: 10px;
- position: absolute;
- top: 20px;
- left: 20px;
- text-align: center;
- background-color: red;
-}
-
-.contact.hasUnread .unread {
- display: block;
-}
-
-#chatInput {
- position: fixed;
- bottom: 0px;
- left: 156px;
- right: 0px;
- z-index: 100;
- background: #ecf0f2;
-}
-
-#chatInput form {
- background-color: #e1e4e6;
- background-image: -moz-linear-gradient(top, #e1e4e6, #cacdce);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e1e4e6), color-stop(1, #cacdce));
- padding: 10px;
- z-index: 1000;
- border-top: 1px solid #fff;
- border-left: 1px solid #ddd;
- border-right: 1px solid #ddd;
-}
-
-#chatBuffer {
- width: 100%;
- padding: 5px;
- height: 30px;
- line-height: 20px;
- font-size: 13px;
- resize: none;
- outline: none;
- border: 1px solid #ccc;
- border-top-color: #bbb;
- border-radius: 5px;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- font-family: 'lucida grande';
-}
-
-#chatBuffer.editing {
- background-color: yellow;
-}
-
-#loginbox {
- position: relative;
- margin: auto;
- margin-top: 5%;
- padding: 20px;
- background-color: white;
- width: 75%;
-}
-#loginbox label {
- display: block;
- margin-bottom: 5px;
- font-size: 13px;
- font-weight: bold;
- color: #777;
-}
-#loginbox input {
- width: 100%;
- display: block;
- height: 35px;
- font-size: 14px;
- padding: 10px 0.5em;
- margin-bottom: 15px;
- background-color: #f9fafa;
- border: 1px solid #eeeeee;
- color: #2e2d2d;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
-}
-#loginbox input:focus {
- border: 1px solid #a7d9eb;
- outline: 0px;
-}
-button, .andyetLogin {
- text-decoration: none;
- text-align: center;
- border-radius: 3px;
- border: none;
- height: 35px;
- padding: 0 1em;
- color: white;
- background-color: #7ec6e2;
- line-height: 35px;
- font-size: 16px;
- cursor: pointer;
-}
-#loginbox h2 {
- padding-bottom: 10px;
- border-bottom: 1px solid #f8f8f8
-}
-.andyetLogin {
- display: block;
- float: right;
- font-size: 14px;
-}
-.aux header {
- margin-top: 10%;
- text-align: center;
-}
-#logo {
- margin: auto;
-}
-
-.enableAlerts {
- display: none;
-}
-.enableAlerts.shouldAskForAlertsPermission {
- display: block;
- font-size: 12px;
- height: 20px;
- line-height: 20px;
-}
diff --git a/server.js b/server.js
index 7b60755..f2879d6 100644
--- a/server.js
+++ b/server.js
@@ -28,7 +28,7 @@ var clientApp = new Moonboots({
__dirname + '/clientapp/libraries/stanza.io.js'
],
stylesheets: [
- __dirname + '/public/style.css'
+ __dirname + '/public/css/otalk.css'
],
browserify: {
debug: false
diff --git a/views/layout.jade b/views/layout.jade
index 02eea87..952ca63 100644
--- a/views/layout.jade
+++ b/views/layout.jade
@@ -5,13 +5,13 @@ html
meta(name="viewport", content="width=device-width, initial-scale=1, user-scalable=no")
- link(rel="stylesheet", href="/styles.css")
+ link(rel="stylesheet", href="/css/otalk.css")
block head
body.aux
header
- img#logo(src="/logo.png", alt="OTalk")
+ img#logo(src="/images/logo.png", alt="OTalk")
block content
- script(src='/zepto.js')
+ script(src='/js/zepto.js')
script(src='//static.andyet.com/tag.js')
block scripts
diff --git a/views/login.jade b/views/login.jade
index ca6fe05..1d7bbdf 100644
--- a/views/login.jade
+++ b/views/login.jade
@@ -18,4 +18,4 @@ block content
button(type='submit', tabindex='3') Go!
block scripts
- script(src="/login.js")
+ script(src="/js/login.js")
diff --git a/views/logout.jade b/views/logout.jade
index 0b60f97..437d94d 100644
--- a/views/logout.jade
+++ b/views/logout.jade
@@ -1,4 +1,4 @@
extends layout
block scripts
- script(src="/logout.js")
+ script(src="/js/logout.js")
diff --git a/views/oauthLogin.jade b/views/oauthLogin.jade
index 80aedb6..d8af4ee 100644
--- a/views/oauthLogin.jade
+++ b/views/oauthLogin.jade
@@ -1,4 +1,4 @@
extends layout
block scripts
- script(src="/oauthLogin.js")
+ script(src="/js/oauthLogin.js")