Make WordPress Core

Opened 8 years ago

Last modified 5 years ago

#37971 new defect (bug)

Menus screen: improve the responsive view

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


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!

Attachments (2)

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

Download all attachments as: .zip

Change History (6)

#1 @keraweb
8 years 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.

8 years ago

Fix for menu items on mobile screen view

#2 @tanerozturk
8 years ago

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

8 years ago

Chrome responsive view

#3 @keraweb
8 years ago

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

Doesn't work for screens below 410px (tested in Chrome)
Also does not fix the dragging and dropping issue.

Version 0, edited 8 years ago by keraweb (next)

#4 @afercia
8 years 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.