Addressed pr comments
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
494b6030b8
commit
493d945101
|
@ -15,10 +15,15 @@ module.exports = {
|
|||
"plugin:react/recommended",
|
||||
"plugin:prettier/recommended",
|
||||
],
|
||||
plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"],
|
||||
plugins: ["@typescript-eslint", "react", "react-hooks", "prettier", "unused-imports"],
|
||||
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",
|
||||
|
||||
"import/first": "error",
|
||||
"import/order": [
|
||||
"error",
|
||||
|
|
|
@ -1,144 +1,133 @@
|
|||
.headerWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: var(--dark--primary-background);
|
||||
z-index: 98;
|
||||
box-sizing: border-box;
|
||||
padding: calc(10rem / 16) calc(100rem / 16) 0 calc(100rem / 16);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: var(--dark--primary-background);
|
||||
z-index: 98;
|
||||
box-sizing: border-box;
|
||||
padding: calc(10rem / 16) calc(100rem / 16) 0;
|
||||
}
|
||||
|
||||
.titleHeader {
|
||||
margin: calc(16rem / 16) 0;
|
||||
margin: calc(16rem / 16) 0;
|
||||
}
|
||||
|
||||
.sideBarCommon {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 20vw;
|
||||
height: 100vh;
|
||||
background: var(--secondary-background);
|
||||
padding: calc(100rem / 16);
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
padding-right: calc(20rem / 16);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
min-width: calc(400rem / 16);
|
||||
height: 100vh;
|
||||
background: var(--secondary-background);
|
||||
padding: calc(100rem / 16);
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
padding: 0;
|
||||
padding-right: calc(20rem / 16);
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
|
||||
.sideBarShown {
|
||||
composes: sideBarCommon;
|
||||
transition: transform 0.8s;
|
||||
transform: translateX(0%);
|
||||
composes: sideBarCommon;
|
||||
}
|
||||
|
||||
.sideBarHidden {
|
||||
composes: sideBarCommon;
|
||||
transition: transform 0.8s;
|
||||
transform: translateX(100%);
|
||||
composes: sideBarCommon;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.backgroundTintCommon {
|
||||
background-color: var(--label);
|
||||
animation: fadeIn 1s;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--label);
|
||||
animation: fadeIn 1s;
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
transition: opacity 0.8s, visibility 0.8s;
|
||||
}
|
||||
|
||||
.backgroundTintShow {
|
||||
composes: backgroundTintCommon;
|
||||
transition: opacity 0.8s;
|
||||
opacity: 0.2;
|
||||
visibility: visible;
|
||||
composes: backgroundTintCommon;
|
||||
visibility: visible;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.backgroundTintHidden {
|
||||
composes: backgroundTintCommon;
|
||||
transition: opacity 0.8s, visibility 0.8s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
composes: backgroundTintCommon;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.menuHeader {
|
||||
margin-bottom: 0;
|
||||
padding-left: calc(20rem / 16);
|
||||
padding-bottom: 0;
|
||||
font-size: cacl(50rem / 16);
|
||||
color: var(--dark--secondary-heading);
|
||||
margin-bottom: 0;
|
||||
padding-left: calc(20rem / 16);
|
||||
padding-bottom: 0;
|
||||
color: var(--dark--secondary-heading);
|
||||
}
|
||||
|
||||
.sectionsWrapper {
|
||||
padding-left: calc(30rem / 16);
|
||||
padding-left: calc(30rem / 16);
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
background: none;
|
||||
border: none;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.menuIcon:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobileSpacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.sideBarCommon {
|
||||
width: 90vw;
|
||||
}
|
||||
.sideBarCommon {
|
||||
min-width: calc(300rem / 16);
|
||||
max-width: calc(500rem / 16);
|
||||
}
|
||||
|
||||
.menuHeader {
|
||||
padding-left: calc(10rem / 16);
|
||||
}
|
||||
.menuHeader {
|
||||
padding-left: calc(10rem / 16);
|
||||
}
|
||||
|
||||
.sectionsWrapper {
|
||||
padding-left: calc(20rem / 16);
|
||||
}
|
||||
.sectionsWrapper {
|
||||
padding-left: calc(20rem / 16);
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
padding: calc(10rem / 16) calc(20rem / 16) 0 calc(20rem / 16);
|
||||
}
|
||||
|
||||
.mobileSpacer {
|
||||
display: block;
|
||||
padding: calc(50rem / 16);
|
||||
}
|
||||
.headerWrapper {
|
||||
padding: calc(10rem / 16) calc(20rem / 16) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.closeMenuButton {
|
||||
background: var(--primary-heading);
|
||||
padding: 0 calc(20rem / 16);
|
||||
border-radius: calc(50rem / 16);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: calc(20rem / 16);
|
||||
background: var(--primary-heading);
|
||||
padding: 0 calc(20rem / 16);
|
||||
border-radius: calc(50rem / 16);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: calc(20rem / 16);
|
||||
}
|
||||
|
||||
.closeMenuButton:hover {
|
||||
background-color: var(--secondary-accent-light);
|
||||
cursor: pointer;
|
||||
background-color: var(--secondary-accent-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lineWrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lineWrapper:before {
|
||||
content: "";
|
||||
flex: 1 1;
|
||||
border-bottom: 3px solid white;
|
||||
margin: auto;
|
||||
content: "";
|
||||
flex: 1 1;
|
||||
border-bottom: 3px solid white;
|
||||
margin: auto;
|
||||
}
|
|
@ -11,13 +11,22 @@ export function Header() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
isShowingMenu
|
||||
? styles.backgroundTintShow
|
||||
: styles.backgroundTintHidden
|
||||
}
|
||||
onClick={(_) => {
|
||||
setIsShowingMenu(false);
|
||||
}}
|
||||
/>
|
||||
<div className={styles.headerWrapper}>
|
||||
<h1 className={styles.titleHeader}>
|
||||
<Link href="/">CS 2022</Link>
|
||||
</h1>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onClick={(_) => {
|
||||
setIsShowingMenu(true);
|
||||
}}
|
||||
className={styles.menuIcon}
|
||||
|
@ -26,8 +35,6 @@ export function Header() {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.mobileSpacer} />
|
||||
|
||||
<div
|
||||
className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
|
||||
>
|
||||
|
@ -52,30 +59,6 @@ export function Header() {
|
|||
<Sections data={sectionsData} showHeader={false} />
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "cs-2022-class-profile",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@visx/axis": "^2.10.0",
|
||||
|
@ -35,6 +36,7 @@
|
|||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.30.0",
|
||||
"eslint-plugin-react-hooks": "^4.5.0",
|
||||
"eslint-plugin-unused-imports": "^2.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-calc": "^8.2.4",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
|
@ -2126,6 +2128,36 @@
|
|||
"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": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
|
||||
|
@ -5949,6 +5981,21 @@
|
|||
"dev": true,
|
||||
"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": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
|
||||
|
|
|
@ -43,6 +43,7 @@
|
|||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.30.0",
|
||||
"eslint-plugin-react-hooks": "^4.5.0",
|
||||
"eslint-plugin-unused-imports": "^2.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-calc": "^8.2.4",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
||||
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
||||
import React from "react";
|
||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||
import { useIsMobile } from "utils/isMobile";
|
||||
|
||||
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
|
||||
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||
import { Header } from "@/components/Header";
|
||||
|
||||
import { WordCloud } from "../components/WordCloud";
|
||||
import { WordCloud } from "@/components/WordCloud";
|
||||
|
||||
import styles from "./samplePage.module.css";
|
||||
|
||||
|
|
Loading…
Reference in New Issue