Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#43573 closed enhancement (fixed)

Convert plugin cards into four columns for hi-res screens

Reported by: nielslange's profile nielslange Owned by: pento's profile 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 7 years ago.
43573-4-columns.png (709.0 KB) - added by nielslange 7 years ago.
43573.diff (917 bytes) - added by nielslange 7 years ago.
43573-in-2100px.png (305.6 KB) - added by ivankristianto 6 years ago.
Tested on 2100px screen, result 4 columns
43573-in-1900px.png (257.2 KB) - added by ivankristianto 6 years ago.
Tested on 2100px screen, result 3 columns
43573-1.diff (1.4 KB) - added by nielslange 6 years ago.
43573-2.diff (1.1 KB) - added by nielslange 6 years ago.
Annotation on 2018-9-0.png (277.3 KB) - added by nielslange 6 years ago.
Annotation on 2018-9-0 (1).png (277.3 KB) - added by nielslange 6 years ago.
Annotation on 2018-9-0 (2).png (239.6 KB) - added by nielslange 6 years ago.
43573-3.diff (456 bytes) - added by nielslange 6 years ago.

Change History (29)

#1 @nielslange
7 years ago

  • Keywords needs-patch added

@nielslange
7 years ago

#2 @nielslange
7 years ago

  • Keywords has-patch added; needs-patch removed

#3 @danieltj
7 years 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
6 years ago

Tested on 2100px screen, result 4 columns

@ivankristianto
6 years ago

Tested on 2100px screen, result 3 columns

#4 @ivankristianto
6 years ago

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

#5 @nielslange
6 years ago

  • Keywords needs-testing removed

#6 @nielslange
6 years ago

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

#7 @nielslange
6 years ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened

#8 follow-up: @jobthomas
6 years 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
6 years ago

#9 in reply to: ↑ 8 @nielslange
6 years 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
6 years 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
6 years ago

#11 @nielslange
6 years ago

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

#12 @pento
6 years ago

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

#13 @pento
6 years 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
6 years ago

  • Milestone changed from 5.0 to 5.1

#15 @nielslange
6 years 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.

Version 1, edited 6 years ago by nielslange (previous) (next) (diff)

@nielslange
6 years ago

#16 follow-up: @chetan200891
6 years 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
6 years ago

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

#18 @pento
6 years 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.