Re-design

client/css/style.css

@@ -1,14 +1,23 @@
+/* http://www.google.com/fonts/specimen/Lato */
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
+
 * {
 	box-sizing: border-box;
 }
 html,
 body {
 	height: 100%;
-	font: 14px sans-serif;
+	font: 14px Lato, sans-serif;
 	margin: 0;
 }
+a {
+	color: inherit; 
+	text-decoration: none;
+}
 h1,
 h2 {
+	font: inherit;
+	line-height: inherit;
 	margin: 0;
 }
 ul,
@@ -17,232 +26,151 @@ li {
 	margin: 0;
 	padding: 0;
 }
-a {
-	color: #1abc9c;
-	text-decoration: none;
-	transition: all .25s;
-	word-break: break-all;
-}
-a:hover {
-	text-decoration: underline;
-}
-a:focus,
-button:focus,
-input {
-	outline: 0;
-}
-button {
-	background: none;
-	border: 0;
-	color: inherit;
-	cursor: pointer;
-	font: inherit;
-	margin: 0;
-	padding: 0;
-}
-button::-moz-focus-inner {
-	padding: 0;
-	border: 0;
-}
-.btn {
-	border: 2px solid #bdc3c7;
-	border-radius: 3px;
-	color: #aeb6bf;
-	padding: 8px 12px;
-	text-decoration: none;
-	transition: all .25s;
-}
-.btn:hover {
-	border-color: #7f8c8d;
-	color: #7f8c8d;
-	text-decoration: none;
-}
-#wrap {
-	height: 100%;
-	min-width: 640px;
-	width: 100%;
-}
 #sidebar {
-	border-right: 4px solid #bdc3c7;
+	background: #262c36;
+	bottom: 0;
+	left: 0;
+	line-height: 2em;
+	padding: 50px;
 	position: absolute;
-	overflow-y: auto;
+	top: 0;
-	height: 100%;
+	width: 240px;
-	width: 220px;
 }
-#sidebar h2 {
+#sidebar a {
-	color: #aeb6bf;
+	color: #7c838d;
-	font: bold 13px sans-serif;
-	padding: 6px 12px;
-	text-transform: uppercase;
-}
-#networks {
-	margin: 20px;
-}
-#networks .network + .network {
-	border-top: 2px solid #ebedef;
-	margin-top: 14px;
-	padding-top: 14px;
-}
-#networks .channel {
-	border-radius: 3px;
-	color: #1abc9c;
 	display: block;
-	font-size: 15px;
+	font: 14px Lato;
-	font-weight: bold;
+	transition: all .1s;
-	line-height: 21px;
+	padding: 5px 0;
-	margin-bottom: 3px;
+	position: relative;
-	padding: 6px 13px;
-	text-align: left;
-	transition: all .25s;
-	white-space: nowrap;
-	width: 100%;
 }
-#networks button.active {
+#sidebar a:hover,
-	background-color: #ebedef;
+#sidebar a.active {
-	color: #526476;
+	color: #fff;
 }
-#networks button:hover {
+#sidebar a:hover .badge {
-	background-color: #f1f2f3;
-}
-#networks button:hover .badge {
 	opacity: 0;
 }
-#networks button:hover .close {
+#sidebar a:hover .close {
-	opacity: .2;
+	opacity: .4;
 }
-#networks .close {
+#sidebar h1,
-	background: no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0xMi44NzIsMS41NjJjMC4xOTUsMC4xOTQsMC4xOTUsMC41MTMsMCwwLjcwN0w4Ljk4Myw2LjE2Yy0wLjE5MywwLjE5NC0wLjE5MywwLjUxMywwLDAuNzA4bDMuODg3LDMuODkyDQoJYzAuMTk1LDAuMTk0LDAuMTk1LDAuNTEzLDAsMC43MDdsLTEuNDE2LDEuNDEzYy0wLjE5MywwLjE5NC0wLjUxMiwwLjE5NC0wLjcwNywwTDYuODYyLDguOTg4Yy0wLjE5NC0wLjE5NC0wLjUxMy0wLjE5NC0wLjcwNywwDQoJbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUtMC41MTMsMC4xOTUtMC43MDcsMGwtMS40MTQtMS40MTZjLTAuMTk0LTAuMTkzLTAuMTk0LTAuNTEyLDAtMC43MDdsMy44OS0zLjg4OQ0KCWMwLjE5NC0wLjE5NCwwLjE5NC0wLjUxMywwLTAuNzA4TDAuMTQ4LDIuMjY2Yy0wLjE5NC0wLjE5NS0wLjE5NC0wLjUxMywwLTAuNzA3bDEuNDE1LTEuNDE0YzAuMTk0LTAuMTk0LDAuNTEzLTAuMTk0LDAuNzA3LDANCglsMy44ODUsMy44OTFjMC4xOTQsMC4xOTUsMC41MTMsMC4xOTUsMC43MDcsMC4wMDFsMy44ODgtMy44OWMwLjE5NS0wLjE5MywwLjUxNC0wLjE5MywwLjcwNywwTDEyLjg3MiwxLjU2MnoiLz4NCjwvc3ZnPg0K);
+#sidebar h2 {
+	color: #fff;
+	font: bold 15px Lato;
+}
+#sidebar h2 {
+	color: #84d1ff;
+	margin-bottom: 6px;
+	text-transform: capitalize;
+}
+#sidebar .close {
+	background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBkPSJtMTIuODcyLDEuNTYyYzAuMTk1MDAxLDAuMTk0IDAuMTk1MDAxLDAuNTEzIDAsMC43MDdsLTMuODg5LDMuODkxYy0wLjE5MywwLjE5NCAtMC4xOTMsMC41MTMgMCwwLjcwOGwzLjg4NywzLjg5MmMwLjE5NSwwLjE5NCAwLjE5NSwwLjUxMyAwLDAuNzA3bC0xLjQxNTk5OSwxLjQxM2MtMC4xOTMwMDEsMC4xOTQgLTAuNTEyLDAuMTk0IC0wLjcwNzAwMSwwbC0zLjg4NSwtMy44OTJjLTAuMTk0LC0wLjE5NCAtMC41MTMsLTAuMTk0IC0wLjcwNywwbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUgLTAuNTEzLDAuMTk1IC0wLjcwNywwbC0xLjQxNCwtMS40MTU5OTljLTAuMTk0LC0wLjE5MzAwMSAtMC4xOTQsLTAuNTEyIDAsLTAuNzA3MDAxbDMuODksLTMuODg5YzAuMTk0LC0wLjE5NCAwLjE5NCwtMC41MTMgMCwtMC43MDhsLTMuODg3LC0zLjg5MWMtMC4xOTQsLTAuMTk1IC0wLjE5NCwtMC41MTMgMCwtMC43MDdsMS40MTUsLTEuNDE0YzAuMTk0LC0wLjE5NCAwLjUxMywtMC4xOTQgMC43MDcsMGwzLjg4NSwzLjg5MWMwLjE5NCwwLjE5NSAwLjUxMywwLjE5NSAwLjcwNywwLjAwMWwzLjg4OCwtMy44OWMwLjE5NSwtMC4xOTMgMC41MTQsLTAuMTkzIDAuNzA3LDBsMS40MTUsMS40MTV6Ii8+DQogPC9nPg0KPC9zdmc+);
 	background-size: 50%;
-	background-position: 6px 6px;
+	background-position: 5px 6px;
-	border-radius: 2px;
+	border-radius: 3px;
-	height: 19px;
+	height: 18px;
 	margin-top: 1px;
 	opacity: 0;
 	position: absolute;
-	right: 28px;
+	right: 0;
-	transition: all .25s;
+	transition: all .1s;
-	width: 20px;
+	width: 18px;
 }
-#networks .close:hover {
+#sidebar .close:hover {
-	background-color: rgba(0, 0, 0, .1);
+	background-color: rgba(0, 0, 0, .2);
-	opacity: .6 !important;
+	opacity: .8 !important;
 }
-#networks .badge {
+#sidebar .badge {
-	background: #f7f9fa;
+	background: rgba(255, 255, 255, .1);
-	border-radius: 4px;
+	border-radius: 3px;
-	color: #aeb6bf;
+	color: #afb6c0;
 	float: right;
-	font: 12px sans-serif;
+	font-size: 10px;
-	line-height: 21px;
+	margin-top: 1px;
-	padding: 0 6px;
+	padding: 3px 6px;
-	position: absolute;
+	transition: all .1s;
-	right: 28px;
-	transition: all .25s;
 }
-#networks .badge.highlight {
+#sidebar .badge.highlight {
-	background: #f8e2e2;
+	background: #fff;
-	color: #e74c3c;
+	color: #49505a;
 }
-#networks .badge:empty {
+#sidebar .badge:empty {
 	display: none;
 }
+#sidebar .network {
+	margin-top: 30px;
+}
 #main {
+	background: #f00;
+	bottom: 0;
+	left: 240px;
 	position: absolute;
-	height: 100%;
-	left: 220px;
 	right: 0;
+	top: 0;
 }
 #main .window {
 	background: #fff;
-	height: 100%;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
 	position: absolute;
-	width: 100%;
+	right: 0;
+	top: 0;
 }
 #chat {
 	font: 13px "Consolas", monospace;
-	height: 100%;
+	line-height: 1.5em;
-	position: relative;
 }
-#chat h1 {
+#chat a {
-	font-size: 18px;
+	color: #33b0f7;
-	font-weight: normal;
+	word-break: normal;
 }
-#chat h1:first-letter {
+#chat a:hover {
-	text-transform: uppercase;
+	opacity: .6;
 }
-#chat form {
+#chat .chat {
-	bottom: 0;
-	height: 35px;
-	position: absolute;
-	right: 0;
-	left: 0;
-}
-#chat form .input {
-	border: 0;
-	border-top: 1px solid #bdc3c7;
-	height: 35px;
-	padding: 0 10px;
-	width: 100%;
-}
-#chat form .hint {
-	color: #bdc3c7;
-}
-#chat .lobby .main,
-#chat .query .sidebar {
-	right: 0;
-}
-#chat .lobby .sidebar,
-#chat .query .sidebar {
-	display: none;
-}
-#chat .main,
-#chat .sidebar {
 	bottom: 35px;
-	overflow: hidden;
+	box-shadow: inset 160px 0 #f9f9f9;
+	left: 0;
+	padding: 10px 10px 2px;
 	position: absolute;
+	right: 180px;
 	top: 0;
 }
-#chat .main {
-	left: 0;
-	right: 160px;
-}
-#chat .title {
-	background: #ecf0f1;
-	border-bottom: 1px solid #dbe4e6;
-	box-shadow: 0 4px rgba(0, 0, 0, .05);
-	color: #7f8c8d;
-	height: 44px;
-	line-height: 44px;
-	padding: 0 14px;
-	position: absolute;
-	width: 100%;
-}
-#chat .messages,
-#chat .users {
-	bottom: 0;
-	display: block;
-	overflow: hidden;
-	overflow-y: scroll;
-	position: absolute;
-	top: 44px;
-	width: 100%;
-}
 #chat .messages {
-	box-shadow: inset 140px 0 #f3f5f5;
+	width: 100%;
-	padding: 4px 0;
 }
-#chat .messages .user {
+#chat .messages td {
-	color: #95a5a6;
+	padding-top: 2px;
+	padding-bottom: 2px;
+	vertical-align: top;
+	word-break: break-word;
+	word-wrap: break-word;
 }
-#chat .user,
+#chat td:hover .time {
-#chat .highlight .user,
+	color: #aaa;
-#chat .normal .user,
-#chat .topic .user {
-	color: #e74c3c;
-	transition: all .1s;
 }
-#chat .user:hover {
+#chat .from {
-	color: #000;
+	padding-right: 10px;
+	text-align: right;
+	width: 150px;
+}
+#chat .text {
+	padding-left: 10px;
+}
+#chat .text a {
+	word-break: break-all;
+}
+#chat .type {
+	color: #bbb;
+}
+#chat .action .type,
+#chat .highlight .type,
+#chat .motd .type,
+#chat .normal .type,
+#chat .notice .type {
+	display: none;
 }
 #chat .action,
 #chat .action .user {
@@ -251,78 +179,68 @@ button::-moz-focus-inner {
 #chat .action .user:before {
 	content: '* ';
 }
-#chat .show-more {
+#chat .highlight,
-	display: none;
+#chat .highlight .from a {
-	margin: 4px 8px 4px 148px;
+	color: #f00;
-}
-#chat .show-more .btn {
-	width: 100%;
-}
-#chat .msg {
-	display: table-row;
-	line-height: 1.4;
-}
-#chat .msg span {
-	display: table-cell;
-}
-#chat .from {
-	max-width: 140px;
-	min-width: 140px;
-	overflow: hidden;
-	padding: 2px 8px;
-	text-align: right;
-	white-space: nowrap;
-}
-#chat .type {
-	color: #bdc3c7;
-	display: none;
-}
-#chat .join .type,
-#chat .kick .type,
-#chat .mode .type,
-#chat .nick .type,
-#chat .part .type,
-#chat .topic .type,
-#chat .quit .type {
-	display: inline;
-}
-#chat .text {
-	padding: 2px 8px;
-	width: 100%;
-}
-#chat .nick .text {
-	color: #95a5a6;
-}
-#chat .highlight {
-	background: #fcf8e3;
-	color: #8a6d3b;
-}
-#chat .highlight .from {
-	background: #faebcc;
-}
-#chat .highlight .time {
-	color: #d3c2a5;
 }
 #chat .time {
-	color: #dee0e2;
+	color: #ddd;
-	padding: 2px 10px;
+	text-align: center;
+	width: 50px;
 }
-#chat .sidebar {
+#chat .meta {
-	background: #fff;
+	border: 1px solid #eee;
-	border-left: 4px solid #bdc3c7;
+	border-width: 0 0 1px 1px;
+	color: #ccc;
+	height: 80px;
+	padding: 21px 0 0 21px;
 	right: 0;
-	width: 160px;
+	position: absolute;
+	width: 180px;
+}
+#chat .meta h1 {
+	color: #222;
+	font-size: 15px;
+}
+#chat .meta .type {
+	text-transform: capitalize;
 }
 #chat .users {
-	padding-bottom: 6px;
+	border-left: 1px solid #eee;
-	top: 0;
+	bottom: 0;
-	width: 156px;
+	line-height: 1.6em;
+	overflow-y: auto;
+	padding: 15px 20px;
+	position: absolute;
+	right: 0;
+	top: 80px;
+	width: 180px;
 }
-#chat .users button,
+#chat .users li {
-#chat .users span {
+	display: table-row;
-	padding: 4px 8px;
 }
-#chat .count {
+#chat .users li a {
-	color: #bdc3c7;
+	display: table-cell;
-	margin-top: 6px;
+}
+#chat .form {
+	border-top: 1px solid #eee;
+	bottom: 0;
+	height: 35px;
+	left: 0;
+	position: absolute;
+	right: 180px;
+}
+#chat .form .hint {
+	color: #bbb;
+}
+#chat .form .input {
+	border: none;
+	height: 35px;
+	outline: 0;
+	padding: 0 10px;
+	width: 100%;
+}
+#chat .form .submit {
+	margin-left: -999px;
+	position: absolute;
 }

client/img/play.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100.054" height="99.999" viewBox="-0.052 0.001 100.054 99.999" enable-background="new -0.052 0.001 100.054 99.999"><path fill="#EBEEEF" d="M99.98 59.968s-.01-1.188-2.021-2.002c-8.553-4.242-42.326-20.5-42.326-20.5-1.232-.616-2.229-.616-3.461 0 0 0-40.69 19.967-50.227 24.646-2.01.64-1.981 1.974-1.981 1.974-.021.008-.02 8.983 0 8.979 0 0 .034 1.215 2.021 1.91 8.546 3.845 42.265 19.564 42.265 19.564 1.231.614 2.229.614 3.461 0 0 0 40.562-19.354 50.223-23.727 1.949-.666 2.047-1.926 2.047-1.926.024.012.031-8.911-.001-8.918z"/><path fill="#34495E" d="M30.462 60.748c4.684-2.346 12.275-2.346 16.96 0 4.684 2.344 4.684 6.146 0 8.488-4.685 2.346-12.276 2.346-16.96 0-4.683-2.343-4.683-6.145 0-8.488z"/><path fill="#34495E" d="M53.462 50.748c4.685-2.345 12.275-2.345 16.96 0 4.684 2.344 4.684 6.146 0 8.488-4.685 2.346-12.275 2.346-16.96 0-4.683-2.343-4.683-6.145 0-8.488z"/><path fill="#C0392C" d="M55.586 49.311c3.514-1.758 9.207-1.758 12.721 0 1.625.814 2.498-.138 2.619.928.018.161.02 3.322.004 3.482-.106 1.075-.98 2.136-2.623 2.957-3.514 1.758-9.207 1.758-12.721 0-1.599-.8-2.469-1.826-2.613-2.871-.021-.156-.024-3.312-.016-3.467.075-1.101.951-.19 2.629-1.029z"/><path fill="#E74C3C" d="M55.586 47.311c3.514-1.758 9.207-1.758 12.721 0 3.512 1.758 3.512 4.608 0 6.367-3.514 1.758-9.207 1.758-12.721 0-3.513-1.759-3.513-4.609 0-6.367z"/><path fill="#95A5A6" d="M32.586 59.311c3.513-1.758 9.208-1.758 12.72 0 3.513 1.758 3.513 5.608 0 7.367-3.512 1.758-9.207 1.758-12.72 0-3.513-1.759-3.513-5.61 0-7.367z"/><path fill="#34495E" d="M34.958 25.001v37c0 1.104 1.791 2 4 2s4-.896 4-2v-37h-8z"/><path fill="#2C3E50" d="M34.958 31.445c1.274.353 2.612.556 4 .556 1.387 0 2.725-.204 4-.556v-6.443h-8v6.443z"/><path fill="#E74C3C" d="M38.958.001c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15z"/><path fill="#C0392C" d="M26.958 12.001c0-3.376 1.129-6.481 3.012-8.988-3.644 2.737-6.012 7.081-6.012 11.988 0 8.284 6.716 15 15 15 4.908 0 9.251-2.368 11.986-6.012-2.506 1.883-5.61 3.012-8.986 3.012-8.284 0-15-6.716-15-15z"/><path fill="#BDC3C7" d="M99.98 68.887s-.099 1.26-2.047 1.926c-9.66 4.371-50.224 23.726-50.224 23.726-1.232.615-2.229.615-3.461 0 0 0-33.719-15.718-42.265-19.562-1.987-.694-2.021-1.91-2.021-1.91-.006.001-.01-.856-.012-2.039-.006 2.642-.001 7.041.012 7.039 0 0 .034 1.216 2.021 1.91 8.548 3.843 42.267 19.562 42.267 19.562 1.231.614 2.229.614 3.461 0 0 0 40.562-19.354 50.223-23.727 1.949-.666 2.047-1.926 2.047-1.926.02.008.025-4.646.02-7.231-.007 1.281-.013 2.236-.021 2.232z"/><path fill="#D4D7DA" d="M99.977 59.917c-.021.149-.227 1.272-2.043 1.896-9.66 4.371-50.223 23.726-50.223 23.726-1.232.615-2.229.615-3.461 0 0 0-33.718-15.718-42.265-19.562-1.959-.685-2.02-1.869-2.021-1.903v.014c-.021.006-.02 8.983 0 8.979 0 0 .034 1.216 2.021 1.91 8.546 3.843 42.265 19.562 42.265 19.562 1.231.614 2.229.614 3.461 0 0 0 40.562-19.354 50.223-23.727 1.949-.666 2.047-1.926 2.047-1.926.024.012.031-8.912 0-8.918l-.004-.051z"/><path fill="#BDC3C7" d="M44.25 85.539s-33.718-15.719-42.265-19.562c-1.959-.687-2.02-1.869-2.021-1.903v.014c-.021.008-.02 8.983 0 8.979 0 0 .034 1.216 2.021 1.91 8.546 3.843 42.265 19.562 42.265 19.562.615.307 1.173.461 1.73.461v-9c-.557 0-1.115-.154-1.73-.461z"/><path fill="#95A5A6" d="M44.25 94.539s-33.718-15.719-42.265-19.562c-1.987-.694-2.021-1.91-2.021-1.91-.006.001-.01-.854-.012-2.039-.006 2.642-.001 7.041.012 7.039 0 0 .034 1.216 2.021 1.91 8.546 3.843 42.265 19.562 42.265 19.562.616.308 1.173.461 1.73.461v-5c-.557 0-1.115-.154-1.73-.461z"/></svg>

client/index.html

@@ -13,9 +13,14 @@
 	</head>
 	<body>
 	
-	<div id="wrap" class="table">
+	<div id="viewport">
+	<div id="wrap">
 		<aside id="sidebar">
-			<div id="networks"></div>
+			<section>
+				<h1>Shout</h1>
+			</section>
+			<div id="networks">
+			</div>
 		</aside>
 		<div id="main">
 			<div id="windows">
@@ -25,24 +30,25 @@
 			</div>
 		</div>
 	</div>
+	</div>
 	
 	<div id="templates">
 		<script type="text/html" class="networks">
 		{{#each networks}}
-		<div id="network-{{id}}" class="network">
+		<section id="network-{{id}}" class="network">
 			<h2>{{name}}</h2>
 			{{partial "channels"}}
-		</div>
+		</section>
 		{{/each}}
 		</script>
 		
 		<script type="text/html" class="channels">
 		{{#each channels}}
-		<button id="channel-{{id}}" class="channel {{type}}" data-target="#window-{{id}}">
+		<a href="#window-{{id}}" id="channel-{{id}}" class="{{type}}">
 			<span class="badge"></span>
 			<span class="close"></span>
 			{{name}}
-		</button>
+		</a>
 		{{/each}}
 		</script>
 		
@@ -50,71 +56,67 @@
 		{{#each windows}}
 		<div id="window-{{id}}" class="window {{type}}">
 			<div class="chat">
-				<div class="main">
+				<table class="messages">
-					<ul class="messages">
-						<li class="show-more">
-							<button class="btn">Show more</button>
-						</li>
 					{{partial "messages"}}
-					</ul>
+				</table>
-					<div class="title">
+			</div>
+			<div class="meta">
 				<h1>
-						{{type}}:
+					{{name}}
-						<strong>{{name}}</strong>
 				</h1>
+				{{#if users}}
+				<div class="count">
+					Users:
+					{{users.length}}
 				</div>
+				{{else}}
+				<div class="type">
+					{{type}}
+				</div>
+				{{/if}}
 			</div>
-				<aside class="sidebar">
 			<ul class="users">
 				{{partial "users"}}
 			</ul>
-				</aside>
+			<form class="form" data-target="{{id}}">
-			</div>
+				<input class="submit" tabindex="-1" type="submit" >
-			<form class="form" onSubmit="return false" data-target="{{id}}">
 				<input class="input">
-				<input type="submit" style="display: none">
 			</form>
 		</div>
 		{{/each}}
 		</script>
 		
 		<script type="text/html" class="users">
-		<li class="count">
-			<span>
-			Users:
-			{{users.length}}
-			</span>
-		</li>
 		{{#each users}}
 		<li>
-			<button class="user">
+			<a href="#{{name}}" class="user">
 				{{mode}}{{name}}
-			</button>
+			</a>
 		</li>
 		{{/each}}
 		</script>
 		
 		<script type="text/html" class="messages">
-		{{#slice messages limit=100}}
+		{{#each messages}}
-		<li class="msg {{type}}">
+		<tr class="msg {{type}}">
-			<span class="from">
+			<td class="from">
-				<button class="user">
+				<a href="#{{from}}" class="user">
 					{{from}}
-				</button>
+				</a>
-			</span>
+			</td>
-			<span class="text">
+			<td class="text">
 				{{#if type}}
 				<em class="type">
 					{{type}}
 				</em>
 				{{/if}}
 				{{{uri text}}}
-			</span>
+			</td>
-			<span class="time">
+			<td class="time">
 				{{time}}
-			</span>
+			</td>
-		</li>
+		</tr>
-		{{/slice}}
+		{{/each}}
 		</script>
 	</div>
 	
@@ -123,7 +125,6 @@
 	<script src="/js/jquery.plugins.js"></script>
 	<script src="/js/uri.js"></script>
 	<script src="/js/handlebars.js"></script>
-	<script src="/js/handlebars.helpers.js"></script>
 	<script src="/js/chat.js"></script>
 	
 	</body>

client/js/chat.js

@@ -55,18 +55,19 @@ $(function() {
 	function event(e, data) {
 		switch (e) {
 		case "join":
+			console.log(render("windows", {windows: [data.chan]}));
 			chat.append(render("windows", {windows: [data.chan]}))
 				.find(".window")
 				.last()
-				.find(".messages")
+				.find(".chat")
-				.sticky({speed: 400})
+				.sticky({speed: 400, overflow: "auto"})
 				.end()
 				.find(".input")
 				.tabComplete(commands);
 			
 			$("#network-" + data.id)
 				.append(render("channels", {channels: [data.chan]}))
-				.find(".channel")
+				.find("a")
 				.last()
 				.trigger("click");
 			break;
@@ -86,12 +87,15 @@ $(function() {
 				.find(".hidden")
 				.prev(".show-more")
 				.show();
-			chat.find(".messages")
+			chat.find(".chat")
-				.sticky({speed: 400})
+				.sticky({speed: 400, overflow: "auto"})
 				.end();
 			
 			var networks = $("#networks")
-				.html(render("networks", {networks: data.networks}));
+				.html(render("networks", {networks: data.networks}))
+				.find("a")
+				.last()
+				.trigger("click");
 			break;
 		
 		case "part":
@@ -109,14 +113,14 @@ $(function() {
 	}
 	
 	var z = 1;
-	sidebar.on("click", "button", function() {
+	sidebar.on("click", "a", function() {
-		var button = $(this);
+		var link = $(this);
-		var target = button.data("target");
+		var target = link.attr("href");
 		if (!target) {
 			return;
 		}
 		sidebar.find(".active").removeClass("active");
-		button.addClass("active")
+		link.addClass("active")
 			.find(".badge")
 			.removeClass("highlight")
 			.empty();
@@ -127,7 +131,7 @@ $(function() {
 	});
 	
 	sidebar.on("click", ".close", function() {
-		var channel = $(this).closest(".channel");
+		var channel = $(this).closest("a");
 		var id = parseInt(channel.attr("id").split("-")[1]);
 		var cmd = "/close";
 		if (channel.hasClass("lobby")) {
@@ -185,10 +189,11 @@ $(function() {
 	});
 	
 	chat.on("focus", ".input", function() {
-		$(this).closest(".window").find(".messages").scrollToBottom();
+		$(this).closest(".window").find(".chat").scrollToBottom();
 	});
 	
-	chat.on("submit", "form", function() {
+	chat.on("submit", "form", function(e) {
+		e.preventDefault();
 		var form = $(this);
 		var input = form.find(".input:not(.hint)");
 		var text = input.val();
@@ -203,6 +208,25 @@ $(function() {
 		});
 	});
 	
+	function escape(text) {
+		var e = {
+			"<": "&lt;",
+			">": "&gt;"
+		};
+		return text.replace(/[<>]/g, function (c) {
+			return e[c];
+		});
+	}
+	
+	Handlebars.registerHelper(
+		"uri", function(text) {
+			text = escape(text);
+			return URI.withinString(text, function(url) {
+				return "<a href='" + url.replace(/^www/, "//www") + "' target='_blank'>" + url + "</a>";
+			});
+		}
+	);
+	
 	Handlebars.registerHelper(
 		"partial", function(id) {
 			return new Handlebars.SafeString(render(id, this));

client/js/handlebars.helpers.js

@@ -1,37 +0,0 @@
-Handlebars.registerHelper(
-	"slice", function(items, block) {
-		var limit = block.hash.limit;
-		var rows = [];
-		items.forEach(function(i) {
-			rows.push(block.fn(i));
-		});
-		var html = "";
-		var hidden = rows
-			.slice(0, Math.max(0, rows.length - limit))
-			.join("");
-		if (hidden != "") {
-			html = "<script type='text/html' class='hidden'>" + hidden + "</script>";
-		}
-		html += rows.slice(-limit).join("");
-		return html;
-	}
-);
-
-function escape(text) {
-	var e = {
-		"<": "&lt;",
-		">": "&gt;"
-	};
-	return text.replace(/[<>]/g, function (c) {
-		return e[c];
-	});
-}
-
-Handlebars.registerHelper(
-	"uri", function(text) {
-		text = escape(text);
-		return URI.withinString(text, function(url) {
-			return "<a href='" + url.replace(/^www/, "//www") + "' target='_blank'>" + url + "</a>";
-		});
-	}
-);