cadey
/
Shuo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@ -5,7 +5,7 @@
<title>Shout — The modern IRC client</title> <title>Shout — The modern IRC client</title>
<meta charset="utf-8"> <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/normalize.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">

22
client/js/chat.js
View File

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

21
client/js/jquery.plugins.js
View File

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