Fixed graph overflows (#123)
continuous-integration/drone/push Build is passing Details

Closes #110

Fixed the header not being sticky. The reason was due to the overflow-x hidden on the body. Removed that, and instead solved the root cause of the horizontal overflow, which was some graphs overflowing.

This required changing some of the compontent wrapper styles, which I think are overall improved now (slightly less hacks). But please check to make sure that the alignment of graphs and text isnt destroyed on various screen sizes. I checked and it seemed fine.

Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #123
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
This commit is contained in:
Shahan Nedadahandeh 2022-12-30 21:52:24 -05:00
parent 2dca08ccef
commit 7ef5d8aa61
6 changed files with 13 additions and 14 deletions

View File

@ -10,7 +10,6 @@
composes: sideWrapperCommon;
align-self: end;
margin-right: 0;
padding-right: 0;
border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
flex-direction: row-reverse;
padding-right: calc(50rem / 16);
@ -20,7 +19,6 @@
composes: sideWrapperCommon;
align-self: start;
margin-left: 0;
padding-left: 0;
border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
flex-direction: row;
padding-left: calc(50rem / 16);
@ -42,7 +40,6 @@
*/
margin: 0 0 calc(45rem / 16) 0;
align-self: center;
padding: 0 15%;
}
.wrapperCenter .internalWrapper {
@ -82,10 +79,19 @@
.internalWrapper {
padding: calc(20rem / 16);
/* Without this, some graphs will have an horizontal scroll bar thats not needed */
overflow-x: auto;
}
.internalWrapper p {
font-size: calc(24rem / 16);
opacity: .85;
line-height: 1.25;
}
.textWrapper {
/* We add this since we want the text to shrink before the graph ever shrinks */
flex-shrink: 1000;
/* So that text is still readable in the awkward 1000px width screen size */
min-width: 200px;
}

View File

@ -33,7 +33,7 @@ export function ComponentWrapper({
${bodyText ? "" : styles.wrapperNoBodyText}
`}
>
<div className={styles.internalWrapper}>
<div className={`${styles.internalWrapper} ${styles.textWrapper}`}>
<h3>{heading}</h3>
{bodyText ? <p>{bodyText}</p> : null}
</div>

View File

@ -1,7 +1,6 @@
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.barBackground {

View File

@ -11,7 +11,6 @@
.wrapper {
display: flex;
align-items: center;
width: min-content;
}

View File

@ -2,11 +2,6 @@ html {
scroll-behavior: smooth;
}
html,
body {
overflow-x: hidden;
}
body {
/* Theme colours */
--pink: #EF839D;

View File

@ -213,7 +213,7 @@ export default function CoopPage() {
heading="What was your coop evaluation rating?"
bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating!"
>
<div style={{ paddingRight: "150px" }}>
<div>
<StackedBarGraphHorizontal
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
@ -240,7 +240,7 @@ export default function CoopPage() {
align="right"
noBackground
>
<div style={{ paddingRight: "150px" }}>
<div>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
@ -289,7 +289,7 @@ export default function CoopPage() {
bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really get you some great opportunities! Especially in your first co-ops when your experience may be lacking!"
noBackground
>
<div style={{ paddingRight: "150px" }}>
<div>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}