From e5dddbac0171941a179cc309958fa275df99f35c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Tue, 21 Jun 2016 01:52:18 -0400
Subject: [PATCH] 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 | 34 ++++++++++++++++++----------------
 client/index.html    | 23 +++++++++++------------
 client/js/lounge.js  |  3 ++-
 3 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 7394f07a..be0a79e8 100644
--- a/client/css/style.css
+++ b/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 {
-	display: block;
+#loading {
+	font-size: 14px;
+	z-index: 1;
+}
+
+#loading p {
 	margin-top: 10px;
 }
 
-#sign-in .title {
-	margin-bottom: 10px;
+#loading-slow {
+	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;
diff --git a/client/index.html b/client/index.html
index 496993f4..544d435a 100644
--- a/client/index.html
+++ b/client/index.html
@@ -43,22 +43,21 @@
 		</footer>
 		<div id="main">
 			<div id="windows">
-				<div id="chat">
-					<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>
-								</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>
-									<script async src="js/loading-slow-alert.js"></script>
-								</div>
+				<div id="loading" class="window active">
+					<div class="container">
+						<div class="row">
+							<div class="col-xs-12">
+								<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">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 id="chat"></div>
 				<div id="sign-in" class="window">
 					<form class="container" method="post" action="">
 						<div class="row">
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 2ff6d519..05b92298 100644
--- a/client/js/lounge.js
+++ b/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");