fix header sizing
continuous-integration/drone/push Build is failing Details

This commit is contained in:
hyper-neutrino 2024-04-04 14:59:44 -04:00
parent 62fe103f2b
commit 6787db39ca
7 changed files with 190 additions and 20 deletions

View File

@ -538,23 +538,130 @@ export default function Academics() {
</ComponentWrapper>
<ComponentWrapper heading="What was your average each term?" align="left">
<StackedBarGraphVertical
width={600}
height={400}
keys={A17Keys}
colorRange={[
Color.primaryAccentLighter,
Color.secondaryAccentLighter,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.primaryAccent,
Color.primaryAccentDark,
Color.primaryAccentDarker,
]}
data={A17}
margin={barGraphMargin}
displayPercentage
/>
<div className="center-col">
<StackedBarGraphVertical
width={600}
height={400}
keys={A17Keys}
colorRange={[
Color.primaryAccentLighter,
Color.secondaryAccentLighter,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.primaryAccent,
Color.primaryAccentDark,
Color.primaryAccentDarker,
]}
data={A17}
margin={barGraphMargin}
displayPercentage
/>
<table>
<thead>
<tr>
<th>Term</th>
<th>Mean</th>
<th>Min</th>
<th>Q1</th>
<th>Median</th>
<th>Q3</th>
<th>Max</th>
</tr>
</thead>
<tbody>
<tr>
<td>1A</td>
<td>86.45</td>
<td>60</td>
<td>83.8</td>
<td>87.2</td>
<td>92</td>
<td>97</td>
</tr>
<tr>
<td>1B</td>
<td>84.62</td>
<td>60</td>
<td>80</td>
<td>85.2</td>
<td>91.25</td>
<td>99</td>
</tr>
<tr>
<td>2A</td>
<td>82.89</td>
<td>59.4</td>
<td>77</td>
<td>85.3</td>
<td>90</td>
<td>97.2</td>
</tr>
<tr>
<td>2B</td>
<td>87.96</td>
<td>53.8</td>
<td>83.55</td>
<td>90</td>
<td>94</td>
<td>98</td>
</tr>
<tr>
<td>3A</td>
<td>88.52</td>
<td>63</td>
<td>85.2</td>
<td>90.8</td>
<td>94</td>
<td>98.71</td>
</tr>
<tr>
<td>3B</td>
<td>88.33</td>
<td>64.33</td>
<td>85</td>
<td>89.63</td>
<td>93.63</td>
<td>99</td>
</tr>
<tr>
<td>4A</td>
<td>87.11</td>
<td>65</td>
<td>83</td>
<td>88</td>
<td>92</td>
<td>97</td>
</tr>
<tr>
<td>4B</td>
<td>86.59</td>
<td>68.67</td>
<td>81</td>
<td>88.38</td>
<td>92</td>
<td>99.5</td>
</tr>
<tr>
<td>5A</td>
<td>93.17</td>
<td>90.6</td>
<td>92</td>
<td>93.2</td>
<td>94</td>
<td>96</td>
</tr>
<tr>
<td>5B</td>
<td>84.4</td>
<td>80</td>
<td>80</td>
<td>84.4</td>
<td>88.8</td>
<td>88.8</td>
</tr>
</tbody>
</table>
</div>
</ComponentWrapper>
<ComponentWrapper heading="What is your cumulative average?" align="left" noBackground>

View File

@ -181,6 +181,7 @@ export default function Coop() {
left: 20,
}}
background
means={{ 1: 23.43, 2: 30.14, 3: 36.43, 4: 43.6, 5: 57.91, 6: 63.42 }}
/>
</ComponentWrapper>
@ -198,6 +199,7 @@ export default function Coop() {
top: 20,
left: 20,
}}
means={{ 1: 724.87, 2: 1874.68, 3: 1363.7, 4: 2706.27, 5: 7694.31, 6: 7623.83 }}
/>
</ComponentWrapper>

View File

@ -1,6 +1,8 @@
@font-face {
font-family: Lexend;
src: local(''), url('../public/fonts/Lexend-VariableFont_wght.ttf') format('ttf');
src:
local(""),
url("../public/fonts/Lexend-VariableFont_wght.ttf") format("ttf");
}
html {
@ -167,7 +169,7 @@ h3 {
h4 {
font-size: calc(26rem / 16);
font-weight: 700;
color: var(-dark--4-heading);
color: var(--dark--4-heading);
margin-top: calc(24rem / 16);
margin-bottom: calc(8rem / 16);
letter-spacing: 0.05rem;
@ -236,3 +238,25 @@ a:hover {
flex-direction: column;
align-items: center;
}
table,
thead,
tbody,
tr,
th,
td {
border-collapse: collapse;
}
th,
td {
padding: 0.32rem 0.64rem;
}
thead tr {
border-bottom: 1px solid var(--label);
}
tbody tr:nth-child(2n) {
background-color: var(--tertiary-background);
}

View File

@ -1,5 +1,14 @@
import { Viewport } from "next";
import { title } from "../utils/title";
import "./globals.css";
export const metadata = title("Home");
export const viewport: Viewport = {
colorScheme: "dark",
themeColor: "#5caff9",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">

View File

@ -71,6 +71,8 @@ export type StatsPlotProps = {
boxPlotPadding?: number;
/** Minimum width of the graph. */
minWidth?: number;
/** Arithmetic means (if applicable) */
means?: Record<string, number>;
background?: boolean;
};
@ -102,6 +104,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
boxPlotPadding = 0.3,
minWidth = 500,
background = false,
means,
}: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
if (width < minWidth) {
width = minWidth;
@ -297,6 +300,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
<p>median: {tooltipData.median}</p>
<p>first quartile: {tooltipData.firstQuartile}</p>
<p>min: {tooltipData.min}</p>
{means?.[tooltipData.category] ? <p>mean: {means[tooltipData.category]}</p> : null}
</TooltipWrapper>
)}
</div>

View File

@ -1,6 +1,7 @@
.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: calc(40rem / 16) 0;
text-align: center;
@ -23,7 +24,7 @@
margin: auto;
}
@media screen and (max-width: 900px) {
@media screen and (max-width: 1000px) {
.title {
font-size: calc(50rem / 16);
margin: calc(20rem / 16) auto;
@ -34,3 +35,15 @@
margin: auto calc(15rem / 16);
}
}
@media screen and (max-width: 750px) {
.title {
font-size: 2.5rem;
margin: 0.75rem auto;
}
.subTitle {
font-size: 1.5rem;
margin: auto 0.5rem;
}
}

View File

@ -1,8 +1,19 @@
import { Metadata } from "next";
const description =
"The 2023 CS Class Profile is a showcase of data relevant to CS, CFM, and CS/BBA students completing their undergrad in 2023. Explore the graduating class of 2023 with data gathered and presented by the University of Waterloo Computer Science Club!";
export function title(title: string): Metadata {
return {
title: `${title} — 2023 CS Class Profile`,
description,
keywords: ["uw", "csc", "csclub", "uwaterloo", "uwcsc", "university", "waterloo", "computer", "science", "club", "class", "profile", "2023"],
openGraph: {
type: "website",
title: "2023 CS Class Profile",
description,
url: "https://csclub.uwaterloo.ca/classprofile/2023/",
},
icons: ["/images/favicon.ico"],
};
}