95 minor update adjust styling of lessonside to avoid scrolling (#121)

* Completed basic spacing for first level, now figure out second

* Finished spacing for levels 1 through 3

* Ran lint-fix to try and fix any issues

* Changed the container widths to be vw rather than %

* Adjusted text size, made it so that the footer is all the way at the bottom, and made it so that the turtle and level selector stay on the same place in the container, no matter if the lesson text changes

* Adjusted some spacing

* run lint, fix merge conflicts with main

---------

Co-authored-by: Sanjna <108957464+SanjnaT41756@users.noreply.github.com>
Co-authored-by: SanjnaT41756 <sanjnatailor@g.ucla.edu>

src/components/shared/LessonSide/LessonSide.tsx

@@ -26,7 +26,7 @@ function LessonSide({
   // console.log("max:" + maxLevel);
   return (
     <section id="lesson-side-container">
-      <div>
+      <div id="lesson-text">
         <div id="turtle-logo">
           <img
             src={penPalsLogo}
@@ -37,18 +37,20 @@ function LessonSide({
         </div>
         <LessonText text_array={lesson_info} />
       </div>
-      <div>
-        <Turtle turtleID={randomTurtleMessage} />
+      <div id="lesson-interactive">
+        <div id="turtle-and-level-selector">
+          <Turtle turtleID={randomTurtleMessage} />
 
-        {/* passed from parent component */}
-        <LevelSelector
-          numLevels={5}
-          currentLevel={levelNum}
-          maxLevelReached={maxLevel}
-          updateLevel={updateLevel}
-        />
+          {/* passed from parent component */}
+          <LevelSelector
+            numLevels={5}
+            currentLevel={levelNum}
+            maxLevelReached={maxLevel}
+            updateLevel={updateLevel}
+          />
+        </div>
+        <Footer />
       </div>
-      <Footer />
     </section>
   );
 }

src/styles/ExerciseSide.scss

@@ -5,6 +5,7 @@
   flex-grow: 1;
   height: 100%;
   margin: 0;
+  width: 55vw;
 }
 
 .exercise-box {

src/styles/Footer.scss

@@ -2,6 +2,7 @@
 
 #footer {
   align-items: center;
+  align-self: flex-end;
   background-color: colors.$footer-green;
   bottom: 0;
   display: flex;
@@ -15,8 +16,6 @@
 #footer h3 {
   color: white;
   margin: 0;
-  padding-bottom: 1em;
-  padding-top: 1em;
 }
 
 #footer a {

src/styles/LessonSide.scss

@@ -8,32 +8,37 @@
   font-weight: bold;
 }
 
+#lesson-text {
+  display: flex;
+  flex-direction: column;
+}
+
 #code-text {
   color: colors.$text-white;
   font-family: Cascadia Code, sans-serif;
   font-size: vars.$body-font-size;
+  padding-bottom: 1vh;
   padding-left: vars.$lesson-side-left-padding;
   padding-right: vars.$lesson-side-left-padding;
-  padding-top: 2.5vh;
+  padding-top: 1vh;
   text-align: center;
 }
 
 #lesson-side-container {
   background-color: colors.$primary-green;
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
   justify-content: space-between;
   overflow-y: auto;
-  width: 40vw;
+  width: 45vw;
 }
 
 #turtle-logo {
   color: colors.$text-white;
-  padding-bottom: 2.5vh;
+  padding-bottom: 1.5vh;
   padding-left: 2vw;
   padding-top: 2vh;
-
   //align-items: flex-start;
   text-align: left;
 }
@@ -56,7 +61,7 @@
   color: colors.$text-white;
   font-family: 'PT Sans', sans-serif;
   font-size: vars.$header-font-size;
-  padding-bottom: 2.5vh;
+  padding-bottom: 1vh;
   padding-left: vars.$lesson-side-left-padding;
   text-align: left;
 }
@@ -67,17 +72,24 @@
   font-size: vars.$body-font-size;
   padding-left: vars.$lesson-side-left-padding;
   padding-right: vars.$lesson-side-left-padding;
-  padding-top: 2.5vh;
+  padding-top: 1vh;
   text-align: left;
 }
 
+#turtle-and-level-selector {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 0.75em;
+}
+
 #encouraging-turtle {
-  align-items: flex-end;
+  align-items: center;
   box-sizing: border-box;
   display: flex;
   height: auto;
-  padding: 5vh;
-  width: 100%;
+  padding-bottom: 0.5em;
+  width: 45%;
 }
 
 #footer-space {
@@ -89,9 +101,8 @@
 .selector-box {
   align-items: flex-end;
   display: flex;
-  height: auto;
+  height: fit-content;
   justify-content: center;
-  padding-bottom: 1vh;
   width: 100%;
 }
 

src/styles/_vars.scss

@@ -1,5 +1,5 @@
-$body-font-size: 1.125em;
-$logo-font-size: 3.5em;
-$header-font-size: 1.5em;
+$body-font-size: 1.025em;
+$logo-font-size: 1.8em;
+$header-font-size: 1.1em;
 
 $lesson-side-left-padding: 2.2vw;