30

On the profile tab on any user, there is a small "Summary" of the profile showing their avatar, reputation and their badges. It seems a little counter-intuitive for all the parts to have the hand cursor because it feels like it should do something.

For example, since the badge summary areas have the hand cursor, I would intuitively think that clicking them could take me to the badges section of the user. However, nothing happens. The only part of this area that actually does something is the avatar which takes you to the Profile tab of the user (You can see this a the end of the gif).

Here is a gif of what I mean:

enter image description here

Chrome 75.0.3770.100 on main only

9
  • Dang, it’s actually only on main… repro on Firefox Nightly 69.0a1. Commented Jul 3, 2019 at 9:32
  • 4
    Have the same effect on the main page (FF 56 and Chrome 75). Like ivarni said, doesn't happen on meta, though
    – Tom
    Commented Jul 3, 2019 at 9:32
  • 26
    The entire .avatar-card div has cursor set to pointer on main, but not here on meta. Browser shouldn't really make any difference.
    – ivarni
    Commented Jul 3, 2019 at 9:32
  • 2
    Reproduced in FF 67.0.4 as well. Commented Jul 3, 2019 at 12:21
  • 3
    If the behaviour is not expected, shouldn't it be a bug then?-
    – Tas
    Commented Jul 4, 2019 at 5:41
  • Oh i didn’t meant that. This isn’t unusual or distrupts the normal working of the site. Its just a UX improvement. More of a feature request
    – weegee
    Commented Jul 4, 2019 at 6:11
  • 2
    @weegee: This is clearly a reproducible problem on the site that [...] is due to a mistake, malfunction, or programming error. A low-priority bug is still a bug. Commented Jul 4, 2019 at 18:06
  • 3
    @weegee: That is the programming error. The cursor: pointer style is supposed to be used on clickable link-like elements, which the user card clearly isn't. (In fact, the style seems to be leaking from the Developer Story style sheet into all cards on all user pages because its selector isn't selective enough. And I'm not even sure if it's actually used for anything on the Dev Story tabs, or if it's just leftover clutter from some earlier design iteration.) Commented Jul 4, 2019 at 20:33
  • Now this is a bug. @IlmariKaronen
    – weegee
    Commented Jul 4, 2019 at 20:40

1 Answer 1

14

The bug is caused by the following style in the developer story style sheet, which is leaking into the main user profile page on SO:

.s-card {
    position: relative;
    padding: 12px;
    border: 1px solid #e4e6e8;
    background-color: #FFF;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    cursor: pointer;
    transition: box-shadow 600ms cubic-bezier(.165, .84, .44, 1)
}

and overriding the default card styling from stacks.css:

.s-card {
    padding: 12px;
    border: 1px solid #d6d9dc;
    border-radius: 3px;
    background-color: #FFF
}

A simple fix (assuming that the pointer cursor on all cards is, in fact, desirable in the developer story tab) would be to change the selector for that style (and any others that might be having the same issue) from just .s-card to .developer-story .s-card.

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .