Better mobile support

[GoogleCodeExporter]

Hi,

This patch adds better support by default for mobile devices. It sets the 
viewport and contains conditional CSS that will be used on devices with small 
displays. That CSS removes extraneous layout in order to make the main content 
most functional.

I've focused mainly on the login form, since I think that is what really 
matters for mobile devices.

One thing to note is that there seems to be an awful lot of code duplication 
w.r.t. the login form. I changed a number of them, but I might aswell have 
missed some other.

Unfortunately I had to add a second, normally invisible submit button because I 
couldn't find a good way to move the submit button in the table based layout.

Let me know if you have comments, questions or suggestions for improvement.

Cheers,
Thijs

Original issue reported on code.google.com by thijs@kinkhorst.com on 20 Mar 2013 at 7:05

Attachments:

• mobile.patch

[GoogleCodeExporter]

Thanks for the patch Thijs!

I've applied it in r3229, though I haven't been able to test it in my local 
installation. I think it would be nice if some mobile browser detection 
mechanism is set in place, so we don't have to completely rely on CSS for this. 
In my case, I'm unable to use my phone to test it, so I was trying to use 
firefox for that, sending a mobile user agent. Unfortunately, firefox does not 
use the conditional CSS for mobile devices, so I cannot test it properly.

Do you think it's feasible to provide something like that? In such a case, I 
think we should also provide some links to allow the user switch versions of 
the page, just in case.

Original comment by jaim...@gmail.com on 21 Mar 2013 at 9:12

• Changed state: Accepted

[GoogleCodeExporter]

I'm not sure what you mean by "mobile browser detection". The CSS does just 
that: it contains a conditional precisely for the screentype "handheld" and a 
maximum screen width. If that can be done with pure CSS, what more would you 
want to add?

It can be tested in Firefox my making your browser window less than 480px wide.

Original comment by thijs@kinkhorst.com on 21 Mar 2013 at 12:53

[GoogleCodeExporter]

You are right, it was not working for me, apparently due to some 
misconfiguration of my firefox. Now I've managed to confirm it works fine, so 
I'm closing the issue.

Original comment by jaim...@gmail.com on 5 Apr 2013 at 11:58

• Changed state: Verified