search

phetsims / proportion-playground

"Proportion Playground" is an educational simulation in HTML5, by PhET Interactive Simulations at the University of Colorado Boulder.
GNU General Public License v3.0
2 stars 4 forks source link

Necklace button alignment #64

Closed phet-steele closed 7 years ago

phet-steele commented 7 years ago

The necklace's refresh button (Explore screen) and eyeball button (Predict screen) are not aligned nicely with respect to the Reset All button when viewing two necklaces. Dev bounds are provided to get a sense of how much room there is to move buttons around. Might have to move the Reset All button inward to accommodate the larger eyeball button?

screen shot 2017-03-10 at 10 55 30 am screen shot 2017-03-10 at 10 55 38 am

Seeon on macOS 10.12.3 Chrome. For phetsims/tasks/issues/794. URL: http://www.colorado.edu/physics/phet/dev/html/proportion-playground/1.0.0-dev.19/proportion-playground_en.html?dev Version: 1.0.0-dev.19 2017-03-03 19:51:10 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 Language: en-US Window: 1920x1000 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: 32 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"a707328c","branch":"master"},"axon":{"sha":"e0b1c391","branch":"master"},"babel":{"sha":"dd41f374","branch":"master"},"brand":{"sha":"0be722ee","branch":"master"},"chipper":{"sha":"43ca9ac4","branch":"master"},"dot":{"sha":"16c2f26b","branch":"master"},"joist":{"sha":"695d3638","branch":"master"},"kite":{"sha":"f4c67cff","branch":"master"},"phet-core":{"sha":"c5c6c2a8","branch":"master"},"phetcommon":{"sha":"49b5cb0d","branch":"master"},"proportion-playground":{"sha":"06f03e67","branch":"master"},"query-string-machine":{"sha":"d8a4ff18","branch":"master"},"scenery":{"sha":"04879a99","branch":"master"},"scenery-phet":{"sha":"45adfa82","branch":"master"},"sherpa":{"sha":"98566566","branch":"master"},"sun":{"sha":"dc8dcfbf","branch":"master"},"tandem":{"sha":"45e9ee17","branch":"master"}}

BryceAG commented 7 years ago

I feel like it is worth mentioning that the necklace screen is the only screen where those buttons aren't centered when viewing two items. I realize that if you make a "pattern" of 20 and 19 then the entire vertical space is used up, but it is still inconsistent.

jonathanolson commented 7 years ago

I can definitely align these. It was actually intentional, so that the buttons on the explore/predict screens had the same center, with the bigger button being aligned.

I'll align them to the left, and will pass it by @amanda-phet to make sure it looks good when switching between the screens.

jonathanolson commented 7 years ago

@amanda-phet, can you try master and see if it looks ok:

  1. On the explore screen (necklace), show both.
  2. On the predict screen (necklace), show both.
  3. Switch back and forth between explore and predict screens (button gets replaced on right side).

Does that look ok?

jonathanolson commented 7 years ago

@phet-steele recommended center-aligning all of the buttons, so I'll look into that first.

jonathanolson commented 7 years ago

Center-aligned, reassigning for review.

amanda-phet commented 7 years ago

Looks good everywhere except the Apple scene... in the Predict screen the larger button pushes the Apple Cost meter up. Can we lower those buttons so that doesn't happen?

jonathanolson commented 7 years ago

I fixed a few things about the Apple cost meter (positioning should be the same on both screens, shouldn't overlap anything, etc.)

Does that look good?

amanda-phet commented 7 years ago

It looks good to me. Closing.