Making WordPress.org

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#3869 closed enhancement (fixed)

Remove pointer cursor in language box

Reported by: vaishalipanchal's profile vaishalipanchal Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: General Keywords: has-patch ui-feedback has-screenshots 2nd-opinion dev-feedback
Cc:

Description

https://wordpress.org/ needs to remove pointer cursor in language box as whole language box is not clickable so need to set cursor as default.

Attachments (2)

cursor-issue.png (64.0 KB) - added by vaishalipanchal 5 years ago.
3869.patch (1.0 KB) - added by vaishalipanchal 5 years ago.

Download all attachments as: .zip

Change History (13)

#1 follow-up: @tobifjellner
5 years ago

Hmm. The language names are clickable to me (Firefox 62 64-bit on Win10)...

#2 in reply to: ↑ 1 @vaishalipanchal
5 years ago

Yes, language name link is clickable and it's cursor is pointer but i am talking about whole box why whole box is set to pointer?

Replying to tobifjellner:

Hmm. The language names are clickable to me (Firefox 62 64-bit on Win10)...

Last edited 5 years ago by vaishalipanchal (previous) (diff)

This ticket was mentioned in Slack in #meta by mukeshpanchal27. View the logs.


5 years ago

#4 @tobifjellner
5 years ago

There's a huge inline style block in the main page when visiting wordpress.org. In total, the format 'cursor:pointer; is called three times for various media:

<style type="text/css">#home-welcome,body,html{font-size:16px}#home-welcome *{box-sizing:border-box}#home-welcome{font-family:"Open Sans",sans-serif;line-height:1.5;font-weight:400;color:#32373c;padding:0;margin:0;background:#fff}#home-welcome header{padding:18px 36px;background:#0073aa}@media (min-width:737px){body,html{font-size:18px}#home-welcome header{padding:1.5625rem}}#home-welcome header h1{text-align:center;color:#FFF;line-height:1}#home-welcome h1{font-size:3.8147rem;font-weight:300}#home-welcome h1,#home-welcome h2,#home-welcome h3,#home-welcome h4,#home-welcome h5,#home-welcome h6{line-height:1.5;margin:2rem 0 1rem;font-family:inherit}#home-welcome header p.subheading{color:#FFF}#home-welcome p.subheading{font-size:1.25rem;font-weight:300;text-align:center;color:#82878C;margin:-.4rem auto 2rem}#home-welcome p{margin:1em 0;max-width:35.52714rem;font-size:18px}@media (min-width:67rem){#home-welcome #lang-guess{margin:1rem auto 0;max-width:50rem}}#home-welcome #lang-guess{padding:.5rem;background:#C7E8CA;text-align:center;font-size:.8rem;cursor:pointer}#home-welcome .intro{padding-bottom:0}#home-welcome .screenshots{height:400px;overflow:hidden;padding:1rem 1rem 0;position:relative;left:-30px;right:0;width:106%}@media(max-width:739px){#home-welcome .screenshots{padding:0;left:auto;right:auto;width:100%}}#home-welcome .screenshots .dashboard{box-shadow:0 1px 8px rgba(0,0,0,.2);max-width:800px}#home-welcome .screenshots .dashboard-mobile{position:absolute;bottom:-100px;right:1px;z-index:1;max-width:200px}#home-welcome img{border-style:none;max-width:100%}#home-welcome .showcase{max-width:100%;margin:0;border-bottom:none;padding-left:0;padding-right:0}#home-welcome section{margin:0 auto;padding:3.05176rem 1.5625rem;max-width:50rem;border-bottom:2px solid #EEE}#home-welcome section:last-child{border-bottom:none}#home-welcome section h2{text-align:center;line-height:1}#home-welcome h2{font-size:2.44141rem;font-weight:300}#home-welcome .showcase>div{width:100%;height:300px;background:url(https://s.w.org/images/home/collage-min.jpg?3) center top;background-size:cover;box-shadow:inset 0 0 8px rgba(0,0,0,.4)}@media (min-width:700px){#home-welcome .showcase>div{height:600px;background-attachment:fixed}}#home-welcome .cta-link{max-width:100%;text-align:center;margin:3.05176rem 0 0}#home-welcome a:hover{text-decoration:underline}#home-welcome a:active,a:hover{outline-width:0}#home-welcome a{color:#0073aa;text-decoration:none;background-color:transparent;border:none}#home-welcome .features{border-top:2px solid #eee}#home-welcome .features ul{list-style:none;margin:3rem 0;padding:0;display:flex;flex-wrap:wrap;align-items:center}#home-welcome .features ul li{display:flex;align-items:center;justify-content:center;flex-direction:column;width:50%;height:160px;text-align:center;border-right:1px solid #eee;border-bottom:1px solid #eee}@media (max-width:739px){#home-welcome h1{font-size:3.2rem}#home-welcome .features ul li:nth-child(n+7){border-bottom:none}#home-welcome .features ul li:nth-child(2n){border-right:none}}@media (min-width:740px){#home-welcome .features ul li{width:25%;height:200px}#home-welcome .features ul li:nth-child(4n){border-right:none}#home-welcome .features ul li:nth-child(n+5){border-bottom:none}}#home-welcome .features ul li img{height:2.5rem;margin:.25rem auto 1.25rem}#home-welcome .features ul li img,#home-welcome .features ul li span{display:block;margin-bottom:1rem;color:#00A0D2;font-size:3rem}#home-welcome .dashicons{display:block;margin:0 auto -1rem;font-size:4rem;color:#CBCDCE;width:auto;height:auto}#home-welcome .features p{text-align:center;margin-left:auto;margin-right:auto}#home-welcome .community-2{background:url(https://s.w.org/images/home/community-2.jpg?3) no-repeat;position:relative;max-width:100%;background-size:cover;height:500px;border:none;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column}#home-welcome .community-2 .screen{background:rgba(0,0,0,.5);position:absolute;left:0;right:0;top:0;z-index:0;width:100%;height:100%}#home-welcome .community-2 .subheading,#home-welcome .community-2 h2{color:#fff;position:relative;z-index:1;text-shadow:0 0 8px rgba(0,0,0,.5);text-align:left;margin:0 0 1rem;max-width:100%}#home-welcome section .container{max-width:50rem;margin:0 auto;z-index:0}@media (min-width:737px){#home-welcome .cta-wrapper{font-size:.8rem;margin:4rem 0 2rem}}#home-welcome .cta-wrapper{text-align:center;font-size:.9144rem;margin:2rem 0;display:block}#home-welcome .button,#home-welcome .button-primary,#home-welcome .button-secondary{display:inline-block;text-decoration:none!important;font-size:.8rem;line-height:1;height:1.5625rem;margin:0;padding:0 .8rem;cursor:pointer;border-width:1px;border-style:solid;-webkit-appearance:none;-webkit-border-radius:3px;border-radius:3px;white-space:nowrap;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#home-welcome button::-moz-focus-inner,#home-welcome input[type=reset]::-moz-focus-inner,#home-welcome input[type=button]::-moz-focus-inner,#home-welcome input[type=submit]::-moz-focus-inner{border-width:0;border-style:none;padding:0}#home-welcome .button-group.button-xl .button,#home-welcome .button.button-xl{height:2.44141rem;line-height:2.3;padding:0 1.5rem;font-size:1rem}#home-welcome .button-group.button-large .button,#home-welcome .button.button-large{height:1.95313rem;line-height:1;padding:0 1rem}#home-welcome .button-group.button-small .button,#home-welcome .button.button-small{height:1.25rem;line-height:1;padding:0 .5rem;font-size:.64rem}#home-welcome .button:active,#home-welcome .button:focus{outline:0}#home-welcome .button.hidden{display:none}#home-welcome input[type=reset],#home-welcome input[type=reset]:active,#home-welcome input[type=reset]:focus,#home-welcome input[type=reset]:hover{background:0 0;border:none;-webkit-box-shadow:none;box-shadow:none;padding:0 2px 1px;width:auto}#home-welcome .button,#home-welcome .button-secondary{color:#555;border-color:#ccc;background:#f7f7f7;-webkit-box-shadow:0 1px 0 #ccc;box-shadow:0 1px 0 #ccc;vertical-align:top}#home-welcome p .button{vertical-align:baseline}#home-welcome .button-secondary:focus,#home-welcome .button-secondary:hover,#home-welcome .button.focus,#home-welcome .button.hover,#home-welcome .button:focus,#home-welcome .button:hover{background:#fafafa;border-color:#999;color:#23282d}#home-welcome .button-link:focus,#home-welcome .button-secondary:focus,#home-welcome .button.focus,#home-welcome .button:focus{border-color:#5b9dd9;-webkit-box-shadow:0 0 3px rgba(0,115,170,.8);box-shadow:0 0 3px rgba(0,115,170,.8)}#home-welcome .button-secondary:active,#home-welcome .button.active,#home-welcome .button.active:hover,#home-welcome .button:active{background:#eee;border-color:#999;-webkit-box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}#home-welcome .button.active:focus{border-color:#5b9dd9;-webkit-box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8);box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8)}#home-welcome .button-disabled,#home-welcome .button-secondary.disabled,#home-welcome .button-secondary:disabled,#home-welcome .button-secondary[disabled],#home-welcome .button.disabled,#home-welcome .button:disabled,#home-welcome .button[disabled]{color:#a0a5aa!important;border-color:#ddd!important;background:#f7f7f7!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:0 1px 0 #fff!important;cursor:default;-webkit-transform:none!important;-ms-transform:none!important;transform:none!important}#home-welcome .button-link{margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;border:0;-webkit-border-radius:0;border-radius:0;background:0 0;outline:0;cursor:pointer}#home-welcome .button-link:focus{outline:#5b9dd9 solid 1px}#home-welcome .button-primary{background:#0085ba;border-color:#0073aa #006799 #006799;-webkit-box-shadow:0 1px 0 #006799;box-shadow:0 1px 0 #006799;color:#fff;text-decoration:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}#home-welcome .button-primary.focus,#home-welcome .button-primary.hover,#home-welcome .button-primary:focus,#home-welcome .button-primary:hover{background:#008ec2;border-color:#006799;color:#fff}#home-welcome .button-primary.focus,#home-welcome .button-primary:focus{-webkit-box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db;box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}#home-welcome .button-primary.active,#home-welcome .button-primary.active:focus,#home-welcome .button-primary.active:hover,#home-welcome .button-primary:active{background:#0073aa;border-color:#006799;-webkit-box-shadow:inset 0 2px 0 #006799;box-shadow:inset 0 2px 0 #006799;vertical-align:top}#home-welcome .button-primary-disabled,#home-welcome .button-primary.disabled,#home-welcome .button-primary:disabled,#home-welcome .button-primary[disabled]{color:#66c6e4!important;background:#008ec2!important;border-color:#007cb2!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important;cursor:default}#home-welcome .button-group{position:relative;display:inline-block;white-space:nowrap;font-size:0;vertical-align:middle}#home-welcome .button-group>.button{display:inline-block;-webkit-border-radius:0;border-radius:0;margin-right:-1px;z-index:10}#home-welcome .button-group>.button-primary{z-index:100}#home-welcome .button-group>.button:hover{z-index:20}#home-welcome .button-group>.button:first-child{-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}#home-welcome .button-group>.button:last-child{-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}#home-welcome .button-group>.button:focus{position:relative;z-index:1}#home-welcome a.button.button-large{line-height:31.25px;line-height:1.953125rem}#lang-guess{width:inherit;max-width:inherit;margin:0;background:inherit;border:inherit;text-align:center;font:inherit;padding:0;-moz-border-radius:inherit;-khtml-border-radius:inherit;-webkit-border-radius:inherit;border-radius:inherit}</style>

Probably the idea was to stress the fact that "We've got some links here". But the sad result is that the links that really ARE there become less discoverable, since the cursor anyway changes to pointer when you hover the language names. But with the whole language-guess block having the same format, this becomes less visible.

#5 @vaishalipanchal
5 years ago

  • Keywords dev-feedback added

#6 @boemedia
5 years ago

I made a little screencast to clarify the problem here. It now looks like the whole green box is clickable, as the cursor changes to a pointer when entering the green box. This is confusing.

Compare it to the header menu. Here, the cursor only changes to a pointer when you hover the menu items, not in the entire black header area.

Same should go for the language box. Don't make it look like it's clickable when it's not.
https://cl.ly/6547fc308bd9

#7 @mukesh27
5 years ago

@boemedia thank you for sharing video and your thoughts. So we needs to remove pointer cursor from whole language box right?

#8 @coffee2code
5 years ago

  • Owner set to coffee2code
  • Status changed from new to accepted

#9 @coffee2code
5 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

Fixed in [14509-dotorg].

@vaishalipanchal: Thanks for the patch! However, the necessary change was in a non-open sourced template file.

#10 @vaishalipanchal
5 years ago

@coffee2code, can't get any pros for this ticket?

Version 0, edited 5 years ago by vaishalipanchal (next)

#11 @coffee2code
5 years ago

@vaishalipanchal: Hi, that's what I was alluding to with what I said. The proposed implementation in the patch wasn't the approach taken in the commit. Props are given if the proposed patch materially applies, at least in part, to the final solution, or if the proposal contributes significantly to the solution.

Note: See TracTickets for help on using tickets.