shifted graph

uclaacm · May 29, 2024 · f8d3189 · f8d3189
1 parent 4f9e1ff
commit f8d3189
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/components/shared/ExerciseSide.tsx b/src/components/shared/ExerciseSide.tsx
@@ -142,7 +142,7 @@ ExerciseSideProps): JSX.Element {
             pointerOrientation={45}
           />
         </div>
-        <div style={{ paddingTop: '5vw' }}>
+        <div style={{ paddingTop: '10vw' }}>
           <GraphInput
             questionArray={[
               {

diff --git a/src/components/shared/Exercises/GraphExercise.tsx b/src/components/shared/Exercises/GraphExercise.tsx
@@ -128,7 +128,7 @@ GraphProps): JSX.Element {
         const dyPercent = yPos(endY) - yPos(startY);
         // use this factor because dyPercent is relative to height,
         // but we express a line's length as a percentage of width.
-        const yxRatio = 19.5 / 50;
+        const yxRatio = 14.5 / 31;
         const lineLengthPercent =
           Math.sqrt(
             (dxPercent / 100) ** 2 + ((dyPercent * yxRatio) / 100) ** 2

diff --git a/src/styles/Exercises/GraphInput.scss b/src/styles/Exercises/GraphInput.scss
@@ -24,7 +24,7 @@
   margin-bottom: 2vh;
   margin-left: 0;
   margin-right: auto;
-  margin-top: 210px;
+  margin-top: 50px;
   padding-left: 8%;
 }
 

diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
@@ -3,13 +3,13 @@
   border: solid 1px rgb(209, 209, 209);
   border-radius: 12px;
   height: 0;
-  margin-left: 5%;
+  margin-left: 15%;
   // If editing the sizing of graph-container (padding-bottom or width),
   // modify the value of `yxRatio` in Graph.tsx
-  padding-bottom: 19.5%;
+  padding-bottom: 14.5%;
   position: absolute;
   top: 5%;
-  width: 50%; // see above warning
+  width: 31%; // see above warning
 }
 
 .grid-line {