User cards don't avoid the header

Contribute UX
2

Hi,

It seems to me there are actually two different issues here.

  1. As you mention, if an article is too close to the header when the user-card is shown, the card will be covered by the header.
    This seems to be related to the way the offset is calculated when the user-card element is displayed. I think _positionCard (in /app/mixins/card-contents-base.js ) is what determines this when the _showCardOnClick method is called. There’s a _calculateTopOffset method, but it makes no reference to the header just #main_outlet or html. It seems to me that when the user-card is shown on the desktop, it should look for the header and use that as it’s top. However… it’s a bit more complicated because…
  2. This behavior is different between mobile and desktop sites…
    On a mobile device, when a user-card is displayed, it is positioned at the top of the page and in what seems to be a full-page modal. When you click anywhere on the page and try to scroll, the card is hidden and the modal destroyed. The same thing happens on the desktop if you click outside the user-card. However…on the desktop…you can scroll without clicking anywhere and the user-card will remain visible, ending up behind the header if you scroll that far.

So in addition to making sure the user-card respects the header on the desktop, I think it would be good if the behavior were the same across devices so that once you click outside the card, or try to scroll, the card is hidden again. What do you think about that?

2 Likes