Making WordPress.org

Opened 10 years ago

Closed 10 years ago

#796 closed defect (bug) (fixed)

Make the plugin list inline-blocks to maintain layouts with long plugin titles

Reported by: clorith's profile Clorith Owned by:
Milestone: Priority: normal
Component: Profiles Keywords:
Cc:

Description

By using inline-blocks over the current table/float approach on the plugins list, we can make the list look a bit nicer and less..."teenage bedroom floor", in the cases where plugin titles exceed 3 lines.

The downloads count also gets pushed around a little, I'm wondering if we should perhaps do something to give that a more solid ground, giving it a text-align: right helps a little if the titles are long enough, but on short titles it doens't look quite right.

.main-plugins ul li {
display: inline-block;
padding-right: 40px;
width: 200px;
min-height: 95px;
margin-bottom: 15px;
vertical-align: top;
}

The above is my proposed fix for the plugin list it self, as for the downloads a simple p.downloads { text-align: right; } handles the palcement there. I've attached a couple screenshots to show what I mean, I tested it on the profile page at https://profiles.wordpress.org/storeapps/

Attachments (4)

plugins-pre-inline-block.PNG (59.9 KB) - added by Clorith 10 years ago.
The plugins list with the current float alignment
plugins-post-inline-block.PNG (57.0 KB) - added by Clorith 10 years ago.
The plugins list with the proposed inline block display
plugins-post-inline-block-downloads-right.PNG (57.3 KB) - added by Clorith 10 years ago.
Possible idea for download counter positioning?
plugin-post-morespace.png (137.0 KB) - added by melchoyce 10 years ago.

Download all attachments as: .zip

Change History (6)

@Clorith
10 years ago

The plugins list with the current float alignment

@Clorith
10 years ago

The plugins list with the proposed inline block display

@Clorith
10 years ago

Possible idea for download counter positioning?

#1 @melchoyce
10 years ago

  • Keywords ui-feedback added

Inline-block makes sense for a cleaner grid, but we shouldn't wrap the plugin titles around the icons — the icon should remain left and the title and download count should remain on the right. I also think we can tighten up the line-height a bit on both the title and download counter.

Here's the css I updated:

.main-plugins ul li {
    line-height: 1.4;
}

.main-plugins ul li h3 {
    margin: 2px 0 4px 0;
} 
/* Was just h3, but that feels so unspecific to me... I'd worry about it cascading */

Attachment incoming.

#2 @iandunn
10 years ago

  • Keywords has-patch ui-feedback removed
  • Resolution set to fixed
  • Status changed from new to closed

Fixed in [dotorg9969].

Note: See TracTickets for help on using tickets.