Make WordPress Core

Opened 6 years ago

Closed 7 weeks ago

#43904 closed defect (bug) (fixed)

Media toolbar spacing inconsistent across views

Reported by: desrosj's profile desrosj Owned by: antpb's profile antpb
Milestone: 6.5 Priority: normal
Severity: normal Version:
Component: Media Keywords: good-first-bug has-patch commit
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 6 years ago.
Note the scrunched dropdowns/buttons
grid-view.png (943.2 KB) - added by desrosj 6 years ago.
Note the nicely spaced dropdowns and buttons
43904.1.diff (501 bytes) - added by seusmaniqbal 6 years ago.
Set margin for Media toolbar dropdowns
43904.1.svn.diff (386 bytes) - added by ianbelanger 6 years ago.
SVN version of changes
43904-3.diff (88 bytes) - added by subrataemfluence 6 years ago.
43904.4.diff (354 bytes) - added by ianbelanger 6 years ago.
Refreshed patch and tested with current trunk
43904.5.diff (356 bytes) - added by sabernhardt 14 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 (28)

@desrosj
6 years ago

Note the scrunched dropdowns/buttons

@desrosj
6 years ago

Note the nicely spaced dropdowns and buttons

@seusmaniqbal
6 years ago

Set margin for Media toolbar dropdowns

#1 @seusmaniqbal
6 years ago

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

@ianbelanger
6 years ago

SVN version of changes

#2 @ianbelanger
6 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
6 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.


6 years ago

@ianbelanger
6 years ago

Refreshed patch and tested with current trunk

#5 @ianbelanger
6 years ago

  • Keywords needs-testing removed

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


6 years ago

#7 @ianbelanger
5 years ago

  • Keywords needs-testing added

@sabernhardt
14 months ago

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

#8 @sabernhardt
14 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
11 months 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!

#10 @antpb
6 months ago

  • Owner set to antpb
  • Status changed from new to assigned

#11 @antpb
6 months ago

  • Milestone changed from Awaiting Review to 6.5

#12 @sumitbagthariya16
5 months ago

QA Update ✅

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

Environment:
WordPress: v6.4.2
PHP: 8.0.21
Web Server: Nginx 1.20.2
Browser: Chrome
OS: macOS Ventura 13.3

Screenshots:
https://prnt.sc/bFCWzq5ICcFP

#13 @shailu25
4 months ago

Test Report:

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/43904/43904.5.diff

Environment:

WordPress: 6.3.2
OS: Windows
Browser: Firefox
Active Plugin - None
PHP - 8.1.2

Expected Result:

  • Media toolbar spacing should be consistent for both list and grid view.

Actual Result:

  • After Applying Patch Media toolbar's spacing are consistent for both list and grid view. ✅

Screenshots:

Before Patch: https://prnt.sc/RLQhelrn_NzQ
After Patch: https://prnt.sc/MFTATkJnynzc

#14 @devmuhib
3 months ago

Patch report for -https://core.trac.wordpress.org/attachment/ticket/43904/43904.5.diff
Environment:
WordPress: 6.4
OS: Windows
Browser: Chrome
Expected Result: Media toolbar spacing should be consistent for both list and grid ✅
Screenshots:
Before: https://i.imgur.com/V2khzuf.jpg
After: https://i.imgur.com/RSzmOvg.jpg

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


2 months ago

#16 @huzaifaalmesbah
2 months ago

Test Report

Patch tested: 43904.5.diff

Environment

  • WordPress: 6.5-beta1-57630-src
  • PHP: 8.2.15
  • Server: nginx/1.25.3
  • Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
  • Browser: Chrome 121.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Four 1.0
  • MU Plugins: None activated
  • Plugins:
    • Gutenberg 17.7.0
    • Test Reports 1.1.0

Actual Results

Issue resolved with patch and now both list and grid spacing same ✅

Screenshots

Before Apply Patch After Apply Patch ✅
https://i.ibb.co/DKksVnN/Huzaifa-20240217105937-2x.png https://i.ibb.co/rmW9f7r/Huzaifa-20240217105756-2x.png
https://i.ibb.co/FDJ6ZCX/Huzaifa-20240217110320-2x.png https://i.ibb.co/VWfFJYq/Huzaifa-20240217105736-2x.png

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


2 months ago

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


8 weeks ago

#19 @swissspidy
7 weeks ago

  • Keywords commit added; needs-testing removed

#20 @audrasjb
7 weeks ago

I also tested this patch successfully on my side.
@antpb is it still on you plate? RC1 is scheduled tomorrow, so just wanted to ensure it is committed it before the release :)

#21 @antpb
7 weeks ago

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

In 57764:

Media: Use consistent spacing for the media toolbar in both grid and list view.

Previously, the spacing between media toolbar elements in grid and list view did not match. We now use the same select margin across both views.

Props desrosj, seusmaniqbal, ianbelanger, subrataemfluence, sabernhardt, pooja1210, sumitbagthariya16, shailu25, devmuhib, huzaifaalmesbah, audrasjb.
Fixes #43904.

Note: See TracTickets for help on using tickets.