Use <div> instead of <button> in sidebar

client/css/style.css

@@ -134,14 +134,16 @@ button {
 	width: 220px;
 }
 #sidebar button,
+#sidebar .chan,
 #sidebar .sign-out {
 	border: 1px solid transparent;
 	border-radius: 2px;
-	color: #bcc4d3;
 	color: #99a2b4;
+	cursor: pointer;
 	font-size: 14px;
 }
 #sidebar button:hover,
+#sidebar .chan:hover,
 #sidebar .active {
 	color: #fff;
 }

client/js/shout.js

@@ -374,7 +374,7 @@ $(function() {
 	}
 
 	var top = 1;
-	sidebar.on("click", "button", function() {
+	sidebar.on("click", ".chan, button", function() {
 		var self = $(this);
 		var target = self.data("target");
 		if (!target) {
@@ -427,11 +427,7 @@ $(function() {
 		var chan = $(this).closest(".chan");
 		if (chan.hasClass("lobby")) {
 			cmd = "/quit";
-			var server = chan
-				.clone()
-				.remove("span")
-				.text()
-				.trim();
+			var server = chan.find(".name").html();
 			if (!confirm("Disconnect from " + server + "?")) {
 				return false;
 			}

client/js/shout.templates.js

@@ -1,7 +1,7 @@
 (function() {
   var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
 templates['chan'] = template({"1":function(depth0,helpers,partials,data) {
-  var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<button data-id=\""
+  var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<div 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)))
     + "\" data-target=\"#chan-"
     + 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)))
@@ -14,9 +14,9 @@ templates['chan'] = template({"1":function(depth0,helpers,partials,data) {
     + "\">";
   stack1 = helpers['if'].call(depth0, (depth0 != null ? depth0.unread : depth0), {"name":"if","hash":{},"fn":this.program(2, data),"inverse":this.noop,"data":data});
   if (stack1 != null) { buffer += stack1; }
-  return buffer + "</span>\n	<span class=\"close\"></span>\n	"
+  return buffer + "</span>\n	<span class=\"close\"></span>\n	<span class=\"name\">"
     + 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)))
-    + "\n</button>\n";
+    + "</span>\n</div>\n";
 },"2":function(depth0,helpers,partials,data) {
   var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
   return escapeExpression(((helper = (helper = helpers.unread || (depth0 != null ? depth0.unread : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"unread","hash":{},"data":data}) : helper)));

client/templates/chan.tpl

@@ -1,7 +1,7 @@
 {{#each channels}}
-<button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
+<div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
 	<span class="badge" data-count="{{unread}}">{{#if unread}}{{unread}}{{/if}}</span>
 	<span class="close"></span>
-	{{name}}
-</button>
+	<span class="name">{{name}}</span>
+</div>
 {{/each}}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shout",
   "description": "A web IRC client",
-  "version": "0.32.3",
+  "version": "0.32.4",
   "author": "Mattias Erming",
   "preferGlobal": true,
   "bin": {