Make WordPress Core

Opened 10 years ago

Closed 9 years ago

#29372 closed enhancement (maybelater)

Plugin search results display uneven

Reported by: mikehansenme's profile MikeHansenMe Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.0
Component: Plugins Keywords: close
Focuses: ui, administration Cc:

Description

The plugin search results are uneven depending on how long the description is. I think we can use masonry to help the layout. I have 2 patches. One that uses masonry and another that uses a fixed height and truncates the description.

Attachments (6)

default-results.png (189.1 KB) - added by MikeHansenMe 10 years ago.
current results
masonry-results.png (184.1 KB) - added by MikeHansenMe 10 years ago.
Masonry results
fixed-height-results.png (143.3 KB) - added by MikeHansenMe 10 years ago.
fixed height
masonry.diff (1.9 KB) - added by MikeHansenMe 10 years ago.
no-masonry.diff (1.0 KB) - added by MikeHansenMe 10 years ago.
fixed height diff
plugin-cards-flexbox.patch (1.0 KB) - added by afercia 10 years ago.
equal height plugin cards with CSS flexbox

Download all attachments as: .zip

Change History (13)

@MikeHansenMe
10 years ago

current results

@MikeHansenMe
10 years ago

Masonry results

@MikeHansenMe
10 years ago

fixed height

@MikeHansenMe
10 years ago

fixed height diff

#1 @helen
10 years ago

  • Focuses ui added
  • Keywords close added
  • Type changed from defect (bug) to enhancement

Masonry would be a no - makes it impossible to scan across rows of plugins quickly. I'd also be pretty opposed to truncating descriptions. I think it looks fine as-is - is there a really compelling reason to even out the gutters?

#2 @MikeHansenMe
10 years ago

I guess the first time I noticed it, it was a larger gap. I was having a hard time finding what I searched for to get the larger gap. I will post here if I come across it.

#3 @SergeyBiryukov
10 years ago

  • Component changed from Administration to Plugins
  • Focuses administration added

The first screenshot looks fine to me as well.

#4 follow-up: @nacin
10 years ago

I would like it if each row grow to the height of the tallest in that row, that way the bottoms of the cards line up and those are easier to scan. But in lieu of that I'm perfectly fine with the current situation.

#5 @ocean90
10 years ago

#29466 was marked as a duplicate.

#6 in reply to: ↑ 4 @afercia
10 years ago

Replying to nacin:

I would like it if each row grow to the height of the tallest in that row, that way the bottoms of the cards line up and those are easier to scan.

Equal height plugin cards can be made using CSS flexbox. Browsers that don't understand flexbox should be safe and still use floats. I can't test in IE 10/11 so if you think it's safe to start using flexbox, please carefully check this as there may be some "Known issues" as reported on http://caniuse.com/#feat=flexbox

Final result:

http://i.imgur.com/ZI6RWzn.png

@afercia
10 years ago

equal height plugin cards with CSS flexbox

#7 @helen
9 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

I think equal height using flexbox looks strange with all the extra whitespace. In any case, let's maybelater this, as I believe it to be a bit too early for us to be playing with flexbox in the admin.

Note: See TracTickets for help on using tickets.