WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#41499 closed defect (bug) (fixed)

Menu name and action button too close in responsive below 500px.

Reported by: punit5658 Owned by: afercia
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-patch has-screenshots
Focuses: ui, administration Cc:
PR Number:

Description

Menu name input and save menu too close below 500px. Added media styles for improve mobile accessibility to End user.

Attachments (6)

41499.diff (462 bytes) - added by punit5658 2 years ago.
Patch for Menu name and save button UI improvement.
menu-responsive-ui-500px.png (68.7 KB) - added by punit5658 2 years ago.
UI improvement for above case.
41499-1.diff (441 bytes) - added by punit5658 2 years ago.
Update input width because label width can change.
41499-2.diff (413 bytes) - added by punit5658 2 years ago.
Update space at bottom of file
41499-3.diff (415 bytes) - added by punit5658 2 years ago.
Update space in css
41499.2.diff (639 bytes) - added by afercia 2 years ago.

Download all attachments as: .zip

Change History (14)

@punit5658
2 years ago

Patch for Menu name and save button UI improvement.

@punit5658
2 years ago

UI improvement for above case.

#1 @punit5658
2 years ago

  • Component changed from Upload to Menus

#2 @punit5658
2 years ago

  • Keywords has-patch added

#3 follow-up: @joedolson
2 years ago

  • Focuses accessibility removed

Removing accessibility focus, as this is not an accessibility issue.

#4 in reply to: ↑ 3 @punit5658
2 years ago

Replying to joedolson:

Removing accessibility focus, as this is not an accessibility issue.

Thanks @joedolson for looking ticket and update focuses.

#5 @afercia
2 years ago

  • Keywords has-screenshots needs-refresh added
  • Milestone changed from Awaiting Review to 4.9
  • Owner set to afercia
  • Status changed from new to assigned
  • Version trunk deleted

@punit5658 thanks and welcome to Trac.
Seems something worth fixing! However, a fixed value of 86px in width: calc( 100% - 86px ); doesn't take into account the label could be longer (or shorter) when translated in other languages. Just an example:

https://cldup.com/wkSCCXf_WP.png

A more solid solution would probably be making the elements stacked vertically under a certain viewport width. There's no need for the label and the input field to be always on the same line also on small screens.

Also, you may want to have a look at the WordPress CSS coding standards about spaces, etc. Indentation should always use tab characters and not spaces, and every file should end with an empty line.

@punit5658
2 years ago

Update input width because label width can change.

@punit5658
2 years ago

Update space at bottom of file

#6 @punit5658
2 years ago

Thanks @afercia I have updated patch.

@punit5658
2 years ago

Update space in css

@afercia
2 years ago

#7 @afercia
2 years ago

  • Keywords needs-refresh removed

Looks good to me. 41499.2.diff just uses the new rules when the responsive view kicks in and saves a media query. Also removes an unused rule and fixes one indentation (was using spaces instead of tabs).

https://cldup.com/SBo1ROI3bq.png

Last edited 2 years ago by afercia (previous) (diff)

#8 @afercia
2 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 41197:

Menus: Improve the responsive view for the Menu Name field and Save button.

Props punit5658.
Fixes #41499.

Note: See TracTickets for help on using tickets.