Merge pull request #465 from thelounge/PR/fix-textarea

Fix window layout a bit

client/css/style.css

@@ -520,12 +520,6 @@ button {
 	width: 100%;
 }
 
-#windows {
-	position: relative;
-	overflow: hidden;
-	flex: 1;
-}
-
 #windows label {
 	font-size: 14px;
 }
@@ -553,8 +547,7 @@ button {
 	border-color: #79838c;
 }
 
-#windows .window:before,
-#windows .chan:before {
+#windows .window:before {
 	background: #f4f4f4;
 	background-image: linear-gradient(#f4f4f4, #ececec);
 	border-bottom: 1px solid #d7d7d7;
@@ -565,7 +558,6 @@ button {
 	z-index: 10;
 }
 
-#windows .chan,
 #windows .window {
 	background: #fff;
 	bottom: 0;
@@ -574,10 +566,6 @@ button {
 	position: absolute;
 	right: 0;
 	top: 0;
-}
-
-#windows .window {
-	bottom: -44px !important;
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
 }
@@ -620,12 +608,32 @@ button {
 	display: none;
 }
 
-#chat {
+#chat-container,
+#chat .chan {
+	position: absolute;
+	top: 0;
+	right: 0;
 	bottom: 0;
 	left: 0;
-	position: absolute;
-	right: 0;
-	top: 0;
+}
+
+#windows #chat-container.active {
+	display: flex;
+	flex-direction: column;
+}
+
+#chat {
+	position: relative;
+	overflow: hidden;
+	flex: 1;
+}
+
+#chat .chan {
+	display: none;
+}
+
+#chat .chan.active {
+	display: block;
 }
 
 #chat,
@@ -634,9 +642,13 @@ button {
 	line-height: 1.4;
 }
 
+#windows #chat .header {
+	display: block;
+}
+
 #chat .chat,
 #chat .sidebar {
-	top: 58px;
+	top: 48px;
 }
 
 #chat .chat {
@@ -1202,15 +1214,16 @@ button {
 #form {
 	background: #eee;
 	border-top: 1px solid #ddd;
-	min-height: 48px;
 	flex: 0 0 auto;
-	padding: 7px;
+	padding: 5px;
 }
 
-#form .input {
+#windows #form .input {
 	font: 12px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
 	border: 1px solid #ddd;
 	border-radius: 2px;
+	margin: 0;
+	padding: 0;
 	background: white;
 	display: flex;
 	align-items: flex-end;
@@ -1222,7 +1235,6 @@ button {
 	font: inherit;
 	font-size: 11px;
 	margin: 5px;
-	margin-right: 10px;
 	line-height: 26px;
 	height: 24px;
 	padding: 0 9px;

client/index.html

@@ -55,7 +55,16 @@
 						</div>
 					</div>
 				</div>
+				<div id="chat-container" class="window">
 					<div id="chat"></div>
+					<form id="form" method="post" action="">
+						<div class="input">
+							<label for="input" id="nick"></label>
+							<textarea id="input" class="mousetrap"></textarea>
+							<button id="submit" type="submit" title="Send" aria-label="Send message"></button>
+						</div>
+					</form>
+				</div>
 				<div id="sign-in" class="window">
 					<form class="container" method="post" action="">
 						<div class="row">
@@ -323,13 +332,6 @@
 					</div>
 				</div>
 			</div>
-			<form id="form" method="post" action="">
-				<div class="input">
-					<label for="input" id="nick"></label>
-					<textarea id="input" class="mousetrap"></textarea>
-					<button id="submit" type="submit" title="Send" aria-label="Send message"></button>
-				</div>
-			</form>
 		</div>
 	</div>
 	</div>

client/js/lounge.js

@@ -745,7 +745,6 @@ $(function() {
 		}
 	}
 
-	var top = 1;
 	sidebar.on("click", ".chan, button", function() {
 		var self = $(this);
 		var target = self.data("target");
@@ -774,7 +773,7 @@ $(function() {
 		}
 
 		viewport.removeClass("lt");
-		var lastActive = $("#windows .active");
+		var lastActive = $("#windows .chan.active");
 
 		lastActive
 			.removeClass("active")
@@ -785,10 +784,11 @@ $(function() {
 			.find(".unread-marker")
 			.appendTo(lastActive.find(".messages"));
 
+		$("#chat-container").addClass("active");
+
 		var chan = $(target)
 			.addClass("active")
-			.trigger("show")
-			.css("z-index", top++);
+			.trigger("show");
 
 		var chanChat = chan.find(".chat");
 		if (chanChat.length > 0) {