Co-authored-by: Beihao Zhou <b72zhou@csclub.uwaterloo.ca> Co-committed-by: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>
This commit is contained in:
parent
d8867d3c86
commit
fc2bf48706
|
@ -0,0 +1,98 @@
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: calc(40rem / 16) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subBox {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
color: var(--primary-text);
|
||||||
|
font-size: calc(28rem / 16);
|
||||||
|
position: relative;
|
||||||
|
margin: calc(24rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
width: calc(250rem / 16);
|
||||||
|
height: calc(20rem / 16);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.item:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: scaleX(0);
|
||||||
|
height: calc(2rem / 16);
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: var(--primary-accent);
|
||||||
|
cursor: pointer;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
transition: transform 0.25s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover:after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linePath {
|
||||||
|
stroke: var(--primary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrowPath {
|
||||||
|
fill: var(--primary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.subBox {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subBoxLeft {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.item {
|
||||||
|
font-size: calc(20rem / 16);
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: calc(10rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
width: calc(200rem / 16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.container {
|
||||||
|
justify-content: center;
|
||||||
|
gap: calc(50rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
width: calc(200rem / 16);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,72 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import styles from "./BottomNav.module.css";
|
||||||
|
|
||||||
|
interface PagesInfo {
|
||||||
|
leftPageLink: string;
|
||||||
|
leftPageName: string;
|
||||||
|
rightPageLink: string;
|
||||||
|
rightPageName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BottomNav(props: PagesInfo) {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.subBox + " " + styles.subBoxLeft}>
|
||||||
|
<Link href={props.leftPageLink}>
|
||||||
|
<a>
|
||||||
|
<Arrow />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<Link href={props.leftPageLink}>
|
||||||
|
<a className={styles.item}>{props.leftPageName}</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className={styles.subBox}>
|
||||||
|
<Link href={props.rightPageLink}>
|
||||||
|
<a className={styles.item}>{props.rightPageName}</a>
|
||||||
|
</Link>
|
||||||
|
<Link href={props.rightPageLink}>
|
||||||
|
<a>
|
||||||
|
<Arrow isPointingRight />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ArrowProps {
|
||||||
|
isPointingRight?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Arrow({ isPointingRight }: ArrowProps) {
|
||||||
|
return (
|
||||||
|
<svg className={(isPointingRight ? styles.right : "") + " " + styles.arrow}>
|
||||||
|
<defs>
|
||||||
|
<marker
|
||||||
|
id="arrow"
|
||||||
|
markerWidth="10"
|
||||||
|
markerHeight="10"
|
||||||
|
refX="5"
|
||||||
|
refY="3"
|
||||||
|
orient="auto"
|
||||||
|
markerUnits="strokeWidth"
|
||||||
|
>
|
||||||
|
<path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<line
|
||||||
|
x1="250"
|
||||||
|
y1="10"
|
||||||
|
x2="100"
|
||||||
|
y2="10" // half of svg height
|
||||||
|
strokeWidth="3"
|
||||||
|
markerEnd="url(#arrow)"
|
||||||
|
className={styles.linePath}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -28,6 +28,7 @@
|
||||||
"@visx/tooltip": "^2.10.0",
|
"@visx/tooltip": "^2.10.0",
|
||||||
"@visx/wordcloud": "^2.10.0",
|
"@visx/wordcloud": "^2.10.0",
|
||||||
"next": "12.1.6",
|
"next": "12.1.6",
|
||||||
|
"npm": "^8.19.0",
|
||||||
"react": "18.1.0",
|
"react": "18.1.0",
|
||||||
"react-dom": "18.1.0"
|
"react-dom": "18.1.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -22,6 +22,7 @@ import {
|
||||||
GroupedBarGraphHorizontal,
|
GroupedBarGraphHorizontal,
|
||||||
GroupedBarGraphVertical,
|
GroupedBarGraphVertical,
|
||||||
} from "@/components/GroupedBarGraph";
|
} from "@/components/GroupedBarGraph";
|
||||||
|
import { LineGraph } from "@/components/LineGraph";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||||
import { Sections } from "@/components/Sections";
|
import { Sections } from "@/components/Sections";
|
||||||
|
@ -31,9 +32,9 @@ import {
|
||||||
} from "@/components/StackedBarGraph";
|
} from "@/components/StackedBarGraph";
|
||||||
import { Timeline } from "@/components/Timeline";
|
import { Timeline } from "@/components/Timeline";
|
||||||
|
|
||||||
|
import { BottomNav } from "../components/BottomNav";
|
||||||
import { CenterWrapper } from "../components/CenterWrapper";
|
import { CenterWrapper } from "../components/CenterWrapper";
|
||||||
import { ColorPalette } from "../components/ColorPalette";
|
import { ColorPalette } from "../components/ColorPalette";
|
||||||
import { LineGraph } from "../components/LineGraph";
|
|
||||||
import { WordCloud } from "../components/WordCloud";
|
import { WordCloud } from "../components/WordCloud";
|
||||||
|
|
||||||
import styles from "./playground.module.css";
|
import styles from "./playground.module.css";
|
||||||
|
@ -240,6 +241,16 @@ export default function Home() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
<code>{"<BottomNav />"}</code>
|
||||||
|
</h2>
|
||||||
|
<BottomNav
|
||||||
|
leftPageLink="/"
|
||||||
|
leftPageName="Demographics"
|
||||||
|
rightPageLink="/"
|
||||||
|
rightPageName="Co-ops"
|
||||||
|
></BottomNav>
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
<code>{"<GroupedBarGraphVertical />"}</code>
|
<code>{"<GroupedBarGraphVertical />"}</code>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
|
@ -4,6 +4,7 @@ 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 { BottomNav } from "@/components/BottomNav";
|
||||||
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
|
|
||||||
import { WordCloud } from "../components/WordCloud";
|
import { WordCloud } from "../components/WordCloud";
|
||||||
|
@ -122,6 +123,12 @@ export default function SamplePage() {
|
||||||
height={500}
|
height={500}
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
<BottomNav
|
||||||
|
leftPageLink="/"
|
||||||
|
leftPageName="Demographics"
|
||||||
|
rightPageLink="/"
|
||||||
|
rightPageName="Co-ops"
|
||||||
|
></BottomNav>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue