Always show header on mobile

client/css/style.css

@@ -84,7 +84,7 @@ button {
 	height: 100%;
 	position: relative;
 	width: 100%;
-	transition: all .5s;
+	transition: all .4s;
 	-webkit-transform: translateZ(0);
 	        transform: translateZ(0);
 	-webkit-perspective: 1000;
@@ -242,9 +242,50 @@ button {
 	margin: 0 auto;
 	max-width: 480px;
 	overflow: auto;
-	-webkit-overflow-scrolling: touch;
 	padding: 0 20px;
 }
+#header {
+	background: #fff;
+	border-bottom: 1px solid #eee;
+	display: none;
+	left: 0;
+	font-size: 13px;
+	height: 40px;
+	line-height: 40px;
+	position: absolute;
+	right: 0;
+	text-align: center;	
+	top: 0px;
+	z-index: 999;
+}
+#header button {
+	color: #aaa;
+	height: 32px;
+	opacity: .5;
+	top: 4px;
+	transition: opacity .2s;
+	width: 32px;
+}
+#header button:hover {
+	opacity: 1;
+}
+#header h1 {
+	color: #222;
+	display: inline;
+	font-size: 15px;
+}
+#header .channel #rt {
+	display: block;
+}
+#header #lt {
+	left: 4px;
+	position: absolute;
+}
+#header #rt {
+	display: none;
+	position: absolute;
+	right: 4px;
+}
 #windows a {
 	color: inherit;
 	transition: all .2s;
@@ -304,6 +345,7 @@ button {
 #windows .window {
 	padding: 12% 0;
 	overflow: auto;
+	-webkit-overflow-scrolling: touch;
 }
 #settings section {
 	margin-top: 20px;
@@ -350,45 +392,6 @@ button {
 #chat a:hover {
 	opacity: .6;
 }
-#chat .header {
-	background: #fff;
-	border-bottom: 1px solid #eee;
-	color: #ccc;
-	display: none;
-	font-size: 13px;
-	height: 40px;
-	line-height: 40px;
-	position: relative;
-	text-align: center;
-}
-#chat .header h1 {
-	color: #222;
-	display: inline;
-	font-size: 15px;
-}
-#chat .header button {
-	color: #aaa;
-	height: 32px;
-	font-size: 18px !important;
-	opacity: .5;
-	top: 1px;
-	transition: opacity .2s;
-	width: 32px;
-}
-#chat .header button:hover {
-	opacity: 1;
-}
-#chat .header .lt {
-	left: 4px;
-	position: absolute;
-}
-#chat .header .rt {
-	position: absolute;
-	right: 4px;
-}
-#chat .header .type {
-	text-transform: capitalize;
-}
 #chat .chat {
 	background: #fff;
 	border-bottom: 1px solid #eee;
@@ -421,7 +424,7 @@ button {
 }
 #chat .messages {
 	display: table;
-	margin: 5px 0;
+	margin: 3px 0;
 	width: 100%;
 }
 #chat .row {
@@ -606,7 +609,6 @@ button {
 	}
 	#chat .chat {
 		box-shadow: none;
-		top: 40px;
 	}
 	#chat .chat,
 	#chat .form {
@@ -614,6 +616,7 @@ button {
 	}
 	#chat .sidebar {
 		margin-right: -180px;
+		top: -40px;
 	}
 	#chat .messages {
 		display: block;
@@ -630,6 +633,20 @@ button {
 	#chat .row .time {
 		display: none;
 	}
+	#header {
+		display: block;
+	}
+	#windows,
+	#chat {
+		bottom: 0;
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 40px;
+	}
+	#windows .window {
+		padding-top: 6%;
+	}
 }
 
 @media (max-device-width: 767px) {

client/index.html

@@ -45,6 +45,11 @@
 			</footer>
 		</aside>
 		<div id="main">
+			<header id="header">
+				<button id="lt" class="mega-octicon octicon-three-bars"></button>
+				<button id="rt" class="mega-octicon octicon-three-bars"></button>
+				<h1></h1>
+			</header>
 			<div id="windows">
 			<div id="settings" class="window">
 				<div class="wrap">
@@ -150,15 +155,6 @@
 					{{partial "messages"}}
 				</div>
 			</div>
-			<header class="header">
-				<button class="lt">
-					<i class="mega-octicon octicon-three-bars"></i>
-				</button>
-				<button class="rt">
-					<i class="mega-octicon octicon-three-bars"></i>
-				</button>
-				{{partial "meta"}}
-			</header>
 			<form class="form" data-target="{{id}}">
 				<input class="submit" tabindex="-1" type="submit" >
 				<input class="input">

client/js/chat.js

@@ -244,8 +244,12 @@ $(function() {
 			.removeClass("highlight")
 			.empty();
 		
+		var title = link.data("name");
+		var header = $("#header");
+		header.find("h1").html(title).end().find("#rt").toggle(title.charAt(0) == "#");
+		
 		$.cookie("current", target);
-		document.title = link.data("name") + " — Shout";
+		document.title = title + " — Shout";
 		
 		if (sidebar.find(".highlight").length == 0) {
 			favicon.badge("");
@@ -402,13 +406,13 @@ $(function() {
 		toggle = "touchstart";
 	}
 	
-	chat.on(toggle, ".lt, .rt", function(e) {
+	$("#rt, #lt").on(toggle, function(e) {
 		var btn = $(this);
-		viewport.toggleClass(btn.attr("class"));
+		viewport.toggleClass(btn.attr("id").replace("#", ""));
-		if (viewport.hasClass("lt")) {
+		if (viewport.is(".lt, .rt")) {
 			e.stopPropagation();
-			viewport.find("#main").one(toggle, function(e) {
+			chat.find(".chat").one(toggle, function(e) {
-				viewport.removeClass("lt");
+				viewport.removeClass("lt rt");
 			});
 		}
 	});