? Success

User tests: Successful: Unsuccessful:

avatar dgt41
dgt41
17 May 2015

Minor UX/UI for bootstrap modals

Whenever a bootstrap modal is rendered, if you place the cursor outside of the modal you can scroll the page beneath that modal. Which is kinda awkward since the focus is supposed to be on the modal. This PR prevents that behavior by adding a class modal-open to the body of the document and removing it when modal closes. This hack is specific to BS 2.3.x, previous and later versions have this as a default behavior. So if you are on BS 3.x edit /layouts/joomla/modal/main.php and remove the respective javascript lines.

Testing

Apply patch
Create a new menu e.g. Single Article
Place the cursor outside of the modal and try to scroll. (observe that the page is not scrolling)

2e9302d 17 May 2015 avatar dgt41 init
avatar dgt41 dgt41 - open - 17 May 2015
avatar dgt41
dgt41 - comment - 17 May 2015

@n9iels Can you check/test this?

avatar dgt41 dgt41 - change - 17 May 2015
The description was changed
avatar n9iels
n9iels - comment - 17 May 2015

@test works perfect! Thanks!! With that modals the admin area looks so much better, so this is a great addition :smile:


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6964.

avatar n9iels n9iels - test_item - 17 May 2015 - Tested successfully
avatar N6REJ
N6REJ - comment - 17 May 2015

@dgt41 I tried this with standard 3.4.1 isis and did not have the problem b4 using patch.

avatar dgt41
dgt41 - comment - 17 May 2015

@N6REJ Maybe my description is not very clear, let me try again:
Whenever a bootstrap modal is (rendered, active) shown if you place the cursor outside of the modal window (and within the rest of the background page) you are able to scroll the shadowed page! This is confusing (Facebook and twitter make the background static). Applying this PR will make scrolling of the shadowed page impossible.

avatar N6REJ
N6REJ - comment - 17 May 2015

thats just it, I shrink chrome to where it has a scrollbar and then open
the modal and only the modal scrolls not the background. As an after
thought I just checked and in ie it does but not chrome. And with patch
applied I was STILL able to scroll in ie
Bear
On 5/17/2015 08:23, Dimitris Grammatiko wrote:

@N6REJ https://github.com/N6REJ Maybe my description is not very
clear, let me try again:
Whenever a bootstrap modal is (rendered, active) shown if you place
the cursor outside of the modal window (and within the rest of the
background page) you are able to scroll the shadowed page! This is
confusing (Facebook and twitter make the background static). Applying
this PR will make scrolling of the shadowed page impossible.


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

No virus found in this message.
Checked by AVG - www.avg.com http://www.avg.com
Version: 2015.0.5941 / Virus Database: 4342/9799 - Release Date: 05/17/15

avatar dgt41
dgt41 - comment - 17 May 2015

@N6REJ What version IE?

can you try adding
-ms-overflow-style: none;
in administrator/templates/isis/css/template.css after line 8152

avatar joomla-cms-bot joomla-cms-bot - change - 17 May 2015
Labels Added: ?
avatar dgt41
dgt41 - comment - 17 May 2015

@N6REJ Can you restore and re-apply this patch and try again? Also you don’t have to shrink the window in order to get scrollbar you can try to scroll with the mouse

avatar dgt41
dgt41 - comment - 17 May 2015

IE fix works here for IE 8 and IE 10
screen shot 2015-05-17 at 5 06 32
screen shot 2015-05-17 at 5 09 08

avatar n9iels
n9iels - comment - 17 May 2015

The patch also didn't work for me the first time. Clearing my browser cache was the solution.

avatar zero-24 zero-24 - change - 17 May 2015
Category Templates (admin) UI/UX
avatar zero-24 zero-24 - change - 17 May 2015
Status New Pending
avatar N6REJ
N6REJ - comment - 17 May 2015

@dgt41 I'm sorry but I still can't get the patch to function... please see this video http://screencast.com/t/zg0tlN5iC
demonstrating the behavior both before and after. IE is ver 11.0.9600

avatar dgt41
dgt41 - comment - 17 May 2015

@N6REJ OK now I see why this didn’t work for you! You need the latest staging version of joomla to test this. Why? The modal I said to try, in menu, in your video are mootools modal but you need a bootstrap modal in order to test this. Try it with the multi language status (the one on the bottom bar) or create a user note and the try to go: administrator/index.php?option=com_users&view=users and click on the display note button. This only affects bootstrap modals!

avatar bertmert
bertmert - comment - 18 May 2015

@test
Current staging. Firefox, Chrome OK.
IE11 also OK but needs a second call of modal box or a deletion of browser cache after applying patch.
So, I say SUCCESS.

avatar zero-24 zero-24 - alter_testresult - 18 May 2015 - bertmert: Tested successfully
avatar zero-24 zero-24 - change - 18 May 2015
Status Pending Ready to Commit
avatar zero-24
zero-24 - comment - 18 May 2015

RTC Thanks :smile:


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6964.

avatar zero-24 zero-24 - change - 18 May 2015
Labels Added: ?
avatar N6REJ
N6REJ - comment - 19 May 2015

I'm sorry but I just can't replicate the problem / fix. It still does the exact same thing I showed in the video. I switched to the staging did latest fetch, installed patch-tester, did the pre-test ( same behavior, scrolls with mouseclick ) applied patch, same behavior... I think made user note, went to the url provided, and same exact behavior. cms shows 3.4.2.dev

avatar dgt41
dgt41 - comment - 19 May 2015

@N6REJ Bear please look at the images I posted here in the comments. Do you get the same modals, with footer that got a close button? If not, for some awkward reason your joomla doesn’t have these PRs that are needed for this patch to work. 3.4.2.dev doesn’t necessarily mean that got the latest code. try the nightly ver: http://developer.joomla.org/cms-packages/
I will try to make a video to demonstrate what is the desired UX here

avatar N6REJ
N6REJ - comment - 19 May 2015

I'm pulling right from staging ... is that the wrong place?
Bear
On 5/19/2015 10:02, Dimitris Grammatiko wrote:

@N6REJ https://github.com/N6REJ Bear please look at the images I
posted here in the comments. Do you get the same modals, with footer
that got a close button? If not, for some awkward reason your joomla
doesn’t have these PRs that are needed for this patch to work.
3.4.2.dev doesn’t necessarily mean that got the latest code. try the
nightly ver: http://developer.joomla.org/cms-packages/
I will try to make a video to demonstrate what is the desired UX here


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

No virus found in this message.
Checked by AVG - www.avg.com http://www.avg.com
Version: 2015.0.5941 / Virus Database: 4347/9817 - Release Date: 05/19/15

avatar dgt41
dgt41 - comment - 19 May 2015

If you are using git then the code should be current! The thing is that on the video you uploaded the modals were mootools. Also you mention a click (I suspect on the wheel) and this is not what this PR (or any other browser code) will cover. So only scroll the mouse wheel should be disabled! I am really sorry for all the confusion!

avatar N6REJ
N6REJ - comment - 19 May 2015

ok, so, i completely repulled and get the close button which I was not getting before shrug,
@test works as indicated! clicking scroll wheel does still allow background scrolling but not just using the wheel itself.

avatar dgt41
dgt41 - comment - 19 May 2015

:+1: Thank you so much @N6REJ and again apologies for not stating clearly that this needed latest dev in order to test!

avatar dgt41
dgt41 - comment - 20 May 2015

@n9iels @bertmert @N6REJ I am afraid my solution wasn’t covering all cases! Can you please test again but this time goto administrator/index.php?option=com_banners and select some articles and then press the batch button! Same effect should be seen.
Before you try to test this make sure that #7000 is also applied!
Sorry for this but I just realize that it wasn’t working for all cases as I was playing with something else.

61af312 21 May 2015 avatar dgt41 DRY
avatar dgt41
dgt41 - comment - 21 May 2015

Before you try to test this make sure that #7000 is also applied!


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6964.

avatar bertmert
bertmert - comment - 21 May 2015

@test Success with current Firefox, IE11, current Chrome.
Applied patch 6964 and 7000. Tested with com_users Display notes and com_banners Batch. Background doesn't scroll any more.

I don't know if this error with Hathor concerning PR7000 is anyhow important here:
#7000 (comment)

avatar n9iels
n9iels - comment - 21 May 2015

@test When selecting all the banner items via "Select all", the scrollbar is still visible.
Also, for the batch function on com_content, the scroll bar is always visible.

I test this on the current version of Google Chrome

avatar dgt41
dgt41 - comment - 21 May 2015

@bertmert About #7000: I shouldn’t delete the file default_batch.php, instead I had to deprecate it, that’s the reason for the error in hathor. But also hathor override needs update! changes are coming up.

@n9iels All the batch modals are broken (for this PR) as they are totally hardcoded. So yes com_content, com_menus, com_newsfeed etc still have problems as there are more PRs needed to bring everything inline.
About select all and scrollbars, I don’t get that here:
screen shot 2015-05-21 at 12 43 22

avatar n9iels
n9iels - comment - 21 May 2015

hmm strange, I think some cache problem. never mind.
@test all good for this PR. Like to test the solution for the batch function when you're ready :smiley:


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6964.

avatar dgt41
dgt41 - comment - 21 May 2015

@n9iels #7000 and #7003 are ready!

avatar zero-24 zero-24 - close - 27 May 2015
avatar Kubik-Rubik Kubik-Rubik - change - 27 May 2015
Status Ready to Commit Closed
Closed_Date 0000-00-00 00:00:00 2015-05-27 15:25:22
Closed_By Kubik-Rubik
avatar Kubik-Rubik Kubik-Rubik - close - 27 May 2015
avatar Kubik-Rubik
Kubik-Rubik - comment - 27 May 2015

Merged. Thank you @dgt41!

avatar zero-24 zero-24 - change - 14 Oct 2015
Labels Removed: ?

Add a Comment

Login with GitHub to post a comment