Fix 'Show More' button

client/css/style.css

@@ -397,7 +397,7 @@ button {
 	padding: 0 20px;
 }
 #windows .header .title {
-	font: 16px Lato;
+	font: 14px Lato;
 }
 #windows .header .topic {
 	/* Hidden for now */
@@ -423,6 +423,9 @@ button {
 	line-height: 0;
 	padding: 0 10px;
 }
+#windows .header .button:hover {
+	opacity: 1;
+}
 #windows .window .header {
 	display: none;
 }
@@ -470,15 +473,30 @@ button {
 	display: none;
 }
 #chat .show-more {
-	background: #fff;
-	border-bottom: 1px solid #e7e7e7;
-	color: #b1c3ce;
-	height: 48px;
-	line-height: 50px;
+	display: none;
+	padding: 10px;
 	position: absolute;
 	width: 100%;
 }
-#chat .show-more:hover {
+#chat .show-more.show + .messages .msg:first-child {
+	padding-top: 47px !important;
+}
+#chat .show-more.show + .messages .msg:first-child > span {
+	padding-top: 52px !important;
+}
+#chat .show-more-button {
+	background: #f4f4f4;
+	background-image: linear-gradient(#f4f4f4, #ececec);
+	border: 1px solid #d7d7d7;
+	border-bottom-color: #b7b7b7;
+	border-radius: 2px;
+	color: #555;
+	font: 12px Lato, sans-serif;
+	height: 34px;
+	line-height: 0;
+	width: 100%;
+}
+#chat .show-more-button:hover {
 	opacity: 1;
 }
 #chat .messages {

client/js/shout.js

@@ -199,9 +199,7 @@ $(function() {
 			.prepend(render("msg", {messages: data.messages}))
 			.end();
 		if (data.messages.length != 100) {
-			var more = chan
-				.find(".show-more")
-				.addClass("hidden");
+			chan.find(".show-more").removeClass("show");
 		}
 	});
 
@@ -569,12 +567,11 @@ $(function() {
 		}
 	});
 
-	chat.on("click", ".show-more", function() {
+	chat.on("click", ".show-more-button", function() {
 		var self = $(this);
-		var id = self.data("id");
-		var count = self.next(".messages").children().length;
+		var count = self.parent().next(".messages").children().length;
 		socket.emit("more", {
-			target: id,
+			target: self.data("id"),
 			count: count
 		});
 	});

client/js/shout.templates.js

@@ -42,10 +42,12 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
     + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
     + "</span>\n		<span class=\"topic\">"
     + escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper)))
-    + " </span>\n	</div>\n	<div class=\"chat\">\n";
-  stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, ((stack1 = (depth0 != null ? depth0.messages : depth0)) != null ? stack1.length : stack1), 100, {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.program(8, data),"data":data}));
+    + " </span>\n	</div>\n	<div class=\"chat\">\n		<div class=\"show-more ";
+  stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, ((stack1 = (depth0 != null ? depth0.messages : depth0)) != null ? stack1.length : stack1), 100, {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.noop,"data":data}));
   if (stack1 != null) { buffer += stack1; }
-  return buffer + "		<div class=\"messages\">\n			"
+  return buffer + "\">\n			<button class=\"show-more-button\" data-id=\""
+    + escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+    + "\">\n				Show more\n			</button>\n		</div>\n		<div class=\"messages\">\n			"
     + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "msg", {"name":"partial","hash":{},"data":data})))
     + "\n		</div>\n	</div>\n	<aside class=\"sidebar\">\n		<div class=\"users\">\n			"
     + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "user", {"name":"partial","hash":{},"data":data})))
@@ -55,15 +57,7 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
   },"4":function(depth0,helpers,partials,data) {
   return "					Leave\n";
   },"6":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "		<button class=\"show-more\" data-id=\""
-    + escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
-    + "\">\n			Show more\n		</button>\n";
-},"8":function(depth0,helpers,partials,data) {
-  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "		<button class=\"show-more hidden\" data-id=\""
-    + escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
-    + "\">\n			Show more\n		</button>\n";
+  return "show";
   },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
   var stack1, buffer = "";
   stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.channels : depth0), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});

client/templates/chat.tpl

@@ -16,15 +16,11 @@
 		<span class="topic">{{type}} </span>
 	</div>
 	<div class="chat">
-		{{#equal messages.length 100}}
-		<button class="show-more" data-id="{{id}}">
+		<div class="show-more {{#equal messages.length 100}}show{{/equal}}">
+			<button class="show-more-button" data-id="{{id}}">
 				Show more
 			</button>
-		{{else}}
-		<button class="show-more hidden" data-id="{{id}}">
-			Show more
-		</button>
-		{{/equal}}
+		</div>
 		<div class="messages">
 			{{partial "msg"}}
 		</div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shout",
   "description": "The self-hosted web IRC client",
-  "version": "0.38.4",
+  "version": "0.38.5",
   "author": "Mattias Erming",
   "preferGlobal": true,
   "bin": {