WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 8 months ago

#43573 closed enhancement (fixed)

Convert plugin cards into four columns for hi-res screens

Reported by: nielslange Owned by: pento
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-patch
Focuses: ui, administration Cc:

Description (last modified by danieltj)

Plugin cards are displayed in a three column layout on screens set at 1600px or more on the /wp-admin/plugin-install.php page. As 4K and 5K are becoming more popular, three columns is not a sufficient use of space anymore.

We should introduce a new media query to display the plugins in four columns for a screen width of 2000px and above.

Attachments (11)

43573-3-columns.png (689.7 KB) - added by nielslange 18 months ago.
43573-4-columns.png (709.0 KB) - added by nielslange 18 months ago.
43573.diff (917 bytes) - added by nielslange 18 months ago.
43573-in-2100px.png (305.6 KB) - added by ivankristianto 15 months ago.
Tested on 2100px screen, result 4 columns
43573-in-1900px.png (257.2 KB) - added by ivankristianto 15 months ago.
Tested on 2100px screen, result 3 columns
43573-1.diff (1.4 KB) - added by nielslange 12 months ago.
43573-2.diff (1.1 KB) - added by nielslange 12 months ago.
Annotation on 2018-9-0.png (277.3 KB) - added by nielslange 11 months ago.
Annotation on 2018-9-0 (1).png (277.3 KB) - added by nielslange 11 months ago.
Annotation on 2018-9-0 (2).png (239.6 KB) - added by nielslange 11 months ago.
43573-3.diff (456 bytes) - added by nielslange 11 months ago.

Change History (29)

#1 @nielslange
18 months ago

  • Keywords needs-patch added

@nielslange
18 months ago

#2 @nielslange
18 months ago

  • Keywords has-patch added; needs-patch removed

#3 @danieltj
18 months ago

  • Description modified (diff)
  • Keywords needs-testing added
  • Summary changed from Enhance plugin list to Convert plugin cards into four columns for hi-res screens

@ivankristianto
15 months ago

Tested on 2100px screen, result 4 columns

@ivankristianto
15 months ago

Tested on 2100px screen, result 3 columns

#4 @ivankristianto
15 months ago

@danieltj I love this improvement. I wonder if we can get this included in WordPress 5.0 ?

#5 @nielslange
15 months ago

  • Keywords needs-testing removed

#6 @nielslange
15 months ago

  • Resolution set to worksforme
  • Status changed from new to closed

#7 @nielslange
15 months ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

#8 follow-up: @jobthomas
12 months ago

Tested and working good.

I've got two comments to potentially improve the patch:

  1. I think the breakpoint could be a bit higher than 2000px even, with the current breakpoint, the description is quite squashed. It seems that 2200 or even 2300 is a nicer breakpoint for readability.
  2. Currently, reordering the 15 plugins into 4 columns leaves a gap bottom right. Not sure what a CSS fix for that would be.

@nielslange
12 months ago

#9 in reply to: ↑ 8 @nielslange
12 months ago

Replying to jobthomas:

Tested and working good.

I've got two comments to potentially improve the patch:

  1. I think the breakpoint could be a bit higher than 2000px even, with the current breakpoint, the description is quite squashed. It seems that 2200 or even 2300 is a nicer breakpoint for readability.
  2. Currently, reordering the 15 plugins into 4 columns leaves a gap bottom right. Not sure what a CSS fix for that would be.

I've increased the breakpoint to 2300px and changed the number of items be the page from 30 to 36 to prevent the empty gap.

#10 @pento
12 months ago

Looking good @nielslange!

One minor tweak: you don't need to include the and ( max-width: 2299px ) media rule, as that block will be overridden, by the block after it.

@nielslange
12 months ago

#11 @nielslange
12 months ago

@pento As suggested, I just removed and ( max-width: 2299px ) and created a new patch.

#12 @pento
12 months ago

  • Milestone changed from Awaiting Review to 5.0
  • Owner set to pento
  • Status changed from reopened to assigned

#13 @pento
12 months ago

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

In 43669:

Plugin Installer: Allow 4 columns of search results on wide screens.

For screens wider than 2300px, show 4 colums of search results, as 3 columns looked quite stretched out.

This change also increases the default number of search results from 30 to 36, so that the columns have an even number of results, regardless of whether there are 2, 3, or 4 of them.

Props nielslange.
Fixes #43573.

#14 @johnbillion
11 months ago

  • Milestone changed from 5.0 to 5.1

#15 @nielslange
11 months ago

@pento You might remember that we've discussed to change

@media screen and ( min-width: 1600px ) and ( max-width: 2299px )

to

@media screen and ( min-width: 1600px )

in Orlando. Apparently, this leads to a design issue, as seen in Annotation on 2018-9-0) (1).png. Applying patch 43573-1.diff instead of patch 43573-2.diff should solved this issue, as seen in Annotation on 2018-9-0) (2).png.

To provide more context, while the latter statement @media screen and ( min-width: 2300px ) technically overwrites the earlier statement @media screen and ( min-width: 1600px ) { the statement .plugin-card:nth-child(3n+1) { ...} and .plugin-card:nth-child(3n) { .. } won't be overwritten by the later statement. Alternativelly, you can apply 43573-3.diff, which I just created to overwrite the earlier definition in the later statement.

Also, please also feel free to delete the attachment Annotation on 2018-9-0.png, as I've I’ve uploaded it twice by accident.

Last edited 11 months ago by nielslange (previous) (diff)

@nielslange
11 months ago

#16 follow-up: @chetan200891
8 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Tested patch 43573-3.diff It looks good to me! :)

#17 in reply to: ↑ 16 @nielslange
8 months ago

Thanks for testing the patch, @chetan200891. But shouldn’t the status remained closed and the resolution remained fixed?

#18 @pento
8 months ago

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

In 44646:

Plugin Installer: Ensure CSS for the 3-column view isn't applied to the 4-column view.

Props nielslange.
Fixes #43573.

Note: See TracTickets for help on using tickets.