Browse files

Better styling of messages.

  • Loading branch information...
1 parent 6c5070d commit 7f3efc9d3339844d725d6124a31aaaee6309ed62 @seven1m committed Sep 14, 2011
Showing with 15 additions and 6 deletions.
  1. +7 −2 public/app.css
  2. +7 −4 public/room.js
  3. +1 −0 server.js
View
9 public/app.css
@@ -49,7 +49,6 @@ html, body {
margin:5px;
color:#fff;
background:#075698; /* default background for browsers without gradient support */
- /* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
background:-moz-linear-gradient(#2e88c4, #075698);
background:-o-linear-gradient(#2e88c4, #075698);
@@ -58,7 +57,6 @@ html, body {
-moz-border-radius:10px;
border-radius:10px;
margin-left:40px;
- background:#075698;
}
.bubble:after {
content:"";
@@ -77,3 +75,10 @@ html, body {
border-width:15px 40px 0 0; /* vary these values to change the angle of the vertex */
border-color:transparent #075698;
}
+.bubble.odd {
+ background:#2e88c4; /* default background for browsers without gradient support */
+ background:-webkit-gradient(linear, 0 0, 0 100%, from(#6da1c4), to(#2e88c4));
+ background:-moz-linear-gradient(#6da1c4, #2e88c4);
+ background:-o-linear-gradient(#6da1c4, #2e88c4);
+ background:linear-gradient(#6da1c4, #2e88c4);
+}
View
11 public/room.js
@@ -38,16 +38,18 @@ $(document).ready(function () {
})[0].focus();
});
-var lastMessageBy;
+var lastMessageBy, lastMessageTime, oddMessage;
function printMessage(message, sound) {
- if(message.who != lastMessageBy) {
+ var when = message.when ? new Date(message.when) : new Date();
+ if(message.who != lastMessageBy || $.format.date(when, 'yyyyMMddHH') != $.format.date(lastMessageTime, 'yyyyMMddHH')) {
+ oddMessage ^= true;
var html;
var imgUrl = 'http://static1.robohash.com/' + encodeURIComponent(message.who);
var avatar = '<a href="' + imgUrl + '"><img class="avatar" src="' + imgUrl + '"/></a>';
- var time = '<span class="timestamp">' + $.format.date(new Date(), 'ddd hh:mm a') + '</span>';
+ var time = '<span class="timestamp">' + $.format.date(when, 'ddd hh:mm a') + '</span>';
var who = '<span class="who">' + message.who + '</span>';
- html = '<br clear="left"/><div class="details">' + avatar + time + '<br/>' + who + '</div><div class="content"><div class="bubble">';
+ html = '<br clear="left"/><div class="details">' + avatar + time + '<br/>' + who + '</div><div class="content"><div class="bubble ' + (oddMessage ? 'odd' : 'even') + '">';
$('#messages').append(html + message.msg + '</div></div>');
} else {
@@ -56,4 +58,5 @@ function printMessage(message, sound) {
$(window).scrollTop($('#messages').attr('scrollHeight') + 100);
$('#' + sound + 'Sound')[0].play();
lastMessageBy = message.who;
+ lastMessageTime = when;
}
View
1 server.js
@@ -87,6 +87,7 @@ io.sockets.on('connection', function (socket) {
socket.get('name', function(err, name) {
if(name) {
message.who = name;
+ message.when = new Date();
socket.get('room', function(err, room) {
socket.broadcast.in(room).emit('message', message);
});

0 comments on commit 7f3efc9

Please sign in to comment.