From 276db34c34b29453a0c775ff0e6b8972950fe853 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Mon, 26 May 2014 01:20:16 +0200
Subject: [PATCH] Force user to confirm server disconnect

---
 client/css/style.css | 32 +++++++++++---------------------
 client/index.html    | 24 ++++++++++++------------
 client/js/chat.js    |  8 ++++++++
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 6b874730..6dfed654 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -208,14 +208,14 @@ button::-moz-focus-inner {
 }
 #chat .title {
 	background: #ecf0f1;
-	border-bottom: 1px solid #ddd;
-	color: #7F8C8D;
+	border-bottom: 1px solid #dbe4e6;
+	box-shadow: 0 4px rgba(0, 0, 0, .05);
+	color: #7f8c8d;
 	height: 44px;
 	line-height: 44px;
 	padding: 0 14px;
-}
-#chat .sidebar .title {
-	color: #95a5a6;
+	position: absolute;
+	width: 100%;
 }
 #chat .messages,
 #chat .users {
@@ -225,6 +225,7 @@ button::-moz-focus-inner {
 	overflow-y: scroll;
 	position: absolute;
 	top: 44px;
+	width: 100%;
 }
 #chat .messages {
 	box-shadow: inset 140px 0 #f3f5f5;
@@ -314,25 +315,14 @@ button::-moz-focus-inner {
 }
 #chat .users {
 	padding-bottom: 6px;
+	top: 0;
 	width: 156px;
 }
-#chat .users li {
-	display: table-row;
-	text-align: left;
-}
-#chat .users .user {
+#chat .users button,
+#chat .users span {
 	padding: 4px 8px;
-	text-align: left;
 }
 #chat .count {
-	background: #ecf0f1;
-	color: #aeb6bf;
-	margin-bottom: 4px;
-}
-#chat .count span {
-	display: block;
-	padding: 10px 12px;
-}
-#chat .count + li .user {
-	padding-top: 8px
+	color: #bdc3c7;
+	margin-top: 6px;
 }
diff --git a/client/index.html b/client/index.html
index 6f095abd..3a6da173 100644
--- a/client/index.html
+++ b/client/index.html
@@ -51,26 +51,20 @@
 		<div id="window-{{id}}" class="window {{type}}">
 			<div class="chat">
 				<div class="main">
-					<div class="title">
-						<h1>
-						{{type}}:
-						<strong>{{name}}</strong>
-						</h1>
-					</div>
 					<ul class="messages">
 						<li class="show-more">
 							<button class="btn">Show more</button>
 						</li>
 						{{partial "messages"}}
 					</ul>
+					<div class="title">
+						<h1>
+						{{type}}:
+						<strong>{{name}}</strong>
+						</h1>
+					</div>
 				</div>
 				<aside class="sidebar">
-					<div class="title">
-						<span>
-						Users:
-						{{users.length}}
-						</span>
-					</div>
 					<ul class="users">
 						{{partial "users"}}
 					</ul>
@@ -85,6 +79,12 @@
 		</script>
 		
 		<script type="text/html" class="users">
+		<li class="count">
+			<span>
+			Users:
+			{{users.length}}
+			</span>
+		</li>
 		{{#each users}}
 		<li>
 			<button class="user">
diff --git a/client/js/chat.js b/client/js/chat.js
index e0fcfbd5..8800fee7 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -132,6 +132,14 @@ $(function() {
 		var cmd = "/close";
 		if (channel.hasClass("lobby")) {
 			cmd = "/quit";
+			var server = channel
+				.clone()
+				.remove("span")
+				.text()
+				.trim();
+			if (!confirm("Disconnect from " + server + "?")) {
+				return false;
+			}
 		}
 		socket.emit("input", {
 			id: id,