Minor changes

client/css/style.css

@@ -12,16 +12,12 @@ h2 {
 	margin: 0;
 }
 a {
+	color: #1abc9c;
 	text-decoration: none;
-}
-a,
-.user {
-	color: #16a085;
 	transition: all .25s;
 }
-a:hover,
-.user:hover {
-	color: #1abc9c;
+a:hover {
+	text-decoration: underline;
 }
 a:focus,
 button:focus,
@@ -74,7 +70,7 @@ button::-moz-focus-inner {
 }
 #sidebar button {
 	border-radius: 2px;
-	color: #16a085;
+	color: #1abc9c;
 	display: block;
 	font-size: 15px;
 	font-weight: bold;
@@ -88,7 +84,6 @@ button::-moz-focus-inner {
 }
 #sidebar button:hover {
 	background-color: #f1f2f3;
-	color: #1abc9c;
 }
 #sidebar button.active {
 	background-color: #ebedef;
@@ -138,6 +133,9 @@ button::-moz-focus-inner {
 	font: 13px "Consolas", monospace;
 	height: 100%;
 }
+#chat .lobby .from {
+	display: none;
+}
 #chat .lobby .messages,
 #chat .query .messages {
 	right: 0;
@@ -150,7 +148,7 @@ button::-moz-focus-inner {
 #chat .users {
 	bottom: 35px;
 	overflow: hidden;
-	overflow-y: auto;
+	overflow-y: scroll;
 	position: absolute;
 	top: 0;
 }
@@ -159,6 +157,12 @@ button::-moz-focus-inner {
 	padding: 2px 0;
 	right: 160px;
 }
+#chat .messages .user {
+	color: #95a5a6;
+}
+#chat .messages .user:before {
+	content: '* ';
+}
 #chat .show-more {
 	display: none;
 	margin: 6px 8px 4px;
@@ -174,11 +178,32 @@ button::-moz-focus-inner {
 #chat .type {
 	color: #bdc3c7;
 }
-#chat .motd .type,
-#chat .notice .type,
-#chat .whois .type {
+#chat .users .user,
+#chat .normal .user {
+	color: #e74c3c;
+	transition: all .25s;
+}
+#chat .normal .user:before {
+	content: '<';
+}
+#chat .normal .user:after {
+	content: '>';
+}
+#chat .type {
 	display: none;
 }
+#chat .join .type,
+#chat .kick .type,
+#chat .mode .type,
+#chat .nick .type,
+#chat .part .type,
+#chat .topic .type,
+#chat .quit .type {
+	display: inherit;
+} 
+#chat .nick .text {
+	color: #95a5a6;
+}
 #chat .users {
 	background: #fff;
 	border-left: 4px solid #bdc3c7;

client/index.html

@@ -17,10 +17,10 @@
 		<aside id="sidebar">
 			<div id="menu">
 				<h2>Shout Client</h2>
+				<button data-target="#start">Start</button>
 				<button data-target="#settings">Settings</button>
 			</div>
-			<div id="networks">
-			</div>
+			<div id="networks"></div>
 			<footer id="footer">
 				<a href="<%= homepage %>" target="_blank" class="btn">
 					<strong><%= name %></strong>
@@ -30,11 +30,10 @@
 		</aside>
 		<div id="main">
 			<div id="windows">
-				<div id="settings" class="window">
-				</div>
-			</div>
-			<div id="chat">
+				<div id="start" class="window"></div>
+				<div id="settings" class="window"></div>
 			</div>
+			<div id="chat"></div>
 		</div>
 	</div>
 	
@@ -95,9 +94,9 @@
 			<span class="time">
 				{{time}}
 			</span>
-			<button class="user">
-				{{from}}
-			</button>
+			<span class="from">
+				<button class="user">{{from}}</button>
+			</span>
 			<span class="text">
 				{{#if type}}
 				<em class="type">{{type}}</em>

client/js/chat.js

@@ -51,6 +51,7 @@ $(function() {
 				.last()
 				.scrollGlue({speed: 200})
 				.end()
+				.end()
 				.find(".input")
 				.tabComplete({list: commands})
 				.end();
@@ -84,9 +85,10 @@ $(function() {
 			
 			$("#networks")
 				.html(render("networks", {networks: data.networks}))
-				.find(".channel")
-				.last()
-				.addClass("active")
+				.parent()
+				.find("button")
+				.first()
+				.trigger("click")
 				.end();
 			break;
 		
@@ -111,9 +113,9 @@ $(function() {
 		var target = button.data("target");
 		sidebar.find(".active").removeClass("active");
 		button.addClass("active")
-		$(target)
-			.css({"z-index": z++})
-			.find(".input")
+		$(target).css({
+			"z-index": z++
+		}).find("input")
 			.focus()
 			.end();
 	});
@@ -131,13 +133,16 @@ $(function() {
 		if (name == "-!-" || name.indexOf(".") != -1) {
 			return;
 		}
-		console.log({id: id, text: "/whois " + name});
 		socket.emit("input", {
 			id: id,
 			text: "/whois " + name,
 		});
 	});
 	
+	chat.on("focus", ".input", function() {
+		$(this).closest(".window").find(".messages").scrollToBottom();
+	});
+	
 	chat.on("submit", "form", function() {
 		var form = $(this);
 		var input = form.find(".input");
@@ -151,10 +156,7 @@ $(function() {
 			text: text,
 		});
 	});
-	
-	chat.on("focus", ".input", function() {
-		var input = $(this).parents().eq(1).find(".messages").scrollToBottom();
-	});
+
 	
 	Handlebars.registerHelper(
 		"partial", function(id) {

client/js/handlebars.helpers.js

@@ -6,11 +6,11 @@ Handlebars.registerHelper(
 			rows.push(block.fn(i));
 		});
 		var html = "";
-		var hide = rows
+		var hidden = rows
 			.slice(0, Math.max(0, rows.length - limit))
 			.join("");
-		if (hide != "") {
-			html = "<script type='text/html' class='hidden'>" + hide + "</script>";
+		if (hidden != "") {
+			html = "<script type='text/html' class='hidden'>" + hidden + "</script>";
 		}
 		html += rows.slice(-limit).join("");
 		return html;

client/js/jquery.plugins.js

@@ -1,27 +1,3 @@
-/*!
- * uniqueClass
- * https://gist.github.com/erming/11212325
- */
-(function($) {
-	$.fn.uniqueClass = function(name) {
-		return this.addClass(name).siblings().removeClass(name).end();
-	};
-})(jQuery);
-
-/*!
- * bringToTop
- * https://gist.github.com/erming/11193183
- */
-(function($) {
-	var highest = 1;
-	$.fn.bringToTop = function() {
-		return this.css('z-index', highest++).uniqueClass('active')
-			.find(".input")
-			.focus()
-			.end();
-	};
-})(jQuery);
-
 /*!
  * inputHistory
  * https://github.com/erming/inputHistory

lib/models/msg.js

@@ -6,7 +6,7 @@ module.exports = Msg;
 function Msg(attr) {
 	_.merge(this, _.extend({
 		time: moment().format("HH:mm"),
-		type: "",
+		type: "normal",
 		from: "",
 		text: "",
 	}, attr));

lib/models/network.js

@@ -14,7 +14,7 @@ function Network(attr) {
 	
 	// Add lobby
 	this.channels.unshift(
-		new Chan({name: "Status", type: "lobby"})
+		new Chan({name: this.host, type: "lobby"})
 	);
 };
 

lib/server.js

@@ -359,7 +359,7 @@ function event(e, data) {
 			if (w.indexOf(network.client.me) == 0) type = "highlight";
 		});
 		var msg = new Msg({
-			type: type,
+			type: type || "normal",
 			from: data.from,
 			text: text,
 		});
@@ -541,13 +541,22 @@ function event(e, data) {
 					chan: chan,
 				});
 			}
+			var prefix = {
+				hostname: "from",
+				realname: "is",
+				channels: "on",
+				server: "using",
+			};
 			var i = 0;
 			for (var k in data) {
-				if (i++ == 5) break;
+				var key = prefix[k];
+				if (!key) {
+					continue;
+				}
 				var msg = new Msg({
 					type: "whois",
-					from: "-!-",
-					text: k + ": " + data[k],
+					from: data.nickname,
+					text: key + " " + data[k],
 				});
 				chan.messages.push(msg);
 				sockets.emit("msg", {
@@ -555,6 +564,16 @@ function event(e, data) {
 					msg: msg,
 				});
 			}
+			var msg = new Msg({
+				type: "whois",
+				from: data.nickname,
+				text: "End of /WHOIS list.",
+			});
+			chan.messages.push(msg);
+			sockets.emit("msg", {
+				id: chan.id,
+				msg: msg,
+			});
 		}
 		break;
 	}