From ecc889373ef04ac01f1421cf43f5a51695548b45 Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Fri, 14 Mar 2014 20:03:25 +0100
Subject: [PATCH] Added bootstrap

---
 client/css/bootstrap.css | 466 +++++++++++++++++++++++++++++++++++++++
 client/css/style.css     |  54 ++---
 client/index.html        |  16 +-
 client/js/chat.js        |   3 +-
 4 files changed, 496 insertions(+), 43 deletions(-)
 create mode 100644 client/css/bootstrap.css

diff --git a/client/css/bootstrap.css b/client/css/bootstrap.css
new file mode 100644
index 0000000..a97336f
--- /dev/null
+++ b/client/css/bootstrap.css
@@ -0,0 +1,466 @@
+/*!
+ * Bootstrap v3.1.1 (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  background: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: bold;
+}
+dfn {
+  font-style: italic;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+pre {
+  overflow: auto;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+button {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+input {
+  line-height: normal;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+}
+optgroup {
+  font-weight: bold;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+td,
+th {
+  padding: 0;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #333333;
+  background-color: #ffffff;
+}
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+a {
+  color: #428bca;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  color: #2a6496;
+  text-decoration: underline;
+}
+a:focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+figure {
+  margin: 0;
+}
+img {
+  vertical-align: middle;
+}
+.img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.img-rounded {
+  border-radius: 6px;
+}
+.img-thumbnail {
+  padding: 4px;
+  line-height: 1.42857143;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+.img-circle {
+  border-radius: 50%;
+}
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.badge {
+  display: inline-block;
+  min-width: 10px;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 1;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #999999;
+  border-radius: 10px;
+}
+.badge:empty {
+  display: none;
+}
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+.btn-xs .badge {
+  top: 0;
+  padding: 1px 5px;
+}
+a.badge:hover,
+a.badge:focus {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+a.list-group-item.active > .badge,
+.nav-pills > .active > a > .badge {
+  color: #428bca;
+  background-color: #ffffff;
+}
+.nav-pills > li > a > .badge {
+  margin-left: 3px;
+}
+.list-group {
+  margin-bottom: 20px;
+  padding-left: 0;
+}
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+}
+.list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.list-group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.list-group-item > .badge {
+  float: right;
+}
+.list-group-item > .badge + .badge {
+  margin-right: 5px;
+}
+a.list-group-item {
+  color: #555555;
+}
+a.list-group-item .list-group-item-heading {
+  color: #333333;
+}
+a.list-group-item:hover,
+a.list-group-item:focus {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+a.list-group-item.active,
+a.list-group-item.active:hover,
+a.list-group-item.active:focus {
+  z-index: 2;
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+a.list-group-item.active .list-group-item-heading,
+a.list-group-item.active:hover .list-group-item-heading,
+a.list-group-item.active:focus .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item.active .list-group-item-text,
+a.list-group-item.active:hover .list-group-item-text,
+a.list-group-item.active:focus .list-group-item-text {
+  color: #e1edf7;
+}
+.list-group-item-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+a.list-group-item-success {
+  color: #3c763d;
+}
+a.list-group-item-success .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-success:hover,
+a.list-group-item-success:focus {
+  color: #3c763d;
+  background-color: #d0e9c6;
+}
+a.list-group-item-success.active,
+a.list-group-item-success.active:hover,
+a.list-group-item-success.active:focus {
+  color: #fff;
+  background-color: #3c763d;
+  border-color: #3c763d;
+}
+.list-group-item-info {
+  color: #31708f;
+  background-color: #d9edf7;
+}
+a.list-group-item-info {
+  color: #31708f;
+}
+a.list-group-item-info .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-info:hover,
+a.list-group-item-info:focus {
+  color: #31708f;
+  background-color: #c4e3f3;
+}
+a.list-group-item-info.active,
+a.list-group-item-info.active:hover,
+a.list-group-item-info.active:focus {
+  color: #fff;
+  background-color: #31708f;
+  border-color: #31708f;
+}
+.list-group-item-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+}
+a.list-group-item-warning {
+  color: #8a6d3b;
+}
+a.list-group-item-warning .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-warning:hover,
+a.list-group-item-warning:focus {
+  color: #8a6d3b;
+  background-color: #faf2cc;
+}
+a.list-group-item-warning.active,
+a.list-group-item-warning.active:hover,
+a.list-group-item-warning.active:focus {
+  color: #fff;
+  background-color: #8a6d3b;
+  border-color: #8a6d3b;
+}
+.list-group-item-danger {
+  color: #a94442;
+  background-color: #f2dede;
+}
+a.list-group-item-danger {
+  color: #a94442;
+}
+a.list-group-item-danger .list-group-item-heading {
+  color: inherit;
+}
+a.list-group-item-danger:hover,
+a.list-group-item-danger:focus {
+  color: #a94442;
+  background-color: #ebcccc;
+}
+a.list-group-item-danger.active,
+a.list-group-item-danger.active:hover,
+a.list-group-item-danger.active:focus {
+  color: #fff;
+  background-color: #a94442;
+  border-color: #a94442;
+}
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
diff --git a/client/css/style.css b/client/css/style.css
index ce258e7..3a7d5c7 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -2,7 +2,6 @@ html,
 body {
 	font: 12px Consolas, monospace;
 	height: 100%;
-	margin: 0;
 }
 a {
 	color: inherit;
@@ -23,36 +22,20 @@ h2 {
 	margin: 0;
 }
 #sidebar {
-	background: #f0f0f0;
 	border-right: 1px solid #ccc;
 	float: left;
 	height: 100%;
-	width: 199px;
+	width: 200px;
 }
-#sidebar .channel {
-	border-bottom: 1px solid transparent;
-	color: #f00;
-	cursor: pointer;
-	line-height: 1.8em;
-	padding: 0 12px;
+#sidebar .list-group {
+	margin: 10px 0;
+	padding: 0 10px;
 }
-#sidebar .channel:first-child {
-	color: #333;
-	overflow: hidden;
+#sidebar .list-group-item:hover {
+	color: #000;
 }
-#sidebar .channel:hover {
-	text-decoration: underline;
-}
-#sidebar .network {
-	margin-top: 1em;
-}
-#sidebar .network:first-child {
-	margin-top: 0;
-}
-#sidebar .network:first-child .channel {
-	background: #eaeaea;
-	border-bottom-color: #e5e5e5;
-	line-height: 36px;
+#sidebar .list-group-item:first-child {
+	background: #f5f5f5;
 }
 #chat {
 	bottom: 0;
@@ -67,7 +50,7 @@ h2 {
 #chat form {
 	border-top: 1px solid #ccc;
 	bottom: 0;
-	height: 26px;
+	height: 32px;
 	left: 0;
 	position: absolute;
 	right: 0;
@@ -75,10 +58,10 @@ h2 {
 #chat form input {
 	border: 0;
 	font: inherit;
-	height: 26px;
+	height: 32px;
 	margin: 0;
 	outline: none;
-	padding: 0 6px;
+	padding: 0 10px;
 	width: 100%;
 }
 #chat .channel,
@@ -95,12 +78,11 @@ h2 {
 	right: 0;
 }
 #chat .title {
-	background: #f5f5f5;
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid #ccc;
 	color: #333;
 	font-size: 18px;
-	height: 36px;
-	line-height: 36px;
+	height: 42px;
+	line-height: 42px;
 	padding-left: 10px;
 	position: absolute;
 	top: 0;
@@ -108,12 +90,12 @@ h2 {
 }
 #chat .users {
 	border-left: 1px solid #ccc;
-	bottom: 26px;
+	bottom: 32px;
 	overflow-y: auto;
 	padding: 4px 0;
 	position: absolute;
 	right: 0px;
-	top: 36px;
+	top: 42px;
 	width: 159px;
 }
 #chat .users .user {
@@ -123,13 +105,13 @@ h2 {
 	padding: 0px 8px;
 }
 #chat .messages {
-	bottom: 26px;
+	bottom: 32px;
 	left: 0;
 	overflow-y: auto;
 	padding: 4px 8px;
 	position: absolute;
 	right: 160px;
-	top: 36px;
+	top: 42px;
 	word-wrap: break-word;
 	z-index: 0;
 }
diff --git a/client/index.html b/client/index.html
index 30b3699..ffcd3a2 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,9 +1,13 @@
 <!doctype html>
 <html>
 	<head>
-	
-	<link rel="stylesheet" href="/css/style.css"/>
-	
+
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+	<link rel="stylesheet" href="/css/bootstrap.css">
+	<link rel="stylesheet" href="/css/style.css">
+
 	</head>
 	<body>
 
@@ -12,11 +16,11 @@
 
 	<script type="text/html" id="networks">
 	{{#networks}}
-	<div class="network" data-id="{{id}}">
+	<div class="network list-group" data-id="{{id}}">
 		{{#channels}}
-		<div class="channel" data-id="{{id}}">
+		<a href="" class="channel list-group-item" data-id="{{id}}">
 			{{name}}
-		</div>
+		</a>
 		{{/channels}}
 	</div>
 	{{/networks}}
diff --git a/client/js/chat.js b/client/js/chat.js
index 1dfcc7c..dc1043a 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -77,7 +77,8 @@ $(function() {
 		}
 	});
 
-	sidebar.on("click", ".channel", function() {
+	sidebar.on("click", ".channel", function(e) {
+		e.preventDefault();
 		chat.find(".window[data-id='" + $(this).data("id") + "']")
 			.bringToTop();
 	});