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

Sample page and graph wrappers #32

Merged
snedadah merged 18 commits from shahanneda/wrapper into main 2022-09-02 17:39:47 -04:00
Conversation 0 Commits 18 Files Changed 12 +134 -37
9 changed files with 134 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8a85e3c5d9 - Show all commits

21
components/FullComponentWrapper.module.css Normal file
View File

@ -0,0 +1,21 @@
.wrapper {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
width: 80%;
align-self: center;
margin: calc(40rem / 16) 0;
}
.graphWrapper {
margin-top: calc(80rem / 16);
}
/* .textWrapper {
margin: 0 calc(100rem / 16);
} */

25
components/FullComponentWrapper.tsx Normal file
View File

@ -0,0 +1,25 @@
import React from "react";
import styles from "./FullComponentWrapper.module.css";
type FullComponentWrapperProps = {
children: React.ReactNode;
heading: string;
body: string;
};
export default function FullComponentWrapper({
heading,
body,
children,
}: FullComponentWrapperProps) {
return (
<div className={styles.wrapper}>
<div className={styles.textWrapper}>
<h3 className={styles.heading}>{heading}</h3>
<p className={styles.body}>{body}</p>
</div>
<div className={styles.graphWrapper}>{children}</div>
</div>
);
}

10
components/SideComponentWrapper.module.css
View File

@ -1,9 +1,9 @@
.wrapperCommon {
background-color: var(--secondary-background);
display: flex;
width: 80%;
width: 95%;
padding: calc(40rem / 16) calc(50rem / 16);
margin: calc(80rem / 16) 0;
margin: calc(40rem / 16) 0;
}
.wrapperRight {
@ -22,6 +22,12 @@
border-radius: 0 12.5rem 12.5rem 0;
}
@media screen and (max-width: 768px) {
.wrapperCommon {
flex-direction: column;
}
}
.graphWrapper {
margin: calc(20rem / 16);
}

2
components/SideComponentWrapper.tsx
View File

@ -17,11 +17,11 @@ export default function SideComponentWrapper({
}: ComponentWrapperProps) {
return (
<div className={rightAligned ? styles.wrapperRight : styles.wrapperLeft}>
<div className={styles.graphWrapper}>{children}</div>
<div className={styles.textWrapper}>
<h3 className={styles.heading}>{heading}</h3>
<p className={styles.body}>{body}</p>
</div>
<div className={styles.graphWrapper}>{children}</div>
</div>
);
}

13
pages/_app.tsx
View File

@ -1,9 +1,20 @@
import type { AppProps } from "next/app";
import Head from "next/head";
import React from "react";
import "./_app.css";
import "./font.css";
export default function App({ Component, pageProps }: AppProps): JSX.Element {
return <Component {...pageProps} />;
return (
<>
<Head>
snedadah commented 2022-08-09 01:03:03 -04:00
Review
Copy Link

For making all pages responsive

For making all pages responsive
a258wang commented 2022-08-11 21:04:53 -04:00
Review
Copy Link

Is this required? (I'm guessing it's needed for react-responsive?)

Is this required? (I'm guessing it's needed for react-responsive?)
snedadah commented 2022-08-11 23:30:50 -04:00
Review
Copy Link

This is needed for making any html page responsive! (has nothing to do with react-responsive)
https://www.w3schools.com/html/html_responsive.asp

This is needed for making any html page responsive! (has nothing to do with react-responsive) https://www.w3schools.com/html/html_responsive.asp
a258wang commented 2022-08-24 19:21:51 -04:00
Review
Copy Link

Today I learned, LOL. Though it doesn't seem like we have this setup for the website and the responsive shenanigans work fine?

Today I learned, LOL. Though it doesn't seem like we have this setup for the website and the responsive shenanigans work fine?
snedadah commented 2022-08-31 07:14:54 -04:00
Review
Copy Link

I'm not sure how its setup in the site (I also couldn't find the code manually being set), however, it definitely is set:

if you view source of the site: view-source:https://csclub.uwaterloo.ca/
it's one of the first things there.
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>CSC - University of Wate ...

I wonder if it is a Next option or something (however I coulnd't find it)

I'm not sure how its setup in the site (I also couldn't find the code manually being set), however, it definitely is set: if you view source of the site: view-source:https://csclub.uwaterloo.ca/ it's one of the first things there. ``` <!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>CSC - University of Wate ...``` I wonder if it is a Next option or something (however I coulnd't find it)
a258wang commented 2022-09-02 01:09:17 -04:00
Review
Copy Link

Ahh yeah sorry I should've clarified, I meant that we didn't set up anything manually for the website, but the viewport meta tag somehow got added anyways.

I'm guessing you already tried responsive shenanigans in the class profile without manually adding in the stuff in the head here? If it works without this here, then we can get rid of it, but if it doesn't work, then we can keep it.

Ahh yeah sorry I should've clarified, I meant that we didn't set up anything manually for the website, but the viewport meta tag somehow got added anyways. I'm guessing you already tried responsive shenanigans in the class profile without manually adding in the stuff in the head here? If it works without this here, then we can get rid of it, but if it doesn't work, then we can keep it.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"
/>
</Head>
<Component {...pageProps} />;
</>
);
}

2
pages/index.tsx
View File

@ -5,6 +5,8 @@ export default function Home() {
return (
<p>
Click <Link href="/playground">here</Link> to visit the playground
<br></br>
Click <Link href="/samplePage">here</Link> to visit a sample page
</p>
);
}

29
pages/playground.tsx
View File

@ -62,35 +62,6 @@ export default function Home() {
}))}
/>
<SideComponentWrapper
heading="What program are you in?"
body="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."
>
<BarGraphVertical
data={mockCategoricalData}
width={800}
height={500}
margin={{
top: 20,
bottom: 80,
left: 60,
right: 20,
}}
/>
</SideComponentWrapper>
<SideComponentWrapper
heading="What program are you in?"
body="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."
rightAligned
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
/>
</SideComponentWrapper>
</div>
);
}

32
pages/samplePage.tsx
View File

@ -1,7 +1,9 @@
import { BarGraphVertical } from "components/BarGraph";
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react";
import useWindowDimensions from "utils/getWindowDimensions";
import FullComponentWrapper from "@/components/FullComponentWrapper";
import SideComponentWrapper from "@/components/SideComponentWrapper";
import { WordCloud } from "../components/WordCloud";
@ -9,6 +11,8 @@ import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css";
export default function SamplePage() {
const { height, width } = useWindowDimensions();
return (
<div className={styles.page}>
<SideComponentWrapper
@ -17,7 +21,7 @@ export default function SamplePage() {
>
<BarGraphVertical
data={mockCategoricalData}
width={800}
width={700}
height={500}
margin={{
top: 20,
@ -28,16 +32,36 @@ export default function SamplePage() {
/>
</SideComponentWrapper>
<SideComponentWrapper
<FullComponentWrapper
heading="What program are you in?"
body="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."
rightAligned
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={1000}
height={500}
/>
</FullComponentWrapper>
<SideComponentWrapper
heading="What program are you in?"
body="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."
rightAligned
>
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
right: 20,
}}
/>
</SideComponentWrapper>
</div>

37
utils/getWindowDimensions.ts Normal file
View File

@ -0,0 +1,37 @@
// https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
snedadah marked this conversation as resolved
a258wang commented 2022-08-11 21:14:13 -04:00
Review
Copy Link

I'm pretty sure we referenced the same thing when working on the website, but we definitely didn't cite our sources like this 😂

I'm pretty sure we referenced the same thing when working on the website, but we definitely didn't cite our sources like this 😂
import { useState, useEffect } from "react";
type WindowDimensions = {
width: number;
height: number;
};
const getWindowDimensions = (): WindowDimensions => {
const { innerWidth, innerHeight } = window;
return {
width: innerWidth,
height: innerHeight,
};
};
const useWindowDimensions = (): WindowDimensions => {
const [windowDimensions, setWindowDimensions] = useState<WindowDimensions>({
width: 0,
height: 0,
});
const handleResize = () => {
setWindowDimensions(getWindowDimensions());
};
useEffect(() => {
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowDimensions;
};
export default useWindowDimensions;