From d01f4b37a1b6f4efa9ab76ad6919b53290617dcc Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Fri, 12 Sep 2014 18:03:16 -0700
Subject: [PATCH] Added server password to 'Connect' window

---
 client/css/bootstrap.css | 117 ++-------------------------------------
 client/css/style.css     |  75 ++++++++++++++++---------
 client/index.html        |  77 ++++++++++++++++----------
 package.json             |   2 +-
 4 files changed, 103 insertions(+), 168 deletions(-)

diff --git a/client/css/bootstrap.css b/client/css/bootstrap.css
index e9b1d71c..62db2037 100644
--- a/client/css/bootstrap.css
+++ b/client/css/bootstrap.css
@@ -835,7 +835,7 @@ address {
 .col-xs-offset-0 {
   margin-left: 0%;
 }
-@media (min-width: 768px) {
+@media (min-width: 480px) {
   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
     float: left;
   }
@@ -1199,7 +1199,7 @@ tbody.collapse.in {
 .visible-lg-inline-block {
   display: none !important;
 }
-@media (max-width: 767px) {
+@media (max-width: 479px) {
   .visible-xs {
     display: block !important;
   }
@@ -1214,131 +1214,26 @@ tbody.collapse.in {
     display: table-cell !important;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 479px) {
   .visible-xs-block {
     display: block !important;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 479px) {
   .visible-xs-inline {
     display: inline !important;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 479px) {
   .visible-xs-inline-block {
     display: inline-block !important;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm {
-    display: block !important;
-  }
-  table.visible-sm {
-    display: table;
-  }
-  tr.visible-sm {
-    display: table-row !important;
-  }
-  th.visible-sm,
-  td.visible-sm {
-    display: table-cell !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm-block {
-    display: block !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm-inline {
-    display: inline !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md {
-    display: block !important;
-  }
-  table.visible-md {
-    display: table;
-  }
-  tr.visible-md {
-    display: table-row !important;
-  }
-  th.visible-md,
-  td.visible-md {
-    display: table-cell !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md-block {
-    display: block !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md-inline {
-    display: inline !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg {
-    display: block !important;
-  }
-  table.visible-lg {
-    display: table;
-  }
-  tr.visible-lg {
-    display: table-row !important;
-  }
-  th.visible-lg,
-  td.visible-lg {
-    display: table-cell !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg-block {
-    display: block !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg-inline {
-    display: inline !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (max-width: 767px) {
+@media (max-width: 479px) {
   .hidden-xs {
     display: none !important;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
-  .hidden-sm {
-    display: none !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .hidden-md {
-    display: none !important;
-  }
-}
-@media (min-width: 1200px) {
-  .hidden-lg {
-    display: none !important;
-  }
-}
 .visible-print {
   display: none !important;
 }
diff --git a/client/css/style.css b/client/css/style.css
index 9320a9b3..530d40aa 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1,4 +1,5 @@
 @import url('//fonts.googleapis.com/css?family=Lato:400,700');
+@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,700');
 @font-face {
 	font-family: "FontAwesome";
 	src: url("fonts/fontawesome.svg") format("svg"), url("fonts/fontawesome.woff") format("woff");
@@ -75,7 +76,7 @@ button {
 }
 .container {
 	margin: 80px auto;
-	max-width: 420px;
+	max-width: 480px;
 	overflow: hidden;
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
@@ -316,12 +317,16 @@ button {
 	top: 0px;
 	width: 100%;
 }
+#windows label {
+	font-size: 14px;
+}
 #windows .input {
 	border: 1px solid #cdd3da;
 	border-radius: 2px;
 	color: #222;
 	font-size: 14px;
 	margin: 2px 0;
+	margin-bottom: 10px;
 	outline: 0;
 	padding: 8px 10px;
 	transition: border-color .2s;
@@ -354,6 +359,7 @@ button {
 	top: 0;
 }
 #windows .window {
+	bottom: -44px !important;
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
 }
@@ -370,37 +376,39 @@ button {
 #windows .active {
 	display: block;
 }
-#windows .window .lt {
-	margin-top: 4px;
-	margin-left: 8px;
-}
-#chat {
-	bottom: 0;
-	font: 13px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
-	left: 0;
-	position: absolute;
-	right: 0;
-	top: 0;
-}
-#chat button:hover {
-	opacity: .6;
-}
-#chat .header {
+#windows .header {
 	border-bottom: 1px solid #e7e7e7;
 	line-height: 50px;
 	height: 48px;
 	padding: 0 20px;
 }
-#chat .header .title {
+#windows .header .title {
 	font: 16px Lato;
 }
-#chat .header .topic {
+#windows .header .topic {
 	/* Hidden for now */
 	display: none;
 	color: #777;
 	margin-left: 8px;
 	text-transform: capitalize;
 }
+#windows .window .header {
+	display: none;
+}
+#chat {
+	bottom: 0;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+#chat,
+#windows .header {
+	font: 13px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+}
+#chat button:hover {
+	opacity: .6;
+}
 #chat .chat,
 #chat .sidebar {
 	top: 58px;
@@ -591,22 +599,25 @@ button {
 	color: #e74c3c;
 	margin-top: 1em;
 }
+#sign-in .container {
+	margin-top: 120px;
+}
 #connect label {
 	display: block;
-	margin-top: 10px;
+	margin-top: 11px;
 }
 #connect .title {
 	margin-bottom: 10px;
 }
 #connect .port:before {
 	content: ":";
-	margin: 28px 0 0 -17px;
+	margin: 9px 0 0 -17px;
 	position: absolute;
 }
 #connect .tls {
 	float: left;
 	font-size: 14px;
-	padding: 10px 2px;
+	margin-top: 6px;
 }
 #connect .tls input {
 	float: left;
@@ -614,7 +625,7 @@ button {
 }
 #connect .btn {
 	float: left;
-	margin-top: 25px;
+	margin-top: 30px;
 }
 #settings .title {
 	margin-bottom: -10px;
@@ -655,7 +666,7 @@ button {
 	left: 0;
 	position: absolute;
 	right: 0px;
-	z-index: 1;
+	/*z-index: 1;*/
 }
 #form input {
 	border: 1px solid #cfdae1;
@@ -682,6 +693,9 @@ button {
 }
 
 @media (max-width: 768px) {
+	.container {
+		margin-top: 60px !important;
+	}
 	#viewport.lt {
 		-webkit-transform: translate3d(220px, 0, 0);
 		        transform: translate3d(220px, 0, 0);
@@ -707,6 +721,9 @@ button {
 	#viewport .channel .rt {
 		display: block;
 	}
+	#windows .window .header {
+		display: block;
+	}
 	#chat .sidebar {
 		right: -180px;
 		transition: all .4s;
@@ -720,9 +737,15 @@ button {
 	}
 }
 
-@media (max-width: 480px) {
+@media (max-width: 479px) {
 	.container {
-		margin: 40px 0;
+		margin: 40px 0 !important;
+	}
+	#connect .tls {
+		margin: 20px 0;
+	}
+	#windows .input {
+		margin-bottom: 2px;
 	}
 	#chat .messages {
 		display: block;
diff --git a/client/index.html b/client/index.html
index f7db4ef3..ec128d9e 100644
--- a/client/index.html
+++ b/client/index.html
@@ -35,7 +35,9 @@
 			<div id="windows">
 				<div id="chat"></div>
 				<div id="sign-in" class="window">
-					<button class="lt"></button>
+					<div class="header">
+						<button class="lt"></button>
+					</div>
 					<form class="container" action="">
 						<div class="row">
 							<div class="col-xs-12">
@@ -65,53 +67,66 @@
 					</form>
 				</div>
 				<div id="connect" class="window">
-					<button class="lt"></button>
+					<div class="header">
+						<button class="lt"></button>
+					</div>
 					<form class="container" action="">
 						<div class="row">
-							<div class="col-xs-12">
+							<div class="col-sm-12">
 								<h1 class="title">Connect</h1>
 							</div>
-							<div class="col-xs-8">
-								<label>
-								Server
+							<div class="col-sm-12">
+								<h2>Network settings</h2>
+							</div>
+							<div class="col-sm-3">
+								<label>Server</label>
+							</div>
+							<div class="col-sm-6 col-xs-8">
 								<input class="input" name="host" value="irc.freenode.org">
-								</label>
 							</div>
-							<div class="col-xs-4">
-								<label class="port">
-								Port
-								<input class="input" name="port" value="6697">
-								</label>
+							<div class="col-sm-3 col-xs-4">
+								<div class="port">
+									<input class="input" name="port" value="6697">
+								</div>
 							</div>
-							<div class="col-xs-12">
+							<div class="clearfix"></div>
+							<div class="col-sm-3">
+								<label>Password</label>
+							</div>
+							<div class="col-sm-9">
+								<input class="input" type="password" name="password">
+							</div>
+							<div class="col-sm-3"></div>
+							<div class="col-sm-9">
 								<label class="tls">
 									<input type="checkbox" name="tls" checked="checked">
 									Enable TLS/SSL
 								</label>
 							</div>
 							<div class="clearfix"></div>
-							<div class="col-xs-12">
-								<h2>User Preferences</h2>
+							<div class="col-sm-12">
+								<h2>User preferences</h2>
 							</div>
-							<div class="col-xs-5">
-								<label>
-								Nick
+							<div class="col-sm-3">
+								<label>Nick</label>
+							</div>
+							<div class="col-sm-9">
 								<input class="input" name="nick" value="shout-user">
-								</label>
 							</div>
-							<div class="col-xs-7">
-								<label>
-								Real Name
+							<div class="col-sm-3">
+								<label>Real Name</label>
+							</div>
+							<div class="col-sm-9">
 								<input class="input" name="realname" class="input" value="Shout User">
-								</label>
 							</div>
-							<div class="col-xs-12">
-								<label>
-								Channels
-								<input class="input" name="join" class="input" value="#shout-irc">
-								</label>
+							<div class="col-sm-3">
+								<label>Channels</label>
 							</div>
-							<div class="col-xs-12">
+							<div class="col-sm-9">
+								<input class="input" name="join" class="input" value="#foo, #shout-irc">
+							</div>
+							<div class="col-sm-3 clearfix"></div>
+							<div class="col-sm-9">
 								<button type="submit" class="btn">
 									Connect
 								</button>
@@ -120,7 +135,9 @@
 					</form>
 				</div>
 				<div id="settings" class="window">
-					<button class="lt"></button>
+					<div class="header">
+						<button class="lt"></button>
+					</div>
 					<div class="container">
 						<div class="row">
 							<div class="col-sm-12">
diff --git a/package.json b/package.json
index 2f733552..0d0ed7dd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shout",
   "description": "A web IRC client",
-  "version": "0.25.3",
+  "version": "0.26.0",
   "author": "Mattias Erming",
   "preferGlobal": true,
   "bin": {