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:
parent
2dca08ccef
commit
7ef5d8aa61
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.barBackground {
|
||||
|
|
|
@ -11,7 +11,6 @@
|
|||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
|
|
@ -2,11 +2,6 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Theme colours */
|
||||
--pink: #EF839D;
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue