Make WordPress Core

Opened 5 years ago

Last modified 2 days ago

#43904 new defect (bug)

Media toolbar spacing inconsistent across views

Reported by: desrosj's profile desrosj Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords: good-first-bug has-patch needs-testing
Focuses: ui, css, administration Cc:

Description

The media toolbar is present on both list and grid views. The padding on the dropdowns and buttons, though, is inconsistent.

Attachments (7)

list-view.png (209.9 KB) - added by desrosj 5 years ago.
Note the scrunched dropdowns/buttons
grid-view.png (943.2 KB) - added by desrosj 5 years ago.
Note the nicely spaced dropdowns and buttons
43904.1.diff (501 bytes) - added by seusmaniqbal 5 years ago.
Set margin for Media toolbar dropdowns
43904.1.svn.diff (386 bytes) - added by ianbelanger 5 years ago.
SVN version of changes
43904-3.diff (88 bytes) - added by subrataemfluence 5 years ago.
43904.4.diff (354 bytes) - added by ianbelanger 5 years ago.
Refreshed patch and tested with current trunk
43904.5.diff (356 bytes) - added by sabernhardt 3 months ago.
6px right margin and 0 margin for other sides of select elements in List View filter bar

Download all attachments as: .zip

Change History (16)

@desrosj
5 years ago

Note the scrunched dropdowns/buttons

@desrosj
5 years ago

Note the nicely spaced dropdowns and buttons

@seusmaniqbal
5 years ago

Set margin for Media toolbar dropdowns

#1 @seusmaniqbal
5 years ago

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

@ianbelanger
5 years ago

SVN version of changes

#2 @ianbelanger
5 years ago

Tested patch on Lenovo ThinkPad Windows 10, in Firefox 59.0.2 and Chrome 66.0.3359.139. Changes looked good in both browsers. Also uploaded svn version of patch.

#3 @subrataemfluence
5 years ago

I applied the patch and it looks much better.

However, in order to keep the spacing consistent with media grid view the margin I believe needs to be 6px instead of 8px.

.post-type-attachment .wp-filter select {
    margin-right: 6px;
}

This ticket was mentioned in Slack in #core by abdullahramzan. View the logs.


5 years ago

@ianbelanger
5 years ago

Refreshed patch and tested with current trunk

#5 @ianbelanger
5 years ago

  • Keywords needs-testing removed

This ticket was mentioned in Slack in #core by seusmaniqbal. View the logs.


5 years ago

#7 @ianbelanger
4 years ago

  • Keywords needs-testing added

@sabernhardt
3 months ago

6px right margin and 0 margin for other sides of select elements in List View filter bar

#8 @sabernhardt
3 months ago

  • Focuses css added

The view-switch container adds 4 pixels to the right margin in Grid mode to account for the lack of whitespace between elements. The select elements have a 10-pixel right margin in Grid mode, so a 6-pixel margin plus the space would be consistent with that. I also set the other sides to zero margin in List mode to remove the 1-pixel left margin.

If you test within the 783-900 pixel range, the select elements have a larger font size and padding in Grid mode, but that does not relate to the spacing.

#9 @pooja1210
2 days ago

Hi,

Patch report for -https://core.trac.wordpress.org/attachment/ticket/43904/43904.5.diff

Environment:
WordPress: v6.2.2
OS: Mac
Browser: Chrome

Expected Result: Media toolbar spacing should be consistent for both list and grid ☑️

Screenshots:
Before: https://prnt.sc/lcjlIKIDZl3F

After: https://prnt.sc/kHbcer79x_6u

Thanks!

Note: See TracTickets for help on using tickets.