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

Addressed pr comments
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-10-14 16:42:35 -04:00
parent 494b6030b8
commit 493d945101
6 changed files with 146 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc.js
View File

@ -15,10 +15,15 @@ module.exports = {
"plugin:react/recommended", "plugin:react/recommended",
"plugin:prettier/recommended", "plugin:prettier/recommended",
], ],
plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"], plugins: ["@typescript-eslint", "react", "react-hooks", "prettier", "unused-imports"],
rules: { rules: {
"no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"error",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
"prettier/prettier": "error", "prettier/prettier": "error",
"import/first": "error", "import/first": "error",
"import/order": [ "import/order": [
"error", "error",

167
components/Header.module.css
View File

@ -1,144 +1,133 @@
.headerWrapper { .headerWrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: fixed; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
background: var(--dark--primary-background); background: var(--dark--primary-background);
z-index: 98; z-index: 98;
box-sizing: border-box; box-sizing: border-box;
padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16); padding: calc(10rem / 16) calc(100rem / 16) 0;
} }
.titleHeader { .titleHeader {
margin: calc(16rem / 16) 0; margin: calc(16rem / 16) 0;
} }
.sideBarCommon { .sideBarCommon {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
width: 20vw; min-width: calc(400rem / 16);
height: 100vh; height: 100vh;
background: var(--secondary-background); background: var(--secondary-background);
padding: calc(100rem / 16); padding: calc(100rem / 16);
margin: 0; margin: 0;
z-index: 100; z-index: 100;
padding: 0; padding: 0;
padding-right: calc(20rem / 16); padding-right: calc(20rem / 16);
transition: transform 0.8s;
} }
.sideBarShown { .sideBarShown {
composes: sideBarCommon; composes: sideBarCommon;
transition: transform 0.8s;
transform: translateX(0%);
} }
.sideBarHidden { .sideBarHidden {
composes: sideBarCommon; composes: sideBarCommon;
transition: transform 0.8s; transform: translateX(100%);
transform: translateX(100%);
} }
.backgroundTintCommon { .backgroundTintCommon {
background-color: var(--label); background-color: var(--label);
animation: fadeIn 1s; animation: fadeIn 1s;
position: fixed; position: fixed;
z-index: 99; z-index: 99;
left: 0; left: 0;
top: 0; top: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
transition: opacity 0.8s, visibility 0.8s;
} }
.backgroundTintShow { .backgroundTintShow {
composes: backgroundTintCommon; composes: backgroundTintCommon;
transition: opacity 0.8s; visibility: visible;
opacity: 0.2; opacity: 0.2;
visibility: visible;
} }
.backgroundTintHidden { .backgroundTintHidden {
composes: backgroundTintCommon; composes: backgroundTintCommon;
transition: opacity 0.8s, visibility 0.8s; visibility: hidden;
opacity: 0; opacity: 0;
visibility: hidden;
} }
.menuHeader { .menuHeader {
margin-bottom: 0; margin-bottom: 0;
padding-left: calc(20rem / 16); padding-left: calc(20rem / 16);
padding-bottom: 0; padding-bottom: 0;
font-size: cacl(50rem / 16); color: var(--dark--secondary-heading);
color: var(--dark--secondary-heading);
} }
.sectionsWrapper { .sectionsWrapper {
padding-left: calc(30rem / 16); padding-left: calc(30rem / 16);
} }
.menuIcon { .menuIcon {
background: none; background: none;
border: none; border: none;
} }
.menuIcon:hover { .menuIcon:hover {
opacity: 0.8; opacity: 0.8;
cursor: pointer; cursor: pointer;
} }
.mobileSpacer {
display: none;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.sideBarCommon { .sideBarCommon {
width: 90vw; min-width: calc(300rem / 16);
} max-width: calc(500rem / 16);
}
.menuHeader { .menuHeader {
padding-left: calc(10rem / 16); padding-left: calc(10rem / 16);
} }
.sectionsWrapper { .sectionsWrapper {
padding-left: calc(20rem / 16); padding-left: calc(20rem / 16);
} }
.headerWrapper { .headerWrapper {
padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16); padding: calc(10rem / 16) calc(20rem / 16) 0;
} }
.mobileSpacer {
display: block;
padding: calc(50rem / 16);
}
} }
.closeMenuButton { .closeMenuButton {
background: var(--primary-heading); background: var(--primary-heading);
padding: 0 calc(20rem / 16); padding: 0 calc(20rem / 16);
border-radius: calc(50rem / 16); border-radius: calc(50rem / 16);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-left: calc(20rem / 16); margin-left: calc(20rem / 16);
} }
.closeMenuButton:hover { .closeMenuButton:hover {
background-color: var(--secondary-accent-light); background-color: var(--secondary-accent-light);
cursor: pointer; cursor: pointer;
} }
.lineWrapper { .lineWrapper {
width: 100%; width: 100%;
display: flex; display: flex;
} }
.lineWrapper:before { .lineWrapper:before {
content: ""; content: "";
flex: 1 1; flex: 1 1;
border-bottom: 3px solid white; border-bottom: 3px solid white;
margin: auto; margin: auto;
} }

39
components/Header.tsx
View File

@ -11,13 +11,22 @@ export function Header() {
return ( return (
<> <>
<div
className={
isShowingMenu
? styles.backgroundTintShow
: styles.backgroundTintHidden
}
onClick={(_) => {
setIsShowingMenu(false);
}}
/>
<div className={styles.headerWrapper}> <div className={styles.headerWrapper}>
<h1 className={styles.titleHeader}> <h1 className={styles.titleHeader}>
<Link href="/">CS 2022</Link> <Link href="/">CS 2022</Link>
</h1> </h1>
<button <button
onClick={(e) => { onClick={(_) => {
e.preventDefault();
setIsShowingMenu(true); setIsShowingMenu(true);
}} }}
className={styles.menuIcon} className={styles.menuIcon}
@ -26,8 +35,6 @@ export function Header() {
</button> </button>
</div> </div>
<div className={styles.mobileSpacer} />
<div <div
className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden} className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
> >
@ -52,30 +59,6 @@ export function Header() {
<Sections data={sectionsData} showHeader={false} /> <Sections data={sectionsData} showHeader={false} />
</div> </div>
</div> </div>
<div
className={
isShowingMenu
? styles.backgroundTintShow
: styles.backgroundTintHidden
}
onClick={(_) => {
setIsShowingMenu(false);
}}
/>
</> </>
); );
} }
const ListItem: React.FC<{ link: string; children: string }> = ({
link,
children,
}) => {
return (
<h2 className={styles.listItem}>
<Link href={link}>
<li>{children}</li>
</Link>
</h2>
);
};

47
package-lock.json generated
View File

@ -5,6 +5,7 @@
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cs-2022-class-profile",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@visx/axis": "^2.10.0", "@visx/axis": "^2.10.0",
@ -35,6 +36,7 @@
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0", "eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-unused-imports": "^2.0.0",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"postcss-calc": "^8.2.4", "postcss-calc": "^8.2.4",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
@ -2126,6 +2128,36 @@
"semver": "bin/semver.js" "semver": "bin/semver.js"
} }
}, },
"node_modules/eslint-plugin-unused-imports": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz",
"integrity": "sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==",
"dev": true,
"dependencies": {
"eslint-rule-composer": "^0.3.0"
},
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
},
"peerDependencies": {
"@typescript-eslint/eslint-plugin": "^5.0.0",
"eslint": "^8.0.0"
},
"peerDependenciesMeta": {
"@typescript-eslint/eslint-plugin": {
"optional": true
}
}
},
"node_modules/eslint-rule-composer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
"integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
"dev": true,
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/eslint-scope": { "node_modules/eslint-scope": {
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
@ -5949,6 +5981,21 @@
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"eslint-plugin-unused-imports": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-2.0.0.tgz",
"integrity": "sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==",
"dev": true,
"requires": {
"eslint-rule-composer": "^0.3.0"
}
},
"eslint-rule-composer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
"integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
"dev": true
},
"eslint-scope": { "eslint-scope": {
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",

1
package.json
View File

@ -43,6 +43,7 @@
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0", "eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0", "eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-unused-imports": "^2.0.0",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"postcss-calc": "^8.2.4", "postcss-calc": "^8.2.4",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",

5
pages/samplePage.tsx
View File

@ -1,13 +1,12 @@
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks"; import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import React from "react"; import React from "react";
import { useWindowDimensions } from "utils/getWindowDimensions"; import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile"; import { useIsMobile } from "utils/isMobile";
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { ComponentWrapper } from "@/components/ComponentWrapper"; import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header"; import { Header } from "@/components/Header";
import { WordCloud } from "@/components/WordCloud";
import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css"; import styles from "./samplePage.module.css";