Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Nov 1, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77dae5b
Completed basic spacing for first level, now figure out second
angoway Oct 23, 2024
d085a6f
Finished spacing for levels 1 through 3
angoway Oct 23, 2024
446d3a2
Ran lint-fix to try and fix any issues
angoway Oct 23, 2024
324d9a1
Changed the container widths to be vw rather than %
angoway Oct 23, 2024
ccb5c48
Adjusted text size, made it so that the footer is all the way at the …
angoway Oct 31, 2024
5458f56
Adjusted some spacing
angoway Oct 31, 2024
469e6b8
Merge branch 'main' into 95-minor-update-adjust-styling-of-lessonside…
SanjnaT41756 Nov 1, 2024
dd522bb
run lint, fix merge conflicts with main
SanjnaT41756 Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions src/components/shared/LessonSide/LessonSide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/styles/ExerciseSide.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
flex-grow: 1;
height: 100%;
margin: 0;
width: 55vw;
}

.exercise-box {
Expand Down
3 changes: 1 addition & 2 deletions src/styles/Footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

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

#footer a {
Expand Down
35 changes: 23 additions & 12 deletions src/styles/LessonSide.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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 {
Expand All @@ -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%;
}

Expand Down
6 changes: 3 additions & 3 deletions src/styles/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Loading