Implemented flat UI design

client/index.html

@@ -19,12 +19,20 @@
 	<aside id="sidebar"></aside>
 	<div id="chat"></div>
 	
+	<footer id="footer">
+	<a href="<%= homepage %>" target="_blank" class="btn">
+		<strong><%= name %></strong>
+		<%= version %>
+	</a>
+	</footer>
+	
 	</div>
 	</div>
 	
 	<script type="text/html" id="networks">
 	{{#each networks}}
 	<div id="network-{{id}}" data-nick="{{nick}}" class="network">
+		<h2 class="header">{{host}}</h2>
 		{{partial "#channels"}}
 	</div>
 	{{/each}}
@@ -41,16 +49,12 @@
 	<script type="text/html" id="windows">
 	{{#each windows}}
 	<div id="window-{{id}}" class="window {{type}}">
-		<div class="title">
-			<h1>{{name}}</h1>
-			<button class="close">Close</button>
-		</div>
 		<div class="users">
 			{{partial "#users"}}
 		</div>
 		<div class="messages">
 			<div class="show-more">
-				<button class="show-more-button">Show more</button>
+				<button class="btn">Show more</button>
 			</div>
 			{{partial "#messages"}}
 		</div>
@@ -74,7 +78,7 @@
 	</script>
 	
 	<script type="text/html" id="messages">
-	{{#slice messages limit="200"}}
+	{{#slice messages limit="20"}}
 	<div class="msg {{type}}">
 		<span class="time">
 			{{time}}
@@ -82,14 +86,13 @@
 		<button class="user">
 			{{from}}
 		</button>
-		{{#if type}}
-		<span class="type">
-			{{type}}
-		</span>
-		{{/if}}
 		<span class="text">
+			{{#if type}}
+			<em class="type">{{type}}</em>
+			{{/if}}
 			{{{uri text}}}
 		</span>
+
 	</div>
 	{{/slice}}
 	</script>

client/js/chat.js

@@ -108,12 +108,7 @@ $(function() {
 			break;
 		
 		case "users":
-			var users = $.map(data.users, function(u) { return u.name; });
-			var tabComplete = commands.concat(users);
 			$("#window-" + data.id)
-				.find(".input")
-				.data("list", tabComplete)
-				.end()
 				.find(".users")
 				.html(render("#users", {users: data.users}))
 				.end();
@@ -159,7 +154,7 @@ $(function() {
 		});
 	});
 	
-	chat.on("click", ".show-more-button", function() {
+	chat.on("click", ".show-more .btn", function() {
 		var more = $(this).parent();
 		var html = $.parseHTML(more.next(".hidden").remove().html());
 		more.replaceWith(html);

client/style.css

@@ -3,10 +3,22 @@
 }
 html,
 body {
-	font: 12px "Consolas", monospace;
+	background: #fff;
+	color: #34495e;
+	font: 13px Helvetica, Arial, sans-serif;
 	height: 100%;
 	margin: 0;
 }
+a,
+.user {
+	color: #16a085;
+	text-decoration: none;
+	transition: all .25s;
+}
+a:hover,
+.user:hover {
+	color: #1abc9c;
+}
 a:focus,
 button:focus {
 	outline: 0;
@@ -16,59 +28,103 @@ h2 {
 	font: inherit;
 	margin: 0;
 }
-.user {
+button {
 	background: none;
 	border: 0;
+	color: inherit;
 	font: inherit;
 	margin: 0;
 	padding: 0;
 }
-
+button {
-.user:hover {
-	color: #f00;
 	cursor: pointer;
 }
-.user::-moz-focus-inner {
+button::-moz-focus-inner {
-    padding: 0;
+	padding: 0;
-    border: 0
+	border: 0;
+}
+.btn {
+	border: 2px solid #bdc3c7;
+	border-radius: 3px;
+	color: #aeb6bf;
+	font: 14px Helvetica, Arial, sans-serif;
+	padding: 8px 12px;
+	text-decoration: none;
+	transition: all .25s;
+}
+.btn:hover {
+	border-color: #7f8c8d;
+	color: #7f8c8d;
+}
+.badge {
+	background-color: #d8dce0;
+	border-radius: 4px;
+	color: #ffffff;
+	font-size: 13px;
+	line-height: 1.615;
+	padding: 0 8px;
 }
 #wrap,
 #viewport {
 	height: 100%;
-	min-width: 640px;
+	min-width: 720px;
 	position: relative;
 	width: 100%;
 }
 #sidebar {
-	border-right: 1px solid #e1e1e8;
+	border-right: 4px solid #bdc3c7;
 	float: left;
 	height: 100%;
+	padding: 20px;
 	width: 200px;
 }
-#sidebar .network {
+#sidebar .network + .network {
-	margin: 20px;
+	border-top: 2px solid #ebedef;
+	margin-top: 14px;
+	padding-top: 14px;
+}
+#sidebar .header {
+	color: #aeb6bf;
+	font-size: 13px;
+	font-weight: bold;
+	padding: 6px 12px;
+	text-transform: uppercase;
 }
 #sidebar .channel {
+	border-radius: 2px;
+	color: #16a085;
 	display: block;
-	margin: 5px;
+	font-size: 15px;
-	margin-left: 10px;
+	font-weight: bold;
+	line-height: 1.2;
+	padding: 6px 12px;
+	text-align: left;
+	transition: all .25s;
+	width: 100%;
 }
-#sidebar .channel:first-child {
+#sidebar .channel + .channel {
-	margin-left: 0;
+	margin-top: 3px;
+}
+#sidebar .channel:hover {
+	background-color: #f1f2f3;
+	color: #1abc9c;
+}
+#sidebar .channel.active {
+	background-color: #ebedef;
+	color: #526476;
 }
 #chat {
+	background: #fff;
 	bottom: 0;
+	font: 12px "Consolas", monospace;
 	left: 200px;
 	line-height: 16px;
 	position: absolute;
 	right: 0;
 	top: 0;
 }
-#chat a {
-	color: inherit;
-}
 #chat form {
-	border-top: 1px solid #ddd;
+	border-top: 1px solid #bdc3c7;
 	bottom: 1px;
 	height: 30px;
 	left: 0;
@@ -89,8 +145,6 @@ h2 {
 #chat .lobby .close {
 	display: none;
 }
-#chat .query .title,
-#chat .lobby .title,
 #chat .query .messages,
 #chat .lobby .messages {
 	right: 0;
@@ -101,95 +155,76 @@ h2 {
 	position: absolute;
 	width: 100%;
 }
-#chat .close {
-	float: right;
-	margin-top: 10px;
-}
-#chat .title {
-	border-bottom: 1px solid #ddd;
-	height: 42px;
-	left: 0;
-	overflow: hidden;
-	padding: 0 10px;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-#chat .title h1 {
-	color: #333;
-	display: inline-block;
-	font-size: 18px;
-	line-height: 42px;
-}
 #chat .messages {
-	box-shadow: inset 8px 0 0 #f5f5f5;
 	bottom: 30px;
 	left: 0;
 	overflow-y: auto;
-	padding: 4px 0;
+	padding: 0 8px 4px;
 	position: absolute;
 	right: 160px;
-	top: 42px;
+	top: 0;
 	word-wrap: break-word;
 	z-index: 0;
 }
 #chat .show-more {
 	display: none;
-	padding: 2px 8px 0 16px;
+	margin-top: 4px;
+	padding: 2px 0;
 }
-#chat .show-more-button {
+#chat .show-more .btn {
-	padding: 6px 0;
 	width: 100%;
 }
 #chat .msg {
-	border-left: 8px solid transparent;
+	margin: 4px 0;
-	line-height: 1.3em;
-	padding: 2px 8px;
 }
 #chat .time {
-	color: #aaa;
+	color: #bdc3c7;
-}
-#chat .highlight {
-	background: #fcf8e3;
-	border-left-color: #faebcc;
-}
-#chat .user {
-	color: #f00;
 }
 #chat .error,
 #chat .join,
 #chat .kick,
 #chat .mode,
+#chat .motd,
 #chat .nick,
 #chat .notice,
 #chat .part,
 #chat .quit,
 #chat .topic,
 #chat .whois {
-	color: #888;
+	color: #95a5a6;
 }
-#chat .highlight .type,
 #chat .motd .type,
 #chat .notice .type,
 #chat .whois .type {
 	display: none;
 }
 #chat .users {
-	background: #fff;
+	border-left: 4px solid #bdc3c7;
-	border-left: 1px solid #ddd;
 	bottom: 30px;
-	line-height: 1.4em;
 	overflow-y: auto;
-	padding: 4px 8px;
+	padding-bottom: 6px;
 	position: absolute;
 	right: 0;
-	top: 42px;
+	top: 0;
 	width: 160px;
 }
 #chat .users .count {
-	color: #888;
+	background: #ecf0f1;
+	color: #aeb6bf;
+	margin-bottom: 4px;
+	padding: 8px 12px;
 }
 #chat .users .user {
 	display: block;
-	padding: 2px 0;
+	padding: 4px 12px;
+}
+#footer {
+	bottom: 0;
+	position: absolute;
+	text-align: center;
+	width: 195px;
+}
+#footer .btn {
+	display: block;
+	margin: 20px;
 }

config.js

@@ -1,6 +1,6 @@
 module.exports = {
 	port: 9000,
-	theme: "/themes/default.css",
+	theme: "",
 	defaults: {
 		nick: "shout_user",
 		realname: "http://github.com/erming/shout",

lib/models/chan.js

@@ -12,18 +12,16 @@ function Chan(attr) {
 	}, attr));
 };
 
-Chan.prototype = {
+Chan.prototype.sortUsers = function() {
-	sortUsers: function() {
+	this.users = _.sortBy(
-		this.users = _.sortBy(
+		this.users,
+		function(u) { return u.name.toLowerCase(); }
+	);
+	var modes = ["+", "@"];
+	modes.forEach(function(mode) {
+		this.users = _.remove(
 			this.users,
-			function(u) { return u.name.toLowerCase(); }
+			function(u) { return u.mode == mode; }
-		);
+		).concat(this.users);
-		var modes = ["+", "@"];
+	}, this);
-		modes.forEach(function(mode) {
-			this.users = _.remove(
-				this.users,
-				function(u) { return u.mode == mode; }
-			).concat(this.users);
-		}, this);
-	}
 };

lib/models/network.js

@@ -14,12 +14,18 @@ function Network(attr) {
 	
 	// Add lobby
 	this.channels.unshift(
-		new Chan({name: this.host, type: "lobby"})
+		new Chan({name: "Status", type: "lobby"})
 	);
 };
 
-Network.prototype = {
+Network.prototype.toJSON = function() {
-	toJSON: function() {
+	var copy = _.omit(
-		return _.omit(this, "client");
+		this,
+		"client"
+	);
+	var name = copy.host.split(".")[1];
+	if (name) {
+		copy.host = name;
 	}
+	return copy;
 };

lib/server.js

@@ -15,7 +15,7 @@ var User = require("./models/user");
 
 var sockets = null;
 var networks = [
-	new Network({host: "Status"})
+	new Network({host: "Shout Client"})
 ];
 
 var events = [
@@ -357,7 +357,7 @@ function event(e, data) {
 		var type = "";
 		var text = data.message;
 		var network = this;
-		text.split(/ |'|:/).forEach(function(w) {
+		text.split(' ').forEach(function(w) {
 			if (w.indexOf(network.client.me) == 0) type = "highlight";
 		});
 		var msg = new Msg({
@@ -433,7 +433,7 @@ function event(e, data) {
 		var chan = channels[0];
 		var msg = new Msg({
 			type: "notice",
-			from: data.to == "*" ? "-!-" : data.from,
+			from: (data.to == "*" ? "-!-" : data.from) || "-!-",
 			text: data.message,
 		});
 		chan.messages.push(msg);

package.json

@@ -2,6 +2,7 @@
   "name": "shout",
   "description": "The modern IRC client",
   "version": "1.0.0-alpha1",
+  "homepage": "http://github.com/erming/shout",
   "author": {
     "name": "Mattias Erming",
     "email": "mattias@mattiaserming.com"