897487 - Long names in groups listing pages wraps; causes layout issues.

Status: VERIFIED FIXED

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

Created attachment 780406 [details]
long group names cause layout issue

User Agent: Firefox Aurora

On group listing pages (https://mozillians.allizom.org/en-US/groups/), when a group has a very long name the text wraps inside the chiclet. This causes a layout issue. We should either...

* make all rows the height of the tallest chiclet, or
* force long content inside chiclets to be truncated and not wrap

See attachment for an example.

Comment 1

[Julia Elman]

Pull request submitted here: https://github.com/mozilla/mozillians/pull/582

Comment 2

[Julia Elman]

Created attachment 793783 [details]
Screenshot for new layout

Comment 3

[Giorgos Logiotatidis [:giorgos]]

Maybe that's out of the scope of this bug but maybe you can also replace / remove the 'doctor' icon as well? Also the way it's now, is it still easy to word wrap and end up similar to the attached image? If yes, maybe we add the count to a separate line by itself?

Comment 4

[Giorgos Logiotatidis [:giorgos]]

Created attachment 793874 [details]
Mozillians: Functional Areas 2013-08-22 09-58-31.png

Comment 5

[Julia Elman]

Just pushed up some more changes, here is a list of those changes:

1) Increase height of the <li> so wrapping would not cause layout breakage issues.
2) Swapped out `md` icon for `groups` icon
3) Added a line break after the group/func. areas name and placed the count underneath.
4) Added the word `members` so it is more explicit as to what that icon signifies

See attached screenshot for a visual example. You can see in the image that I added a "mmmmmmm..." group name to display what happens when you have a longer group/func. area name.

Comment 6

[Julia Elman]

Created attachment 794186 [details]
Screenshot, refs comment #5

Comment 7

[Giorgos Logiotatidis [:giorgos]]

Sweet, I like it!

So on longer names, we'll end up with bigger chiclet. Is that expected / wanted?

Comment 8

[Julia Elman]

Giorgos - glad you like it!

Yes, longer names will end up displaying a larger chiclet. I think it looks ok, since it doesn't break the layout and stays within the space provided within the <li>. Let me know what you think!

I also added the {{ group.name }} as a title attribute, per your request on my PR, and pushed it up.

Comment 9

[Justin Crawford [:hoosteeno] [:jcrawford]]

I like this -- it is a great improvement. Thanks!

Comment 10

[[github robot]]

Commits pushed to master at https://github.com/mozilla/mozillians

https://github.com/mozilla/mozillians/commit/a59a8ff039670b5059d41c3d5e61aedc028f8672
[Fix Bug 897487] Making columns for groups and func areas lists more uniform.

https://github.com/mozilla/mozillians/commit/fa64663dc746f83fc33a2df222ed504a36e31e43
Merge pull request #582 from juliaelman/897487-fix-group-name-wrapping

[Fix Bug 897487] Making columns for groups and func areas lists more uniform.

Comment 11

[Matt Brandt [:mbrandt]]

Created attachment 795472 [details]
qa - verified on stage

QA verified on stage with Firefox RC (OSX)