add avatar images to collaboration page

[lgh2]

Adds avatar images next to username on the page which allows a package owner to modify collaborators (Warehouse/manage/project//collaboration/).

From what I have seen, the existing code already displays real names, if they exist.

@nlhkabu Would it be possible for you to review the styling?

Partially addresses issue #2875.

[di]

@lgh2 Looks pretty good!

You're right that the user's full name is already there, so I would say that this PR definitely would fix #2875.

One thing I'm noticing is that each avatar links to the user's profile, but the username does not currently. It would probably be nice if both linked to the user's profile.

[lgh2]

@di Thank you! I will see about adding links to the usernames and full names.

[di]

Looks like we're missing the closing tag for this <a>.

[lgh2]

I will add it, thank you!

[lgh2]

Hi @di! When you have a moment, could you take a look at this?

[di]

This LGTM, I think @nlhkabu will have some suggestions though (looks like the avatar needs some padding between it and the name)

[lgh2]

Yes, I would like to hear Nicole's thoughts. I think there is also an issue where a little line appears beside the avatar when the user hovers over them, and I'm not sure how to fix it.

[di]

@lgh2 That's because there is a "whitespace-only text node" in between the end of the <img> tag and the </a> tag:

You'll need to put them all on one line with no whitespace in between.

[lgh2]

@nlhkabu I made the change Dustin suggested above and I think it fixed the issue.

We discussed putting the username and the real name on two separate lines, and I think you were going to paste some code related to that?

[nlhkabu]

hi @lgh2 - yes, but I'm having some trouble getting everything to align nicely. I'll post something once I can get CSS to behave :/

[nlhkabu]

hi @lgh2

So, the only solution I could come up with here was to wrap the avatar and names in a container div, and use flexbox to align them.

I also made the name and avatars have separate links, so we don't end up with ugly underlines in the middle of nowhere :)

<td class="table__user">
  <span class="table__user-details">
    <a href="{{ request.route_path('accounts.profile', username=role.user.username) }}" class="table__user-gravatar">
      {% set alt = "Avatar for {} from gravatar.com".format(role.user.username) %}
      <img src="{{ gravatar(role.user.email, size=50) }}" height="50" width="50" alt="{{ alt }}" title="{{ alt }}">
    </a>
    <a href="{{ request.route_path('accounts.profile', username=role.user.username) }}">
      <strong>{{ role.user.username }}</strong>
      {% if role.user.name %}
        <br>{{ role.user.name }}
      {% endif %}
    </a>
  </span>
</td>

This is the required CSS.
I would add it here: https://github.com/pypa/warehouse/blob/master/warehouse/static/sass/blocks/_table.scss#L382

The user-details container adds the flexbox styles, which will control the bahaviour of it's direct children (in the case the two <a>s.

Then I've simply applied a right margin to the gravatar to space it out a little.

.table__user-details {
  display: flex;
  align-items: center;
}

.table__user-gravatar {
  margin-right: 10px;
}

The result:

This solution will need to be checked across different resolutions (desktop, tablet, mobile) to make sure it's working properly :)

[lgh2]

@nlhkabu thank you for your help! @di When you have a chance, would it be possible for you to take a look at this?

[di]

This looks great!