Frug/AJAX-Chat — pull request #142 by marquisite (2014-02-17 04:27:00+00:00)
Title: Mobile / small screen adjustments - CSS & Javascript

If I understand correctly, mobile layout improvements are one of the proposed changes in the next release.

This is my take on improving AJAX Chat for mobile screens - but also applies to large screens (e.g. desktops) should the chat window be resized down small enough that elements would otherwise overlap each other.

#### Key 'small screen' features include:
* An overlayed online users list with a toggle button in one corner (defaulted to hidden);
* Emoticons moved into a div with button toggle, the same as 'Font Color';
* Reduction of certain elements (BBCode buttons, etc.) gradually based on screen size;
* Scrolling the message window (chatList) to the bottom on a screen resize, if autoScroll is enabled. At least for Android 2.3.6, this helps keep the newest message(s) in view when opening/closing the onscreen keyboard and changing screen orientation. Older mobile OS's like Android 2.x don't support overflow:auto/overflow:scroll scrollbars, so this feature is particularly useful on aging Android equipment;
* Mobile CSS contained within a separate external stylesheet - mobile.css - for ease of editing.

**Mobile styling kicks in at 760px width.** Do note that this figure is also present within Javascript contained in the LoggedIn.html template. Should this figure change in mobile.css then it would need to be updated for LoggedIn.html to avoid some layout quirks.

Ideally, the Javascript would be better to dynamically read the 760px max-width media query so this potential layout quirk can't occur between the CSS/JS.

#### Testing
I've tested this within Firefox on Windows & Android's built-in browser for Gingerbread 2.3.6 on a Samsung Galaxy S i9000, and these changes seem to run fine. Limited testing by a third party on an iPhone 4S and Galaxy Mega claim the changes are an improvement, but I haven't seen how AJAX Chat looks on the iPhone 4S/Galaxy Mega first hand. I encourage more testing with a wider range of browsers/mobile phones before merging this into the testing branch. There's a possibility that there's a quirk that is not obvious to me somewhere!

**There may be a better way to doing this** (particularly the additional Javascript required in LoggedIn.html, like the window resize event code) - in my opinion this isn't exactly a perfect fix but does aim to retain some of the AJAX Chat functionality where screen resolution permits.

### Screenshots
Standard vs Mobile UI
![ajaxchat---mobile-ui---screenshots1](https://f.cloud.github.com/assets/3396137/2182446/114b7da0-978b-11e3-8e87-2650edf10bd1.jpg)

Mobile UI adapting to smaller sizes
![ajaxchat---mobile-ui---screenshots2](https://f.cloud.github.com/assets/3396137/2182451/1aec8cbe-978b-11e3-866e-63f8d4474f34.jpg)