? Pending

User tests: Successful: Unsuccessful:

avatar ciar4n
ciar4n
16 Aug 2018

Pull Request for Issue #21630 .

Summary of Changes

This PR sticks the permissions tab on scroll, ensuring options are always visible if a large number of groups exists.

Testing Instructions

See original issue (#21630). Create a large number of groups. Navigate to the permissions tab of any item and scroll. Right panel should stick to header.

  • Not compatible with IE11 or less
  • Applies only to 1200px+ screen size

Edit: No change in IE11 and before

Expected result

permissions

avatar ciar4n ciar4n - open - 16 Aug 2018
avatar ciar4n ciar4n - change - 16 Aug 2018
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 16 Aug 2018
Category Administration Templates (admin)
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 16 Aug 2018

I have tested this item successfully on 18d9528


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

avatar franz-wohlkoenig franz-wohlkoenig - test_item - 16 Aug 2018 - Tested successfully
avatar franz-wohlkoenig franz-wohlkoenig - change - 16 Aug 2018
Easy No Yes
avatar laoneo
laoneo - comment - 16 Aug 2018

I have tested this item successfully on 18d9528


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

avatar laoneo laoneo - test_item - 16 Aug 2018 - Tested successfully
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 16 Aug 2018

can't set RTC as PR isn't shown at Tracker.

avatar wilsonge
wilsonge - comment - 16 Aug 2018

Not compatible with IE11 or less

Just to be clear that just means ie8-10 stay at current behaviour rather than just breaking right?

avatar mbabker
mbabker - comment - 16 Aug 2018

Just to be clear that just means ie8-10 stay at current behaviour rather than just breaking right?

IE11 and earlier don't know what position: sticky is so they won't do anything when they see it.

avatar ciar4n
ciar4n - comment - 16 Aug 2018

^^^ exactly that. No change in IE11 and before.

avatar ciar4n ciar4n - change - 16 Aug 2018
The description was changed
avatar ciar4n ciar4n - edited - 16 Aug 2018
avatar wilsonge wilsonge - change - 16 Aug 2018
Status Pending Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2018-08-16 16:11:05
Closed_By wilsonge
Labels Added: ?
avatar wilsonge wilsonge - close - 16 Aug 2018
avatar wilsonge wilsonge - merge - 16 Aug 2018
avatar infograf768
infograf768 - comment - 16 Aug 2018

is it necessary to add
position: -webkit-sticky;

?

avatar ciar4n
ciar4n - comment - 16 Aug 2018

I would say no as modern webkit browsers do not require it. I suspect early adaptation was experimental so best not apply it to older browsers.

avatar ggppdk
ggppdk - comment - 16 Aug 2018

you were too fast ?

I know the following case is more rare case, but if you have both

  • a lot of usergroups
  • and a lot of Permissions

you will have another annoyance if not also having a max-height to the '#permissions .tab-contents'

Because without the max-height you first have to A. scroll to find the usergroup and then B. do a 2nd scrolling again near the end of the page (to overcome the sticky behavior) and reach to the desired permissions

So i am adding a max-height: calc(100vh - 350px) to the same container in my pages
and it has similar browser support as position sticky

div#permissions .tab-content {
	position: sticky;
	top: 90px;
	max-height: calc(~"100vh - 350px");   /* LESS */
}

The result is that you can scroll the user groups independently of the permissions,
you can first scroll to a specific permission and then scroll and click the usergroups while the specific permission that you want to examine will not move (thanks to sticky already added)

Also the above benefit exists, even if you have a lot of permissions, with only a small number of usergroups

I am not asking that is added,
just saying that this is another improvement,

which may (or may not) be good to add to TAB navigation for all cases, not just for permissions
which may (or may not) be good to add to TAB navigation for permissions

avatar ciar4n
ciar4n - comment - 17 Aug 2018

@ggppdk Would you not then have a double scrollbar? The outside scrollbar scrolling the left column and the inside scrollbar scrolling the right column?

If that is the case then I think it would a little over engineered and possibly confusing. Espeicially considering it is a bit of an edge case. At least that is my 2 cents.

avatar ggppdk
ggppdk - comment - 17 Aug 2018

Would you not then have a double scrollbar?

no you will not have it
unless you actually need it because you have a long list of permissions

that is because you already have ... .tab-content { oveflow: auto }

further more you just navigate left and right and then scroll usergroups and permissions with mouse wheel independently, you do not need to touch the scrollbars

avatar brianteeman
brianteeman - comment - 17 Aug 2018

I don't have a mouse wheel

avatar ggppdk
ggppdk - comment - 17 Aug 2018

With or without mouse wheel, or with touch scroll , or with navigation bar usage, it works

the scrollbar appears only when needed (aka when having a lot of permissions)
and (when having a lot of permissions), it gives the 2 benefits described above

-- no need to scroll to the end of page when having many usergroups (to overcome stickiness of perms)
-- (with or without many usergroups) keep a specific set of rules visible at the same point of screen while you can click to navigate and review the permissions of every usergroup

in any case i am already loading this CSS on my views (for next version),
no need to add it, we can forget about it

maybe one day you will see the issues in your screens you will reconsider ...

Add a Comment

Login with GitHub to post a comment