? Success

User tests: Successful: Unsuccessful:

avatar JoomliC
JoomliC
23 Feb 2014

Today, not really possible to manage Joomla 3 administration on mobile device.
The reason : modal windows not usable!

3169 modal windows on mobile devices

This PR resizes Modal Windows on small device, and gives user scrollability on mobile devices.

Issue Tracker [#33328] : http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=33328

avatar JoomliC JoomliC - open - 23 Feb 2014
avatar Bakual
Bakual - comment - 23 Feb 2014

There are a lot !important statements in your CSS which will make it quite hard to override in a template CSS. Also this will not only affect backend but each modal on front- and backend. Thus we have to be careful here.
Would it be possible to either work without !important statements or even better move the styling to the template (Isis)?

avatar JoomliC JoomliC - change - 24 Feb 2014
Title
@media css for modal windows on iPhone
modal windows on Mobile Devices
avatar JoomliC
JoomliC - comment - 24 Feb 2014

Hi Thomas!
And really thank you for your comment and feedback!

I have done the job in another way, by editing the modal script.
So, now, no more !important ;)
The modal is resized and position changed, when on a device screen width lower 979px.
Touch is added for iOS mobile devices.

Just a question : I have edited uncompressed modal js, so should i compress it to allow testing of this PR ?

Many thanks!
Cyril

avatar Bakual
Bakual - comment - 24 Feb 2014

Hi Cyril

Thanks for your work. That does indeed look better now.
Yes, please compress the edited JS using your favorite uglifying tool and add it to the PR.

avatar JoomliC
JoomliC - comment - 24 Feb 2014
Thanks for your work. That does indeed look better now. Yes, please compress the edited JS using your favorite uglifying tool and add it to the PR.

Done!
Thank you for your contribution, it is much more clean now (and working better!)
If you could test it ;-)

avatar Bakual
Bakual - comment - 24 Feb 2014

If you could test it

Unfortunately only have a Windows Phone :smile:
But I'm sure there are users with better mobiles which are able to test that.

avatar JoomliC
JoomliC - comment - 24 Feb 2014
Unfortunately only have a Windows Phone :smile:

And you are able to use modal on a windows phone ? Even if the modal is set to 800px width ?

Note that it is the same issue on a desktop, if you resize your browser. For example, using editor button image, user, article...

avatar Bakual
Bakual - comment - 24 Feb 2014

I'll test it on Windows Phone and resized desktop this evening :+1:

avatar Bakual
Bakual - comment - 24 Feb 2014

Tested on a Windows Phone device and on a resized IE11. I can confirm the issue and the solution works and lets me use the modal.
Tested also on a resized Chrome and there it didn't work for some reason. The modal still had the original width. Also tested with the Chrome emulation "Apple iPhone 5" and there it didn't work as well. But I didn't really expected that to work anyway given that Chrome behaved different already.

So I'd count that as a successful test for Internet Explorer :+1:

avatar JoomliC
JoomliC - comment - 24 Feb 2014

Thomas,
working fine for me on Chrome (the same result as on firefox or safari), on Mac OS

My Test on Chrome:
Chrome mobile (v.33.0.1750.14) on iPhone 4S and desktop Chrome version 32.0.1700.107 on macbook -> successful

Thank you for your testing on IE! :+1: (not easy for me, and good to know it is doing the job on IE!)

So, it could be great to have other tests on Chrome and Android! (and as many mobile devices as possible!)

avatar JoomliC
JoomliC - comment - 3 Mar 2014

UPDATED!

I have removed the "hidden-phone" class for users modal, because without a submit button, search on a mobile device (such as iPhone) can't work.

avatar losedk
losedk - comment - 23 Apr 2014

Tested. Safari on iPhone iOS 7 and desktop chrome, safari and firefox on Mac OS. The patch works

avatar JoomliC
JoomliC - comment - 9 May 2014

Thank you losedk for your test! ;-)

avatar phproberto phproberto - reference | - 23 Jun 14
avatar phproberto phproberto - change - 23 Jun 2014
Status New Closed
Closed_Date 0000-00-00 00:00:00 2014-06-23 15:52:00
avatar phproberto phproberto - change - 23 Jun 2014
Title
modal windows on Mobile Devices
[#33328] modal windows on Mobile Devices
avatar phproberto phproberto - close - 23 Jun 2014
avatar phproberto phproberto - close - 23 Jun 2014

Add a Comment

Login with GitHub to post a comment