Add team previews on ~user pages

[rohitpaulk]

Addresses #3852 (differentiate ~user and Team pages more)

[rohitpaulk]

Sharing early so that I can get feedback - I'm not happy with the design, and the CSS is pretty hacky.

Here's how this currently looks:

I've used two users as samples - ~bbatsov who has 4 teams, and ~mattbk who has 2 (one has a long name)

4 Teams, viewed as public:

4 Teams, viewed as user:

2 Teams, viewed as public:

2 Teams, viewed as user:

[rohitpaulk]

This is based on the initial idea: #3852 (comment)

Copy pasting that image here:

I also want to experiment with cards that are more like the identities page (rectangular, longer horizontally).

[chadwhitacre]

SO EXCITING!!!!!!!!!!!!!!! :D

[chadwhitacre]

Should we show ngivers and receiving? Or should we show the ~user's taking from the team? For now for almost everyone that will be equal to receiving, since Gratipay is the only team for which distributions are enabled.

Whichever it is, maybe try the $Ideal font there?

What are you unhappy with about the design? What problems are you trying to solve with it and what isn't being solved?

[chadwhitacre]

I would say this is close—and definitely better than what we have. How should we approach this in relation to the identity cards? If we take the time to properly factor the CSS now to account for both cases, then it should be fairly straightforward to apply to payment methods soon after.

[chadwhitacre]

I also want to experiment with cards that are more like the identities page (rectangular, longer horizontally).

👍

[chadwhitacre]

#3852 (comment)

Yep, would be great if we could come up with a pattern that fit all of those. We could call this component a 'card' - it must contain an avatar + title text, and optionally might contain sub-text.

👍

[rohitpaulk]

Should we show ngivers and receiving? Or should we show the ~user's taking from the team? For now for almost everyone that will be equal to receiving, since Gratipay is the only team for which distributions are enabled.

I think ngivers and receiving makes more sense, because they're properties of the team and not the user. Maybe just receiving would do? What is/are the most important metric(s) for a team/project on Gratipay?

Exposing the ~user's breakdown of takes per team definitely has value, but I think that'd better fit in something like a dropdown on hovering over 'Taking' in the chalkboard.

[rohitpaulk]

What are you unhappy with about the design? What problems are you trying to solve with it and what isn't being solved?

I'm talking only about graphic design here:

• The brown border seems a bit off - in particular, I don't think it interacts with the green banner well.
• Too much green inside the box - the top banner, the sub-text and the divider between the two sub-texts. I think we should look into neutralizing one of those so that the others stand out better.
• The divider between the two sub-texts is 2 px wide and is set to a 50% opacity green (explore partnership with Payoneer #396), which looks a bit weird to me.
• It would be great if we could keep the vertical length the same, using a design that worked well with both short and long names. Maybe try reducing the font a bit?

[chadwhitacre]

I think we should look into neutralizing one of those so that the others stand out better.

Seems like the subtext is the least important info—maybe try dropping that to gray + small caps like with the platform name in the social profiles listings?

It would be great if we could keep the vertical length the same, using a design that worked well with both short and long names. Maybe try reducing the font a bit?

You could also use overflow: hidden and then space the lines so that if the team name wraps, it simply pushes the subtext out of the card. They can always click through for that info.

[aandis]

@rohitpaulk this looks nice! few improvements I could think of -

1. Maybe try getting rid of those overflows? It's barely visible unless you zoom in but hard to unsee once you see it. ;)
2. I experimented with a black-ish divider (matching the team title color above) which would look ok too if it were a bit thinner.
3. I think the whole card should be clickable and not just the team name.

[aandis]

You could also use overflow: hidden and then space the lines so that if the team name wraps, it simply pushes the subtext out of the card. They can always click through for that info.

yep. could also ellipsize the team name which would give you same vertical length for all the cards.

[mattbk]

I completely missed this! Looks great.

Will also close #4133.

Just a thought; maybe making teams look like they do on the front page or in search would be better?

[chadwhitacre]

This seems pretty close and would be nice to have. Might pick this up ...

[chadwhitacre]

Closing in favor of #4353.