WordPress.org

Make WordPress Core

Opened 22 months ago

Last modified 20 months ago

#37971 new defect (bug)

Menus screen: improve the responsive view

Reported by: afercia Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-screenshots needs-patch
Focuses: ui Cc:

Description

Noticed while working on #37969, the responsive view of the Menus screen needs some improvements. Not sure if there's already a specific ticket (haven't found one).

Some CSS rules used in this screen work just in the "Desktop" view: 100% widths+margins, some floats, the 13em spacing between menu item titles and controls and probably more stuff need to be reset/adjusted.

Not sure it nesting the menu items can work on very small displays, probably needs a different approach. Any thoughts welcome!

https://cldup.com/qvBPJULT7f.png

Attachments (2)

37971.diff (981 bytes) - added by tanerozturk 20 months ago.
Fix for menu items on mobile screen view
Crome_mobile_view.png (25.0 KB) - added by tanerozturk 20 months ago.
Chrome responsive view

Download all attachments as: .zip

Change History (6)

#1 @keraweb
21 months ago

Dragging and dropping isn't working well on mobile devices at all (tested on Android - Chrome). Once I start dragging the windows scrolls all the way down.

@tanerozturk
20 months ago

Fix for menu items on mobile screen view

#2 @tanerozturk
20 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

@tanerozturk
20 months ago

Chrome responsive view

#3 @keraweb
20 months ago

  • Keywords needs-patch added; has-patch needs-testing removed

Doesn't work for screens below 410px (tested in Chrome) EDIT: Nvm, was another patch that interfered.

Still does not fix the dragging and dropping issue.

Last edited 20 months ago by keraweb (previous) (diff)

#4 @afercia
20 months ago

Not sure a drag-and-drop UI will ever work nicely on touch devices and small screens. Maybe it can work in a decent way when moving single items in a flat list, but when moving a group of nested items or when a group of items need to respond to a drag and drop action, then I'm not sure there's a possible "fix". Also, not so ideal for accessibility: not operable with a keyboard and it's basically a device-dependent interface. Ideally, it should be device-independent, I mean operable with any pointing device, keyboard, or any other device. I'd consider to improve just the CSS issue for now.

Note: See TracTickets for help on using tickets.