Improved mobile interface

client/index.html

@@ -5,7 +5,7 @@
 	<title>Shout — The modern IRC client</title>
 	
 	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
 	
 	<link rel="stylesheet" href="/css/normalize.css">
 	<link rel="stylesheet" href="/css/style.css">

client/js/chat.js

@@ -60,7 +60,7 @@ $(function() {
 				.find(".window")
 				.last()
 				.find(".chat")
-				.sticky({speed: 400, overflow: "auto"})
+				.sticky()
 				.end()
 				.find(".input")
 				.tabComplete(commands, {hint: false});
@@ -88,7 +88,7 @@ $(function() {
 				.prev(".show-more")
 				.show();
 			chat.find(".chat")
-				.sticky({speed: 400, overflow: "auto"})
+				.sticky()
 				.end();
 			
 			var networks = $("#networks")
@@ -112,6 +112,9 @@ $(function() {
 		}
 	}
 	
+	var viewport = $("#viewport");
+	var touchDevice = ($("#detect").css("display") == "none");
+	
 	var z = 1;
 	sidebar.on("click", "a", function(e) {
 		e.preventDefault();
@@ -120,6 +123,7 @@ $(function() {
 		if (!target) {
 			return;
 		}
+		viewport.removeClass();
 		sidebar.find(".active").removeClass("active");
 		link.addClass("active")
 			.find(".badge")
@@ -130,9 +134,11 @@ $(function() {
 			.removeClass("active")
 			.end()
 			.css("z-index", z++)
-			.addClass("active")
-			.find("input")
-			.focus();
+			.addClass("active");
+		
+		if (!touchDevice) {
+			window.find("input").focus();
+		}
 	});
 	
 	sidebar.on("click", ".close", function() {
@@ -215,18 +221,14 @@ $(function() {
 	});
 	
 	// Toggle sidebars
-	var viewport = $("#viewport");
 	var toggle = "click";
-	if ($("#detect").css("display") == "none") {
+	if (touchDevice) {
 		toggle = "touchstart";
 	}
 	chat.on(toggle, ".lt, .rt", function() {
 		var btn = $(this);
 		viewport.toggleClass(btn.attr("class"));
 	});
-	chat.on("focus", ".input", function() {
-		viewport.removeClass();
-	});
 	
 	function escape(text) {
 		var e = {

client/js/jquery.plugins.js

@@ -1,17 +1,17 @@
 /*!
- * stickyScroll
- * https://github.com/erming/stickyScroll
+ * stickyscroll
+ * https://github.com/erming/stickyscroll
  *
  * Copyright (c) 2014 Mattias Erming <mattias@mattiaserming.com>
  * Licensed under the MIT License.
  *
- * Version 1.2.1
+ * Version 1.3.1
  */
 (function($) {
 	$.fn.sticky = function(options) {
 		var settings = $.extend({
 			disableManualScroll: false,
-			overflow: 'scroll',
+			overflow: 'auto',
 			scrollToBottom: true,
 			speed: 0
 		}, options);
@@ -24,11 +24,12 @@
 		}
 		
 		self.css('overflow-y', settings.overflow);
+		self.css('-webkit-overflow-scrolling', 'touch');
 		if (settings.scrollToBottom) {
 			self.scrollToBottom();
 		}
 		
-		var timer;
+		var resizeTimer;
 		var resizing = false;
 		$(window).on('resize', function() {
 			self.finish();
@@ -37,8 +38,8 @@
 			// while resizing the browser.
 			resizing = true;
 			
-			clearTimeout(timer);
-			timer = setTimeout(function() {
+			clearTimeout(resizeTimer);
+			resizeTimer = setTimeout(function() {
 				resizing = false;
 			}, 100);
 			
@@ -47,12 +48,16 @@
 			}
 		});
 		
+		var scrollTimer;
 		var sticky = true;
 		self.on('scroll', function() {
 			if (settings.disableManualScroll) {
 				self.scrollToBottom();
 			} else if (!resizing) {
+				clearTimeout(scrollTimer);
+				scrollTimer = setTimeout(function() {
 					sticky = self.isScrollAtBottom();
+				}, 50);
 			}
 		});
 		self.trigger('scroll');