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

VERIFIED FIXED in 2013-08-22

Status

VERIFIED FIXED
5 years ago
5 years ago

People

(Reporter: hoosteeno, Assigned: julia)

Tracking

other
2013-08-22

Details

(Whiteboard: [kb=1082451] )

Attachments

(5 attachments)

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.
Whiteboard: [kb=1082451]
(Assignee)

Comment 1

5 years ago
Pull request submitted here: https://github.com/mozilla/mozillians/pull/582
Assignee: nobody → julia
(Assignee)

Comment 2

5 years ago
Created attachment 793783 [details]
Screenshot for new layout
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?
Created attachment 793874 [details]
Mozillians: Functional Areas 2013-08-22 09-58-31.png
(Assignee)

Comment 5

5 years ago
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.
(Assignee)

Comment 6

5 years ago
Created attachment 794186 [details]
Screenshot, refs comment #5
Sweet, I like it!

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

Comment 8

5 years ago
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.
I like this -- it is a great improvement. Thanks!
Status: NEW → ASSIGNED

Comment 10

5 years ago
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.

Updated

5 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Created attachment 795472 [details]
qa - verified on stage

QA verified on stage with Firefox RC (OSX)

Updated

5 years ago
Status: RESOLVED → VERIFIED
Target Milestone: --- → 2013-08-22
You need to log in before you can comment on or make changes to this bug.