User tests: Successful: Unsuccessful:
Today, not really possible to manage Joomla 3 administration on mobile device.
The reason : modal windows not usable!
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
Title |
|
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
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.
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 ;-)
If you could test it
Unfortunately only have a Windows Phone
But I'm sure there are users with better mobiles which are able to test that.
Unfortunately only have a Windows Phone
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...
I'll test it on Windows Phone and resized desktop this evening
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
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! (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!)
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.
Tested. Safari on iPhone iOS 7 and desktop chrome, safari and firefox on Mac OS. The patch works
Thank you losedk for your test! ;-)
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2014-06-23 15:52:00 |
Title |
|
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)?