Merge pull request #43 from concord-consortium/188185792-fix-sizing-i…

…n-codap

Fix issues with scrollbars, tabs, and dimensions in CODAP

src/components/App.scss

@@ -32,20 +32,16 @@
   .tab-content {
     // display: none; would be easier, but it somehow Seasons 3D view doesn't initialize itself properly
     // when display: none; is used.
-    visibility: hidden;
     width: 0;
     height: 0;
+    overflow: hidden;
     position: absolute;
     padding-left: 9px $edge-padding $edge-padding $edge-padding;
 
-    // note each .tab-content is a wrapper for tab.location, tab.simulation, tab.about
-    // eahc of which maintain their own static layout widths
-    // this is 100% wide to cover the space affored by CODAP window whose width can change
     &.active {
+      width: auto;
+      height: auto;
       background-color: white;
-      visibility: visible;
-      width: 100%;
-      height: 100%;
     }
   }
 }

src/components/about-tab.scss

@@ -7,7 +7,6 @@
   width: $location-tab-width;
   height: $location-tab-height;
   padding: $tab-padding;
-  height: 800px; // extend beyond enclaosing for scroll
 
   h2 {
     font-size: 1.2em;

src/components/checkbox.tsx

@@ -21,7 +21,7 @@ export const Checkbox = ({ checked, onChange, label, disabled }: ICheckboxProps)
   return (
     <div className={clsx("custom-checkbox", { disabled })} onClick={handleClick}>
       <CheckboxSVG className={clsx("checkbox-icon", { checked })} />
-      <label>{label}</label>
+      <label>{ label }</label>
     </div>
   );
 }

src/components/dropdown.scss

@@ -105,7 +105,7 @@
 
     .day-length-dropdown-options {
       $padding: 4px;
-      z-index: 1;
+      z-index: 100;
       position: absolute;
       background-color: white;
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);

src/components/dropdown.tsx

@@ -97,7 +97,7 @@ export const Dropdown = <T extends IOption>({
   return (
     <div className={clsx("day-length-dropdown-container", { inline })}>
       <div className="day-length-dropdown-label">
-        <label>{label}</label>
+        <label>{ label }</label>
       </div>
       <div className="day-length-dropdown" style={{ width }}>
         {
@@ -116,14 +116,14 @@ export const Dropdown = <T extends IOption>({
                 onClick={handleMainButtonClick}
                 onKeyDown={handleKeyDown}
               >
-                {value}
+                { value }
               </button>
               <DropdownArrow className={clsx("arrow-icon", { up: showOptions })} />
             </div>
           )
         }
         <div className="left-icon">
-          {icon}
+          { icon }
         </div>
         {
           showOptions && options.length > 0 && (
@@ -141,7 +141,7 @@ export const Dropdown = <T extends IOption>({
                     })
                     }
                   >
-                    {option.name}
+                    { option.name }
                   </button>
                 ))
               }

src/components/header.scss

@@ -12,7 +12,6 @@ $left-tab-margin: 3px;
   padding-top: $edge-padding;
   padding-left: $edge-padding;
   padding-right: $edge-padding;
-  width: 100%;
   margin-bottom: 0;
   position: relative;
   z-index: 1;

src/components/simulation-tab.scss

@@ -1,9 +1,8 @@
 @import "./vars.scss";
 
 .simulation-tab {
-  padding: $tab-padding;
+  padding: 2px;
   width: $sim-tab-width;
-  height: $sim-tab-height;
 
   .button-container {
     display: flex;

src/components/vars.scss

@@ -11,15 +11,15 @@ $text-color: #222;
 $edge-padding: 4px;
 
 $location-tab-width: 340px;
-$location-tab-height: 630px;
+$location-tab-height: 485px;
 
-$sim-tab-width: 662px;
+$sim-tab-width: 660px;
 $sim-tab-height: $location-tab-height;
 
 $about-tab-width: $location-tab-width;
 $about-tab-height: $location-tab-height;
 
-$tab-padding: 15px;
+$tab-padding: 10px;
 $input-height: 32px;
 $input-margin: 0 0 12px 8px;
 $input-border-radius: 3px;

src/constants.ts

@@ -1,13 +1,13 @@
-export const kPluginName = "Day Length Plugin";
+export const kPluginName = "Day Length";
 export const kVersion = "0.0.1";
 export const kDataContextName = "DayLengthPluginData";
 export const kInitialDimensions = {
   width: 340,
-  height: 546
+  height: 541
 };
 export const kSimulationTabDimensions = {
-  width: 690,
-  height: 630
+  width: 665,
+  height: 541
 };
 
 // These are only used in the simplified sunray angle calc

src/grasp-seasons/components/seasons.tsx

@@ -50,10 +50,6 @@ const DEFAULT_SIM_STATE: ISimState = {
   cameraTiltAngle: 89
 };
 
-function capitalize(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 interface IProps {
   lang?: Language;
   initialState?: Partial<ISimState>;
@@ -133,13 +129,6 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
   const simLang = simState.lang;
   const playStopLabel = mainAnimationStarted ? t("~STOP", simLang) : t("~ORBIT_BUTTON", simLang);
 
-  // Log helpers
-  const logCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
-    log(capitalize(event.target.name) + "CheckboxChanged", {
-      value: event.target.checked
-    });
-  };
-
   // Keep updating lang in simState when lang prop changes
   useEffect(() => {
     setSimState(prevState => ({ ...prevState, lang }));
@@ -260,7 +249,7 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             <Dropdown<{ name: string, value: string }>
               inline={true}
               width="130px"
-              label={ t("~VIEW", simLang) }
+              label={t("~VIEW", simLang)}
               options={[
                 { name: t("~EARTH_ORBIT", simLang), value: "false" },
                 { name: t("~EARTH_CLOSE_UP", simLang), value: "true" }
@@ -283,7 +272,7 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             <Checkbox
               checked={simState.dailyRotation}
               onChange={checked => setSimState(prevState => ({ ...prevState, dailyRotation: checked }))}
-              label={ t("~DAILY_ROTATION", simLang) }
+              label={t("~DAILY_ROTATION", simLang)}
               disabled={!mainAnimationStarted}
             />
           </div>
@@ -312,8 +301,8 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             <label>{ t("~DAY", simLang) }:</label>
             { getFormattedDay() }
           </div>
-          <SquareButton onClick={handleDayIncrement(1)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
-          <SquareButton onClick={handleMonthIncrement(1)}><ForwardBackJumpIcon style={{transform: "rotate(180deg"}} /></SquareButton>
+          <SquareButton onClick={handleDayIncrement(1)}><ForwardBackIcon style={{ transform: "rotate(180deg" }} /></SquareButton>
+          <SquareButton onClick={handleMonthIncrement(1)}><ForwardBackJumpIcon style={{ transform: "rotate(180deg" }} /></SquareButton>
         </div>
         <div className="day-slider">
           <InfiniteDaySlider
@@ -351,7 +340,7 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
               <SquareButton onClick={handleLatIncrement(-5)} disabled={simState.lat <= -90}><ForwardBackIcon /></SquareButton>
               <label>{ t("~LATITUDE", simLang) }</label>
               <input className="lat-input" type="text" value={latitude} onChange={handleLatInputChange} />
-              <SquareButton onClick={handleLatIncrement(5)} disabled={simState.lat >= 90}><ForwardBackIcon style={{transform: "rotate(180deg"}}/></SquareButton>
+              <SquareButton onClick={handleLatIncrement(5)} disabled={simState.lat >= 90}><ForwardBackIcon style={{ transform: "rotate(180deg" }}/></SquareButton>
             </div>
           <Slider
             value={simState.lat}
@@ -368,7 +357,7 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
               <SquareButton onClick={handleLongIncrement(-5)} disabled={simState.long <= -180}><ForwardBackIcon /></SquareButton>
               <label>{ t("~LONGITUDE", simLang) }</label>
               <input className="long-input" type="text" value={longitude} onChange={handleLongInputChange} />
-              <SquareButton onClick={handleLongIncrement(5)} disabled={simState.long >= 180}><ForwardBackIcon style={{transform: "rotate(180deg"}}/></SquareButton>
+              <SquareButton onClick={handleLongIncrement(5)} disabled={simState.long >= 180}><ForwardBackIcon style={{ transform: "rotate(180deg" }}/></SquareButton>
             </div>
             <Slider
               value={simState.long}