NPM Resource Changed ? ? Pending

User tests: Successful: Unsuccessful:

avatar AndyGaskell
AndyGaskell
19 Jan 2020

Fix for the UI size issue described in
[4.0] [backend-template] Media Manager unusable on mobile #27537

Pull Request for Issue # .

Summary of Changes

Small CSS / SCSS change to make the folder icon in the media manager work better on mobile screen size

Testing Instructions

  1. Use small window or mobile device, like 375 x 667 pixels (iPhone6)
  2. Login to admin and go administrator
  3. Go to media manager
  4. Look at size of folder

Also repeat on other screen sizes

Expected result

Should be able to click on the folders

Actual result

Can't click on the folders because they're too big and overlap each other

Documentation Changes Required

None

Further notes...

Screen grab of issue...
Screen Shot 2020-01-19 at 18 21 05

Screen grab after fix...
Screen Shot 2020-01-19 at 18 20 50

avatar AndyGaskell AndyGaskell - open - 19 Jan 2020
avatar AndyGaskell AndyGaskell - change - 19 Jan 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 19 Jan 2020
Category Administration com_media NPM Change
avatar AndyGaskell AndyGaskell - change - 19 Jan 2020
The description was changed
avatar AndyGaskell AndyGaskell - edited - 19 Jan 2020
avatar Quy
Quy - comment - 19 Jan 2020

A side effect is that the folder icon is larger on desktop.

27573

avatar AndyGaskell
AndyGaskell - comment - 20 Jan 2020

Thanks for testing @Quy yea, that probably doesn't look ideal. What do you think?

I'll can try a different fix, using a media query in the css.

avatar C-Lodder
C-Lodder - comment - 21 Jan 2020

It's not just the font size that need tweaking. The whole things need to be worked on, on mobile.

  • There doesn't appear to be any form of proper stacking.
  • The search box underlaps the container
  • The zoom in/out and other icons are missing, due to underlapping.
avatar AndyGaskell
AndyGaskell - comment - 21 Jan 2020

Hi @C-Lodder

Yea, I agree really, I think I was kinda tip-toeing around this a bit as I'm not so familiar with this bit of front-end code, well, front end code generally, too much time writing APIs last few years. It's coming back to me though 🤓

I'll have another go over it all in a more wholistic way, starting with pencil and paper. Though that'll probably be next week.

Thanks for your input and creating this issue.

avatar AndyGaskell AndyGaskell - change - 21 Jan 2020
Labels Added: NPM Resource Changed ?
avatar Quy
Quy - comment - 9 Feb 2020

Closing for now as not proper fix. Thanks.

avatar Quy Quy - change - 9 Feb 2020
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2020-02-09 18:43:55
Closed_By Quy
Labels Added: ?
avatar Quy Quy - close - 9 Feb 2020

Add a Comment

Login with GitHub to post a comment