WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 2 years ago

#40121 new defect (bug)

Media edit screen on mobile has visual issues

Reported by: karmatosed Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords: needs-patch
Focuses: ui Cc:
PR Number:

Description

This screen unfortunately on an iPhone 7 Plus is pretty unusable.

https://cldup.com/ANkhsYmH_F.PNG

I would at the least suggest we don't have 2 panes and move the right below the left. Then we can iterate.

Attachments (3)

edit_image_fix.png (495.4 KB) - added by hedgefield 3 years ago.
edit_image_redux.png (494.6 KB) - added by hedgefield 3 years ago.
40121.diff (906 bytes) - added by MatheusGimenez 2 years ago.

Download all attachments as: .zip

Change History (11)

This ticket was mentioned in Slack in #core-media by karmatosed. View the logs.


3 years ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


3 years ago

#3 @hedgefield
3 years ago

I've taken a stab at improving this layout. Obviously the panels shouldn't be arranged horizontally, so I moved the settings below the image, and I fixed some layout inconsistencies including removing the redundant Back button. The X at the top can probably also go away.

I also added a second version which borrows some more smartphone-focused design elements from the app, and moves the buttons into the top bar - that's not so much an improvement for the usability, but it frees up a lot of dead space that the bar at the bottom was taking up. It also makes more sense to have the mirror/rotate controls below the image, for desktop view as well.

Aside from that, the image should be responsive, probably even on desktop, otherwise there is a lot of wasted space there.

This ticket was mentioned in Slack in #core-media by karmatosed. View the logs.


3 years ago

#5 @Luwkaslima
3 years ago

Checking the issue I noticed this only happens when editing the image from Posts or Pages. However, if you access through MEDIA and click on EDIT, the screen presented has a different layout, which is more towards the first option presented by @hedgefield.

Post or Page:
http://i.imgur.com/twIVkF5.jpg

Media Gallery:
https://i.imgur.com/Sp4QvEv.jpg

Anyways, my comment here is with the objective to highlight the importance of working on both screens to make them look the same, so we guarantee consistency on the usability point of view. Does it make sense? Should we consider both in same ticket?

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


3 years ago

@MatheusGimenez
2 years ago

#7 @MatheusGimenez
2 years ago

Hello everyone,

I've worked on a patch for this ticket as aligned in one of the #core-media meetings, but I have a question to be able to conclude it. I've worked on a solution for 780px screens using media query. Can someone help me understand which screens I should work with?

I also used flexbox rules to change the order of each element. Is this a good practice in the core?

This ticket was mentioned in Slack in #core-media by matheusgimenez. View the logs.


2 years ago

Note: See TracTickets for help on using tickets.