Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bounding box for "sign in" / "sign up" buttons is larger than click zone: looks like you can click and you can't #98

Open
cellio opened this issue Sep 2, 2024 · 2 comments
Labels
type: bug Something isn't working

Comments

@cellio
Copy link
Member

cellio commented Sep 2, 2024

meta:291578

The area around the "sign in" and "sign up" buttons in the header switches the cursor to the hand, implying you can click, but only the button itself is actually clickable. This is confusing.

This ought to be a simple matter of CSS or HTML, but I tried looking at the code and the style sheet and was defeated. The relevant places seem to be app/views/layouts/_header.html.erb and app/assets/stylesheets/application.scss (search for header--item), but I'm not sure what to do from there to find and adjust either the bounds or the click zone, sorry.

@cellio cellio added the type: bug Something isn't working label Sep 2, 2024
@celtschk
Copy link

celtschk commented Sep 2, 2024

I don't know whether the same class is used elsewhere and the change might break other things, but I think it should be sufficient, if in _header.scss the line

cursor: pointer;

is removed from the styling of .header--item (the actual button is a link, and therefore should change the cursor to a hand anyway).

Note that this is not a tested change (I haven't ever tried to install QPixel; I did check disabling the corresponding CSS line in Firefox using the developer tools, though), just an educated guess. But the change is easy enough (removing one line) that anyone who knows how to run QPixel should be able to easily test it.

In case it wasn't clear, I'm speaking about this snippet:

[....]
    .header--item {
      padding: $header-item-padding-y*$padding-unit $header-item-padding-x*$padding-unit;
      margin: $header-item-margin-y*$margin-unit $header-item-margin-x*$margin-unit;
      cursor: pointer;
      font: inherit;
      color: $header-item-color;
[...]

The line

      cursor: pointer;

should be removed from that code (it's line 64, it the Firefox developer tools are to be trusted).

@ArtOfCode- ArtOfCode- transferred this issue from codidact/qpixel Sep 7, 2024
@ArtOfCode-
Copy link
Member

Transferred to co-design as the issue is in CD code not QPixel code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants