New user cards and user profile page design deployed

Looking great, thanks to the hard work of @awesomerobot.

Check it out and see what you think – both the full user profile, and the pop up cards.

Note that you can put a badge image or glyph on your card, if you hold a badge that is capable.

More tweaks to come, but initial feedback is good at this point.

7 Likes

This is just kind of like… Wooooow!!! Just can’t wait for the update of my site!

cool!

one nitpick: on Windows Chrome, many usercards I’ve looked at now have this scrollbar, which I find a little annoying / out of place…

User cards do need to show join date and last post date. Location would also be nice, but maybe could be dropped. But I use last post date and join date to quickly tell if I am dealing with a newbie or lurker.

4 Likes

Just added join/last post/groups to usercard

https://github.com/discourse/discourse/pull/2939

4 Likes
  • buttons (invites, logout, preferences) on full profile page not appearing properly in IE11 seems OK to me now

  • group membership is not visible on full profile page any more, but should be (somewhere)

  • you open a User Card (the thing that pops up when you click on a username) and they have the icon for a badge selected to show then you get slightly different results if you middle click it or left click it. It looks like the badge coloring class in the CSS isn’t being filled in fully in one of the cases (“badge-type-” instead of “badge-type-[color]”). we can’t repro this?

4 Likes

Firefox 33 on Ubuntu Gnome - no scroll bar, resulting in missing text.

I usually view the site with text zoomed to 110%:

but even at 100% there is still an issue:

Maybe a “more” ellipsis for those with longer content would be easy?

1 Like

Yeah, right now long profiles are hidden with CSS, which has been causing a few problems… seems like it should definitely have a character limit where it’s truncated with JS and an ellipsis gets added.

It’s easy to truncate single-line text with CSS and text-overflow: ellipsis; but it just doesn’t work on multiline text.

3 Likes

Suspended users also cause layout problems on the user card

2 Likes

@mentions need some CSS I think. Profile page:

User card:

1 Like

Do you have a custom CSS for mentions? I can’t seem to reproduce this locally. The class is applied to the HTML but I don’t get a grey background.

1 Like

I’ve added a little helper to display multiple lines of text with an ellpisis.

https://github.com/discourse/discourse/commit/bab4f48eebbcfa975ea3b0eb83b659ac994dab3a

3 Likes

I find the way it load is a bit startling.

Perhaps something like this

I’m gonna see what I can do to make the loading / popping in less jarring Tomorrow.

Ick - keep meaning to remove that before reporting CSS stuff - yes we do - to underline proper links, but needed extra to not underline @mentions or faux-links - I’ll have a poke around with it.

However, forcing removal of site-local CSS doesn’t seem to help: http://what.thedailywtf.com/users/pjhh/activity?preview-style=default

  • remove glyphs from the “Last post” metadata line, use dark/light coloring there to distinguish key and value pairs ala the regular user page. (These metadata glyphs fight visually with the badge glyphs)

  • remove groups info, this is too much detail to show on the user card

  • try to do a “fade” effect on the last line of the user about me if it has the ellipsis like so http://css-tricks.com/text-fade-read-more/

Reproducible here:

3 Likes

Thanks, I was dumb when I tried to reproduce it and didn’t mention an actual person on the site. I’ve got a fix in master:

https://github.com/discourse/discourse/commit/74e2b8f6746afbb3404fade83cd157327daa8a51

2 Likes

Few other changes…

Suppress post count button when in filtered view

If the badge has an image vs an icon, use a larger space for the badge image

I think we should make the card a bit wider when the user has a badge image as well.