search

phetsims / john-travoltage

"John Travoltage" is an educational simulation in HTML5, by PhET Interactive Simulations.
http://phet.colorado.edu/en/simulation/john-travoltage
GNU General Public License v3.0
4 stars 8 forks source link

Text covers toggle button in preferences during stringTest=long #431

Closed Nancy-Salpepi closed 3 years ago

Nancy-Salpepi commented 3 years ago

Test device MacBook Air (M1 chip)

Operating System 11.4

Browser Chrome 91.0.4472.114

Problem description https://github.com/phetsims/qa/issues/676

In stringTest=long, the text covers the toggle button in the visual preference section (where it normally says interactive highlights). I see the same problem in audio preferences as well.

Steps to reproduce

  1. add ?stringTest=long to the end of the URL.
  2. click on the preferences icon
  3. click on the second set of numbers (where "visual" normally is)

Visuals

Screen Shot 2021-07-26 at 1 30 30 PM

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪John Travoltage‬ URL: https://phet-dev.colorado.edu/html/john-travoltage/1.6.0-rc.1/phet/john-travoltage_all_phet.html? Version: 1.6.0-rc.1 2021-07-22 18:05:38 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36 Language: en-US Window: 1157x687 Pixel Ratio: 2/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

Nancy-Salpepi commented 3 years ago

Also seen in stringTest=rtl and stringTest=X

jessegreenberg commented 3 years ago

Thanks @Nancy-Salpepi -

Looks like it is because of the description for the toggle switch, when there is no description the layout is OK: image

Caused by these lines:

      // if there is a description Node, label is left aligned with it
      if ( options.descriptionNode ) {
        options.labelNode.leftBottom = options.descriptionNode.leftTop.minusXY( 0, options.descriptionSpacing );
      }
      else {
        options.labelNode.rightCenter = toggleSwitch.leftCenter.minusXY( options.labelSpacing, 0 );
      }
jessegreenberg commented 3 years ago

This should be improved in the above commit. @Nancy-Salpepi would you mind checking master and verifying this is fixed? If so, I will merge this commit into release branch.

Nancy-Salpepi commented 3 years ago

Still having the same issue @jessegreenberg

jessegreenberg commented 3 years ago

Sorry, I should have clarified this fix was in joist and I see that joist is still out of date on bayes: image

Could you please pull joist and try again?

Nancy-Salpepi commented 3 years ago

The issue is fixed in master

jessegreenberg commented 3 years ago

Thanks @Nancy-Salpepi, fix applied to john-travoltage-1.6 branch of joist and joist SHA updated in 1.6 branch of the sim.

KatieWoe commented 3 years ago

On ChromeOS this also occurs with rtl

jessegreenberg commented 3 years ago

Thanks @KatieWoe that should also be fixed after https://github.com/phetsims/joist/commit/a515f134125688ab3885f0d3951517c0c52acd1a