Make style of loading page similar to other pages

- Move markup around to make the loading page a window of its own
  instead of a sub-window of `#chat`
- Remove inline styling in loading page
- Use same styling than other non-messages windows for title and text
- Add a `z-index` to the loading page to hide the message input
- Vertically align the sign in page title with all other titles
- Make sure all `h1.title`s are bottom-margined consistently and remove
  negative margin on the Settings page title to align with the Connect
  page title (Reverting/Improving this should be done at the `h2` level
  instead)

client/css/style.css

@@ -109,6 +109,10 @@ h2 {
 	margin: 0;
 }
 
+h1.title {
+	margin-bottom: 10px;
+}
+
 input {
 	outline: 0;
 }
@@ -749,6 +753,7 @@ button,
 	min-width: 134px;
 }
 
+#loading a,
 #chat a {
 	color: #50a656;
 }
@@ -1055,13 +1060,22 @@ button,
 	content: "Users";
 }
 
-#sign-in label {
+#loading {
-	display: block;
+	font-size: 14px;
+	z-index: 1;
+}
+
+#loading p {
 	margin-top: 10px;
 }
 
-#sign-in .title {
+#loading-slow {
-	margin-bottom: 10px;
+	display: none;
+}
+
+#sign-in label {
+	display: block;
+	margin-top: 10px;
 }
 
 #sign-in .remember {
@@ -1084,19 +1098,11 @@ button,
 	margin-top: 1em;
 }
 
-#sign-in .container {
-	margin-top: 120px;
-}
-
 #connect label {
 	display: block;
 	margin-top: 11px;
 }
 
-#connect .title {
-	margin-bottom: 10px;
-}
-
 #connect .port:before {
 	content: ":";
 	margin: 9px 0 0 -17px;
@@ -1119,10 +1125,6 @@ button,
 	margin-top: 30px;
 }
 
-#settings .title {
-	margin-bottom: -10px;
-}
-
 #settings .opt {
 	display: block;
 	padding: 5px 0 10px 1px;

client/index.html

@@ -43,22 +43,21 @@
 		</footer>
 		<div id="main">
 			<div id="windows">
-				<div id="chat">
+				<div id="loading" class="window active">
-					<div class="window" style="display:block">
 					<div class="container">
 						<div class="row">
 							<div class="col-xs-12">
-									<h2 class="title">The Lounge is loading…</h2>
+								<h1 class="title">The Lounge is loading…</h1>
 							</div>
 							<div class="col-xs-12">
 								<p id="loading-page-message">Loading the app… <a href="http://enable-javascript.com/" target="_blank">Make sure to have JavaScript enabled.</a></p>
-									<p id="loading-slow" style="display:none">This is taking longer than it should, there might be connectivity issues.</p>
+								<p id="loading-slow">This is taking longer than it should, there might be connectivity issues.</p>
 								<script async src="js/loading-slow-alert.js"></script>
 							</div>
 						</div>
 					</div>
 				</div>
-				</div>
+				<div id="chat"></div>
 				<div id="sign-in" class="window">
 					<form class="container" method="post" action="">
 						<div class="row">

client/js/lounge.js

@@ -175,7 +175,8 @@ $(function() {
 		}
 
 		$("body").removeClass("signed-out");
-		$("#sign-in").detach();
+		$("#loading").remove();
+		$("#sign-in").remove();
 
 		var id = data.active;
 		var target = sidebar.find("[data-id='" + id + "']").trigger("click");