phetsims / buoyancy

"Buoyancy" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
2 stars 2 forks source link

Fluid displaced layout is above ground #144

Closed zepumph closed 3 weeks ago

zepumph commented 4 weeks ago

Since adding depth lines, the fluid-displaced panel is now above the ground.

image

@DianaTavares, how do you recommend we get rid of the vertical space?

zepumph commented 4 weeks ago

Here is what it looks like when I make the checkbox vertical spacing consistent with the bottom chunk:

image
DianaTavares commented 4 weeks ago

I was witting just about that! It looks amazing! Now all the checkboxes are equally distributed

DianaTavares commented 4 weeks ago

I don't love that the margin on the top is smaller than the margin of the panels on the bottom, and that the space between the panels is not equal distributed.

image

Move the checkboxes panels down is move all the panels on all screens down, is that super hard? another option is to make the Fluid Displaced panel smaller to allow that these vertical space is equal in all the panels

This recommendation is only to make the simulations more beautiful, put I understand that is not related to performance. I am not sure if it is important to work on that.

zepumph commented 4 weeks ago

This was a bit complicated, but I got it working and I don't mind the code too much, @DianaTavares please let me know if this was what you were thinking about, and assign it back to me for next steps.

zepumph commented 3 weeks ago

@DianaTavares likes it! Closing