styling a bit the interface

Author: tomahim

public/css/styles.css

@@ -1,11 +1,43 @@
 #content {
+	width: 750px; 
+	height: 500px;
+	margin: 0 auto;
+}
+
+#content #chat #messages {
 	width: 500px; 
-	height: 300px; 
+}
+
+#content #users {
+	width: 200px; 
+	height: 300px;
+	padding:0;
+	margin:0 0 0 20px;
+	list-style:none;
+	border:1px solid black;
+}
+
+#content #users li {
+	padding-left:10px;
+	width:95%;
+	height:20px;
+}
+
+#content #users li.odd {
+	background-color:#ccc;
+}
+
+#content #chat #messages {
+	min-height: 300px; 
 	margin: 0 0 20px 0; 
 	border: solid 1px #999; 
 	overflow-y: scroll;
 }
 
-input.field {
-	width:350px;
+#content #chat, #content #users {
+	float:left;
+}
+
+.controls input#field {
+	width: 86%;
 }

socket.js

@@ -5,14 +5,14 @@ var users = [];
 module.exports = function (socket) {	
 
     socket.on('disconnect', function () {
-		socket.broadcast.emit('send:message', {message : new_user.name + ' a quitté la discussion'});
+		socket.broadcast.emit('send:message', {message : new_user.name + ' left the conversation'});
 		deleteUser(new_user);
     });
 
     var new_user = addUser();
-    socket.emit('send:message', {message  : '*** Bienvenue sur le chat ' + new_user.name + ' ***' });
+    socket.emit('send:message', {message  : '*** Welcome ' + new_user.name + ' ! ***' });
 
-	socket.broadcast.emit('send:message', {message : new_user.name + ' a rejoint la discussion'});
+	socket.broadcast.emit('send:message', {message : new_user.name + ' join the conversation'});
 
     socket.emit('user:join', {list : users, new_one : new_user});
     socket.broadcast.emit('user:join', {list : users});

views/page.jade

@@ -10,9 +10,12 @@ html(ng-app="tchat")
 		script(src='/socket.io/socket.io.js')
 	body(ng-controller='TchatCtrl')
 		#content
-			div(ng-repeat="msg in messages") {{msg}}
-		.controls
-			input#field(ng-model='message')
-			input#send(type='button', value='Envoyer', ng-click='sendMessage()')
-		#users
-			div(ng-repeat="user in users") {{user}}
+			#chat
+				#messages
+					div(ng-repeat="msg in messages") {{msg}}
+				div.clearer
+				.controls
+					input#field(ng-model='message')
+					input#send(type='button', value='Envoyer', ng-click='sendMessage()')
+			ul#users
+				li(ng-repeat="user in users" ng-class-odd="'odd'") {{user.name}}