User card layout #862
User card layout #862
Conversation
src/components/UserCard/UserCard.js
Outdated
| const hideContact = currentUser && isCurrentUser; | ||
| const separator = hideContact ? null : <span className={css.linkSeparator}>•</span>; | ||
| const contact = hideContact ? null : ( | ||
| const separator = isCurrentUser ? null : <span className={css.linkSeparator}>•</span>; |
There was a problem hiding this comment.
The intended behaviour is:
- unauthenticated user:
• contact - authenticated user, but not author:
• contact - authenticated user, author:
• edit
If I understood this right, the separator should be printed always (no need for ifs anymore)
Also, {contact} and {editProfileMobile} are alternatives for each others. So, for the clarity:
=> {isCurrentUser ? editProfileMobile : contact}
There was a problem hiding this comment.
Almost, but as seen in the second screenshot from the top, in the desktop view the edit profile link is on the right and the separator is hidden.
| justify-content: space-between; | ||
| align-items: baseline; | ||
| } | ||
| } |
There was a problem hiding this comment.
Could you check that the row is always divisible by 6px (and 8px on the desktop layout)? If not, add some padding to top and bottom so that it's size will match that requirement and texts are baselined nicely.
We should be more pedantic with our baseline rules so that there's less need for random margins between elements (i.e. margin-top: 12px makes sense, but 13px is wrong -> some other component has wrong height).
There was a problem hiding this comment.
@Gnito The component is now internally in baseline. However, I'll see if the css definitions could be improved a bit more to have more logical values regarding the baseline definitions.
In a certain viewport with a long user name or translations, Edit profile link used to overlap with the heading in
UserCard(actually the link was rendered outside theUserCardcomponent):No the edit profile link has been moved inside the
UserCardcomponent and it does not overlap the heading:Also previously in mobile view the edit profile link used to raise above the whole user card:
Now it's placed in place of the Contact link if the user of the card is logged in: