Design changes

client/index.html

@@ -49,7 +49,9 @@
 			{{partial "#users"}}
 		</div>
 		<div class="messages">
-			<button class="show-more">Show more</button>
+			<div class="show-more">
+				<button class="show-more-button">Show more</button>
+			</div>
 			{{partial "#messages"}}
 		</div>
 		<form onSubmit="return false;">
@@ -72,7 +74,7 @@
 	</script>
 	
 	<script type="text/html" id="messages">
-	{{#slice messages limit="100"}}
+	{{#slice messages limit="200"}}
 	<div class="msg {{type}}">
 		<span class="time">
 			{{time}}

client/js/chat.js

@@ -84,12 +84,11 @@ $(function() {
 				.tabComplete({after: " ", list: commands})
 				.inputHistory({submit: true})
 				.end()
-				.find(".messages")
-				.scrollGlue({speed: 400})
-				.end()
 				.find(".hidden")
 				.prev(".show-more")
 				.show()
+				.parent()
+				.scrollGlue({speed: 400})
 				.end();
 			
 			sidebar.html(render("#networks", {networks: data.networks}))
@@ -155,11 +154,10 @@ $(function() {
 		});
 	});
 	
-	chat.on("click", ".show-more", function() {
-		var btn = $(this);
-		btn.replaceWith($.parseHTML(
-			btn.next(".hidden").remove().html()
-		));
+	chat.on("click", ".show-more-button", function() {
+		var more = $(this).parent();
+		var html = $.parseHTML(more.next(".hidden").remove().html());
+		more.replaceWith(html);
 	});
 
 	sidebar.on("click", ".channel", function(e) {

client/style.css

@@ -16,12 +16,6 @@ h2 {
 	font: inherit;
 	margin: 0;
 }
-ul,
-li {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
 .user {
 	background: none;
 	border: 0;
@@ -136,7 +130,11 @@ li {
 }
 #chat .show-more {
 	display: none;
-	margin-left: 14px;
+	padding: 2px 8px 0 16px;
+}
+#chat .show-more-button {
+	padding: 6px 0;
+	width: 100%;
 }
 #chat .msg {
 	border-left: 8px solid transparent;