Vertically center number cards in accordion box, see #46

phetsims · Feb 27, 2022 · 1ac7193 · 1ac7193
1 parent 0faecfc
commit 1ac7193
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/js/common/view/CASAccordionBox.ts b/js/common/view/CASAccordionBox.ts
@@ -22,6 +22,7 @@ import Shape from '../../../../kite/js/Shape.js';
 
 type CASAccordionBoxSelfOptions = {
   valueReadoutsNode: ValueReadoutsNode | null;
+  contentNodeOffsetY: number;
 };
 export type CASAccordionBoxOptions =
   CASAccordionBoxSelfOptions
@@ -41,7 +42,6 @@ class CASAccordionBox extends AccordionBox {
                titleNode: Node, layoutBounds: Bounds2, providedOptions: CASAccordionBoxOptions ) {
 
     const options = optionize<CASAccordionBoxOptions, CASAccordionBoxSelfOptions, AccordionBoxOptions>( {
-      tandem: Tandem.REQUIRED,
       titleAlignX: 'left',
       titleXSpacing: 8,
       cornerRadius: 6,
@@ -55,7 +55,8 @@ class CASAccordionBox extends AccordionBox {
       expandCollapseButtonOptions: {
         sideLength: BUTTON_SIDE_LENGTH
       },
-      titleNode: titleNode
+      titleNode: titleNode,
+      tandem: Tandem.REQUIRED
     }, providedOptions );
 
     const backgroundNode = new Rectangle( {
@@ -82,9 +83,9 @@ class CASAccordionBox extends AccordionBox {
     checkboxPanel.centerY = fullBackgroundBounds.centerY;
     backgroundNode.addChild( checkboxPanel );
 
-    // TODO for CK: content has no height at time of instantiation, so does not end up in the correct place.
-    // TODO-UX: SR says: Perhaps use x and y instead of center which requires bounds
-    contentNode.centerY = fullBackgroundBounds.centerY;
+    // TODO: SR says: Perhaps use x and y instead of center in order to vertically center the content, then
+    // options.contentNodeOffsetY should be omitted
+    contentNode.centerY = fullBackgroundBounds.centerY + options.contentNodeOffsetY;
     backgroundNode.addChild( contentNode );
 
     if ( options.valueReadoutsNode ) {

diff --git a/js/common/view/DotPlotNode.ts b/js/common/view/DotPlotNode.ts
@@ -31,7 +31,6 @@ type DotPlotNodeSelfOptions = {};
 export type DotPlotNodeOptions = NodeOptions & RequiredTandem;
 
 // TODO: Name needs to be inclusive of line plots too
-// TODO-UX: The tick marks interfere with the Xs on the plot
 class DotPlotNode extends Node {
 
   private readonly dotLayer: Node;

diff --git a/js/common/view/MeanOrMedianScreenView.ts b/js/common/view/MeanOrMedianScreenView.ts
@@ -75,6 +75,7 @@ class MeanOrMedianScreenView extends SoccerScreenView {
       titleNode,
       this.layoutBounds, {
         tandem: accordionBoxTandem,
+        contentNodeOffsetY: options.isMedianScreen ? -8 : 0,
         centerX: this.layoutBounds.centerX,
         top: this.questionBar.bottom + CASConstants.SCREEN_VIEW_Y_MARGIN,