added error message to graph + fixed graph styling

uclaacm · May 25, 2024 · 4f9e1ff · 4f9e1ff
1 parent 20bad44
commit 4f9e1ff
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 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: '10vw' }}>
+        <div style={{ paddingTop: '5vw' }}>
           <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 = 22.5 / 50;
+        const yxRatio = 19.5 / 50;
         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
@@ -78,8 +78,9 @@
 
 #graphinput-check-button-container {
   align-self: center;
+  padding-bottom: 10vh;
   //padding-top: 4vh;
-  padding-bottom: 5vh;
+  position: relative;
 }
 
 #graphinput-check-button {

diff --git a/src/styles/Graph.scss b/src/styles/Graph.scss
@@ -6,7 +6,7 @@
   margin-left: 5%;
   // If editing the sizing of graph-container (padding-bottom or width),
   // modify the value of `yxRatio` in Graph.tsx
-  padding-bottom: 22.5%;
+  padding-bottom: 19.5%;
   position: absolute;
   top: 5%;
   width: 50%; // see above warning