Convert plugin cards into four columns for hi-res screens

[nielslange]

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.

[ivankristianto]

Tested on 2100px screen, result 4 columns

[ivankristianto]

Tested on 2100px screen, result 3 columns

[ivankristianto]

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

[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.

[nielslange]

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.

[pento]

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]

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

[pento]

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.

[nielslange]

@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.

[chetan200891]

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

[nielslange]

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

[pento]

In 44646:

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

Props nielslange.
Fixes #43573.