Improved mobile interface

This commit is contained in:
Mattias Erming 2014-05-31 07:03:58 -07:00
parent 8bb484da11
commit ab2a7b2aa3
3 changed files with 26 additions and 19 deletions

View File

@ -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">

View File

@ -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 = {

View File

@ -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) {
sticky = self.isScrollAtBottom();
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
sticky = self.isScrollAtBottom();
}, 50);
}
});
self.trigger('scroll');