www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Make section component body text optional (Closes #70) (#77)
continuous-integration/drone/push Build is passing Details 

https://opt-descrp-csc-class-profile-staging-snedadah.k8s.csclub.cloud/samplePage/
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #77
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
This commit is contained in:
Shahan Nedadahandeh 2022-11-05 12:18:44 -04:00
parent 7404c60d8f
commit 0fcc367ab6
3 changed files with 105 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/ComponentWrapper.module.css
View File

@ -43,6 +43,11 @@
padding: 0 15%;
}
.wrapperNoBodyText {
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 768px) {
.sideWrapperCommon {
margin: auto;

5
components/ComponentWrapper.tsx
View File

@ -7,7 +7,7 @@ type AlignOption = "left" | "center" | "right";
type ComponentWrapperProps = {
children: React.ReactNode;
heading: string;
bodyText: string;
bodyText?: string;
align?: AlignOption;
noBackground?: boolean;
};
@ -30,11 +30,12 @@ export function ComponentWrapper({
className={`
${alignClasses[align]}
${noBackground ? styles.noBackground : ""}
${bodyText ? "" : styles.wrapperNoBodyText}
`}
>
<div className={styles.internalWrapper}>
<h3>{heading}</h3>
<p>{bodyText}</p>
{bodyText ? <p>{bodyText}</p> : null}
</div>
<div className={styles.internalWrapper}>{children}</div>
</div>

138
pages/samplePage.tsx
View File

@ -16,6 +16,13 @@ export default function SamplePage() {
const { width } = useWindowDimensions();
const isMobile = useIsMobile();
// For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this
const defaultGraphWidth = isMobile ? width / 1.25 : width / 2;
const defaultGraphHeight = 500;
// Make vars for common configs such as common margins
const defaultBarGraphMargin = { top: 20, bottom: 40, left: 150, right: 20 };
return (
<div className={styles.page}>
<Header />
@ -29,15 +36,9 @@ export default function SamplePage() {
>
<BarGraphVertical
data={mockCategoricalData}
// For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this
width={isMobile ? width / 1.25 : width / 2}
height={500}
margin={{
top: 20,
bottom: 80,
left: 60,
right: 20,
}}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
@ -52,8 +53,8 @@ export default function SamplePage() {
value: word.value,
}))}
// For components that we don't want to match the width necessarily we can provide direct values
width={isMobile ? width / 1.5 : 800}
height={500}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
@ -65,14 +66,9 @@ export default function SamplePage() {
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
right: 20,
}}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
@ -85,32 +81,19 @@ export default function SamplePage() {
<BarGraphHorizontal
className={styles.barGrapDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
right: 20,
}}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
>
<ComponentWrapper heading="What program are you in?" align="left">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
right: 20,
}}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
@ -125,10 +108,83 @@ export default function SamplePage() {
text: word.key,
value: word.value,
}))}
width={isMobile ? width / 1.5 : width / 2}
height={500}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in? " align="right">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="left">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
align="right"
noBackground
>
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
align="left"
>
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<BottomNav
leftPageLink="/"
leftPageName="Demographics"