Added FontAwesome

client/css/style.css

@@ -126,8 +126,10 @@ button {
 	font: bold 15px Lato;
 	margin-bottom: 6px;
 }
-#sidebar h2 {
-	color: #84d1ff;
+#sidebar .lobby {
+	color: #84d1ff !important;
+	font-size: 15px;
+	font-weight: bold;
 	text-transform: capitalize;
 }
 #sidebar .close {
@@ -168,11 +170,28 @@ button {
 }
 #sidebar .pulse {
 	color: #fff;
-	transition: color 0.2s;
+	transition: color .2s;
 }
 #sidebar .network {
 	margin-top: 30px;
 }
+#sidebar .footer {
+	bottom: 0;
+	height: 50px;
+	left: 0;
+	padding: 0 40px;
+	position: absolute;
+	right: 0;
+}
+#sidebar .footer small {
+	color: #7c838d;
+	display: block;
+	font-size: 12px;
+	opacity: .4;
+	text-align: center;
+	text-transform: uppercase;
+	word-spacing: 3px;
+}
 #main {
 	bottom: 0;
 	left: 220px;
@@ -280,25 +299,24 @@ button {
 	font-size: 15px;
 }
 #chat .header button {
-	background: no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTUuNDk5LDAuMDFIMC41MDFjLTAuMjc1LDAtMC41LDAuMjQtMC41LDAuNTM0djEuOTQ4YzAsMC4yODIsMC4yMjUsMC41MTMsMC41LDAuNTEzaDE0Ljk5OGMwLjI3NSwwLDAuNS0wLjIzLDAuNS0wLjUxMw0KCQkJVjAuNTQ0QzE1Ljk5OSwwLjI1LDE1Ljc3NCwwLjAxLDE1LjQ5OSwwLjAxeiBNMTUuNDk5LDUuMDFIMC41MDFjLTAuMjc1LDAtMC41LDAuMjQtMC41LDAuNTM1djEuOTQ3DQoJCQljMCwwLjI4MywwLjIyNSwwLjUxMywwLjUsMC41MTNoMTQuOTk4YzAuMjc1LDAsMC41LTAuMjMsMC41LTAuNTEzVjUuNTQ0QzE1Ljk5OSw1LjI1LDE1Ljc3NCw1LjAxLDE1LjQ5OSw1LjAxeiBNMTUuNDk5LDEwLjAxDQoJCQlIMC41MDFjLTAuMjc1LDAtMC41LDAuMjQtMC41LDAuNTM1djEuOTQ3YzAsMC4yODEsMC4yMjUsMC41MTIsMC41LDAuNTEyaDE0Ljk5OGMwLjI3NSwwLDAuNS0wLjIzLDAuNS0wLjUxMnYtMS45NDcNCgkJCUMxNS45OTksMTAuMjUsMTUuNzc0LDEwLjAxLDE1LjQ5OSwxMC4wMXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);
-	background-position: 8px 10px;
+	color: #aaa;
 	height: 32px;
-	opacity: .2;
-	transition: all .1s;
+	font-size: 18px !important;
+	opacity: .5;
+	top: 1px;
+	transition: opacity .2s;
 	width: 32px;
 }
 #chat .header button:hover {
-	opacity: .5;
+	opacity: 1;
 }
 #chat .header .lt {
 	left: 4px;
 	position: absolute;
-	top: 4px;
 }
 #chat .header .rt {
 	position: absolute;
 	right: 4px;
-	top: 4px;
 }
 #chat .header .type {
 	text-transform: capitalize;
@@ -543,3 +561,10 @@ button {
 		display: none;
 	}
 }
+
+@media (max-device-width: 767px) {
+	#chat .header .rt,
+	#chat .header .lt {
+		top: 3px;
+	}
+}

client/index.html

@@ -10,6 +10,7 @@
 	
 	<link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/style.css">
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
 	<link rel="stylesheet" href="<%= typeof theme !== "undefined" ? theme : "" %>">
 	
 	<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png" />
@@ -28,8 +29,12 @@
 				<a id="logout" href="" style="display: none;">Sign out</a>
 				<% } %>
 			</section>
-			<div id="networks">
-			</div>
+			<div id="networks"></div>
+			<footer class="footer">
+				<small>
+					Shout <%= version %>
+				</small>
+			</footer>
 		</aside>
 		<div id="main">
 			<div id="windows">
@@ -57,7 +62,6 @@
 		<script type="text/html" class="networks">
 		{{#each networks}}
 		<section id="network-{{id}}" class="network">
-			<h2>{{name}}</h2>
 			{{partial "channels"}}
 		</section>
 		{{/each}}
@@ -93,8 +97,12 @@
 				</div>
 			</div>
 			<header class="header">
-				<button class="lt"></button>
-				<button class="rt"></button>
+				<button class="lt">
+					<i class="fa fa-navicon"></i>
+				</button>
+				<button class="rt">
+					<i class="fa fa-navicon"></i>
+				</button>
 				{{partial "meta"}}
 			</header>
 			<form class="form" data-target="{{id}}">

lib/models/network.js

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