Collection box pixel polishing

phetsims / build-a-molecule

"Build a Molecule" is an educational simulation in HTML5, by PhET Interactive Simulations.

GNU General Public License v3.0

8 stars 7 forks source link

Collection box pixel polishing #156

Closed arouinfar closed 4 years ago

arouinfar commented 4 years ago

Design meeting 1/30/20

Pixel polishes

Move strings above the box
Add padding between boxes
Larger collection panel
Bottom-align ResetAllButton with carousel dots

Self-assigning for mockups

arouinfar commented 4 years ago

[x] Molecule strings match Collection string -- 16 pt bold (Single screen)
[x] 15 px padding between bottom of the black boxes and the molecule string below it. (Single & Multiple)
[x] Bottom-align ResetAllButton with carousel dots and right-align with Your Molecules panel (same position on all 3 screens).

Denz1994 commented 4 years ago

Adjustments have been made as specified above in this comment. Can you review this dev version @arouinfar?

arouinfar commented 4 years ago

@Denz1994 this is definitely a nice improvement. A few more minor things:

It looks like the ResetAllButton is still bottom-aligned with the carousel body instead of its dots, so things are currently pretty tight on the Single screen.
On the Multiple screen, the You have: {{#}} string is being obscured a bit by the black box. This is most noticeable when the boxes are empty (bottom of p and y get cut off).

Denz1994 commented 4 years ago

The above changes have been applied to Master. The bottom of the resetAllButton is aligned with the bottom of the page control buttons (not the top). Also, there was a spacing added to the CollectionBoxNode VBox options so the box's edge doesn't overlap its label text.

Could you review @arouinfar?

arouinfar commented 4 years ago

Looks good @Denz1994, thanks!