Composer should serve a mobile template based on viewport detection

[julianlam]

I think we can all agree that using NodeBB on a phone is great for viewing, but not so great for posting.

Part of that is because we're trying to do too much. The composer is a single responsive template that is loaded for all devices, even small ones. While for the rest of NodeBB, this works fine (thanks to bootstrap and other responsive work we've done), it gets really tough to work with when the keyboard is up, thereby severely diminishing the available vertical real-estate we have to work with.

So it seems the best course of action would be to split the templates up into two, the current existing one stays the same, and would be used for desktops. A second one, composer_mobile, would be for... mobile.

We could use viewport size detection in this line of code (perhaps using a new utils function?) and serve the mobile template instead.

RFC for comments/mockups (@cnvo?)/etc

[julianlam]

To be honest, the problem stems from the fact that the composer is designed to be viewed on a desktop. Many of the considerations we made are no longer factors on mobile. For example, the composer is minimizable, but the entire task bar itself is hidden on mobile.

[cnvo]

Sounds good to me!

Ok, so I've been all in for the mobile viewport detection or more so, using a library such as Modernizer to detect client browsers.

[preeefix]

Seems like a step in a good direction. Why not use a sliding transition to
move into a dedicated page for mobile composing? Also, we may have to have
a separate templates for composing topics and composing replies.
On Jun 9, 2014 12:34 AM, "Trevor" notifications@github.com wrote:

Sounds good to me!

--- for lack of time, I'll leave this here as a placeholder for a better
review / explanation tomorrow.

—
Reply to this email directly or view it on GitHub
#1657 (comment).

[julianlam]

On mobile? Hahah that would be so app like... I'd be open for it but the simpler the better.

[preeefix]

Mainly because mobile users are used to the full screen composers used for
'true' apps. Facebook uses it on all posting.
On Jun 9, 2014 11:48 AM, "Julian Lam" notifications@github.com wrote:

On mobile? Hahah that would be so app like... I'd be open for it but the
simpler the better.

—
Reply to this email directly or view it on GitHub
#1657 (comment).

[cnvo]

Maybe this is a bit off the direction of this particular issue, but can we get a composer with live preview instead of having to click back and forth to see if something is formatted the right way? Something like an enhanced WYSIWYG?

I don't remember if this was brought up. I remember talking about some type of "Xen" or "Fullscreen" mode, but thats besides the point.

[ichpen]

To add to the mobile discussion topic, my own suggestions:

1. Remove most of the task/toolbars as mentioned above including kitchen sink
2. Replace above with single embed media button (to use native camera or browse media library on device)
3. Relocate Write/Preview/Submit buttons (they should be either at the very top or beneath the composer on mobile).
4. I don't personally see merit in preview mode on mobile nor do I see value in a kitchen sink with tiny impossible to press buttons.

Objective is to gain as much real estate as possible and provide large easy to press inputs.

Mobile specific theme should also exclude any mouse over specific functionality (like quote/reply), larger fonts should be reconsidered at the expense of truncation.

[a5mith]

It's taken me until now to realise it's almost impossible to post on an iPad. 😆 Headers over the text bar etc. I'd +1 an app style mobile view.

[barisusakli]

Can you post a screen grab of how it looks on the ipad?

[julianlam]

@barisusakli Actually, we did get an informal go-ahead from one of our previous clients to use their BrowserStack login, so please do go ahead and take advantage of that 😄

[julianlam]

Composer on iPhone 5 (iOS 6), keyboard closed and open:

I can't believe the composer works perfectly on iPhone...

[julianlam]

iPad. Textarea could be a little smaller.