#3869 closed enhancement (fixed)
Remove pointer cursor in language box
Reported by: | vaishalipanchal | Owned by: | 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)
Change History (13)
#2
in reply to:
↑ 1
@
6 years ago
Yes, language names 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)...
This ticket was mentioned in Slack in #meta by mukeshpanchal27. View the logs.
6 years ago
#4
@
6 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.
#6
@
6 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
@
6 years ago
@boemedia thank you for sharing video and your thoughts. So we needs to remove pointer cursor from whole language box right?
#9
@
6 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.
#11
@
6 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.
Hmm. The language names are clickable to me (Firefox 62 64-bit on Win10)...