[#36658] - Improved media view by adding position:sticky in .media-toolbar
- Closed
- 25 Mar 2022
- Medium
- Build: 4.1-dev
- # 36658
- Diff
- Shubhamverma2796:issue_36545
User tests: Successful: Unsuccessful:
Pull Request for Issue #36545
Summary of Changes
Improved media view by adding position:sticky in .media-toolbar and in .media-drive. Also added the z-index so that the elements does not overlap.
Testing Instructions
Go to media--> Upload more than 20(or any big number) images. After uploading, scroll down, in case of the long list of media files the search and change folder options are not visible on scrolling down. we need may scroll up down for many action :
- change folder
- search
- change view
See #36545
Actual result BEFORE applying this Pull Request
Expected result AFTER applying this Pull Request
Search and folder structure visible on scrolling down also so there is no need to scroll up.
Documentation Changes Required
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change |
pritam825
- 
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36658.
@brianteeman why unsuccessful?
The position fixed is on the wrong element. As a result if you have more than one filesystem set up they are both displayed on top of each other.
Also your screenshot shows the title being with the tree. But thats not what is happening because the title is not fixed.
And the media-disk shouldnt be left floating and should be at the etop when scrolled
Probably you should change the fixed from the media-drive class to the media-disk or media-sidebar (not tested)
@Shubhamverma2796 same as @brianteeman
maybe for left we need to add a js for a topfixed class ?
sorry no idea
As i Say i think the solution IS a script like topfixed toolbar in admin but i dont know how .. i will search
@Shubhamverma2796 can you add
thead.media-browser-table-head { position: sticky; top: 124px; z-index: 1; }
that add stiky to table header in list view ?
@Shubhamverma2796 can you add thead.media-browser-table-head { position: sticky; top: 124px; z-index: 1; } that add stiky to table header in list view ?
in the media-tree.scss file?
@Shubhamverma2796 no i didn't find any reference i find here
i think we need to add a class in scss
.media-drive.fixed
.media-toolbar.fixed
.media-browser-table-head.fixed
And add a js script like @dgrammatiko said to hadd fixed class on scroll down ...
but i didn't have the skill for
@Shubhamverma2796 no i didn't find any reference i find here
it is of no use. And I'm not skilled enough to add a js script as suggested
| Labels |
Added:
?
NPM Resource Changed
?
|
||
@Shubhamverma2796 Please advise status. If you are unable to solve it, please close in order to reopen the issue so someone else can give it a go. thanks.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-03-25 14:55:23 |
| Closed_By | ⇒ | Shubhamverma2796 |
I have tested this item✅ successfully on f0cb7e0
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36658.