mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 05:14:18 -06:00
Merge branch 'dev' into sponsor
This commit is contained in:
darkicewolf50
GitHub
commit
776749a831
@ -14,7 +14,7 @@ const Ender = () => {
|
||||
<p
|
||||
onClick={() => window.open("https://www.morphgenix.com/", "_blank")}
|
||||
id="pointerCursor">
|
||||
Powered by: Morphgenix
|
||||
Partnered with Morphgenix
|
||||
</p>
|
||||
</div>
|
||||
<ul className="hidden">
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import OpenPageButton from "./OpenPageButton";
|
||||
|
||||
/**
|
||||
* @param {null} null - Takes in nothing
|
||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
||||
* @description Drop down menu elements
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
*/
|
||||
const DropdownMenu = () => {
|
||||
return (
|
||||
<div>
|
||||
<OpenPageButton
|
||||
pageToGoTo={"/JoinTheClub"}
|
||||
textOnButton={"Join the Club"}
|
||||
/>
|
||||
<OpenPageButton
|
||||
pageToGoTo={"/UpcomingEvents"}
|
||||
textOnButton={"Upcoming Events"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DropdownMenu;
|
||||
@ -5,6 +5,12 @@ header {
|
||||
margin-top: 0%;
|
||||
}
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0px;
|
||||
height: 10%;
|
||||
@ -19,14 +25,93 @@ header figure {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* not sure what these two are for */
|
||||
#title {
|
||||
background-color: blueviolet;
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.banner {
|
||||
|
||||
nav a li {
|
||||
background-color: white;
|
||||
padding: 0.5rem;
|
||||
border: solid 1px gray;
|
||||
}
|
||||
|
||||
nav a li:hover {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: aqua;
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
/* makes it so that the tags look the same whist having removing browser error */
|
||||
.DropDownHeader {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
padding: 0.5rem;
|
||||
border: solid 1px gray;
|
||||
}
|
||||
|
||||
.DropDownHeader:hover {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.Hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DropDown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.DropDown a {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* makes dropdown visible */
|
||||
.DropDown:hover .Hide {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
header div button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
align-items: center;
|
||||
background-color: inherit;
|
||||
border: solid 2px gray;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
header div button img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* for dark mode */
|
||||
|
||||
.darkmode {
|
||||
filter: invert(95%) hue-rotate(180deg);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#root.darkmode #logo.logoAfterDark {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
#root.darkmode #darkModeToggle {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import logo from "./logo.webp";
|
||||
import DropdownMenu from "./DropdownMenu";
|
||||
import OpenPageButton from "./OpenPageButton";
|
||||
import { useNavigate, Outlet } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
import lightDark from "./light-dark.webp";
|
||||
import { Outlet, Link } from "react-router-dom";
|
||||
import "./Header.css";
|
||||
import Ender from "../Footer/Ender";
|
||||
|
||||
@ -11,73 +9,106 @@ import Ender from "../Footer/Ender";
|
||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
||||
* @description The top header part of the page includes the naviagtion
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
* @todo final css add baja but eon (baja leads chat)
|
||||
*/
|
||||
const Header = () => {
|
||||
const [isDropdownVisible, setDropdownVisible] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
/**
|
||||
* @param {String} arg - The page that the button goes to
|
||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
||||
* @description Function that move you to the specified place
|
||||
* @param {null} null - Takes in nothing
|
||||
* @returns {CSSStyleRule} CSS - changes page to darkmode
|
||||
* @description inverts all of the colors of body without touching the pictures
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
*/
|
||||
const LinkTo = (arg) => {
|
||||
navigate(arg);
|
||||
const switchDarkMode = () => {
|
||||
const body = document.getElementById("root");
|
||||
const logoCss = document.getElementById("logo");
|
||||
|
||||
body.classList.toggle("darkmode");
|
||||
logoCss.classList.toggle("logoAfterDark");
|
||||
};
|
||||
|
||||
//makes the drop down menu visible when the mouse enters the Club Membership & Upcoming events button area
|
||||
const handleMouseEnter = () => {
|
||||
setDropdownVisible(true);
|
||||
};
|
||||
//makes the drop down menu invisible when the mouse leaves the Club Membership & Upcoming events button area
|
||||
const handleMouseLeave = () => {
|
||||
setDropdownVisible(false);
|
||||
};
|
||||
/**
|
||||
* @param {null} null - Takes in nothing
|
||||
* @returns {CSSStyleRule} CSS - makes it compliant with bowser preferances
|
||||
* @description checks for what the browser prefers
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const prefersDarkMode =
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
if (prefersDarkMode) {
|
||||
switchDarkMode();
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<figure onClick={() => LinkTo("/")}>
|
||||
<img
|
||||
id="logo"
|
||||
src={logo}
|
||||
alt="Schulich Off-Road's logo"
|
||||
/>
|
||||
<figcaption>
|
||||
<h2>Schulich Offroad</h2>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div>
|
||||
<Link to={"/"}>
|
||||
<figure>
|
||||
<img
|
||||
id="logo"
|
||||
src={logo}
|
||||
alt="Schulich Off-Road's logo"
|
||||
/>
|
||||
<figcaption>
|
||||
<h1>Schulich Offroad</h1>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Link>
|
||||
<button onClick={switchDarkMode}>
|
||||
<img
|
||||
id="darkModeToggle"
|
||||
src={lightDark}
|
||||
alt="Light/Dark Toggle Symbol"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<nav>
|
||||
<OpenPageButton
|
||||
pageToGoTo={"/"}
|
||||
textOnButton={"About Us"}
|
||||
/>
|
||||
<OpenPageButton
|
||||
pageToGoTo={"/Teams"}
|
||||
textOnButton={"Teams"}
|
||||
/>
|
||||
<OpenPageButton
|
||||
pageToGoTo={"/OurSponsors"}
|
||||
textOnButton={"Our Sponsors"}
|
||||
/>
|
||||
<OpenPageButton
|
||||
pageToGoTo={"/BecomeASponsor"}
|
||||
textOnButton={"Become a Sponsor"}
|
||||
/>
|
||||
<div
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{ background: "red" }}>
|
||||
{/* dropdown menu is only visible when a mouse enters the area of the button below */}
|
||||
<button type="button">Club Membership & Upcoming Events</button>{" "}
|
||||
{/*this button does nothing yet*/}
|
||||
{isDropdownVisible && <DropdownMenu />}
|
||||
</div>
|
||||
<OpenPageButton
|
||||
pageToGoTo={"/Gallery"}
|
||||
textOnButton={"Gallery"}
|
||||
/>
|
||||
<ul>
|
||||
<Link to={"/"}>
|
||||
<li>About Us</li>
|
||||
</Link>
|
||||
<Link to={"/Teams"}>
|
||||
<li>Teams</li>
|
||||
</Link>
|
||||
<Link to={"/OurSponsors"}>
|
||||
<li>Our Sponsors</li>
|
||||
</Link>
|
||||
<Link to={"/OurSponsors"}>
|
||||
<li>Become a Sponsor</li>
|
||||
</Link>
|
||||
<li className="DropDown">
|
||||
{/* this link and li only exits for styling purposes */}
|
||||
<Link className="DropDownHeader">
|
||||
Club Membership & Upcoming Events
|
||||
</Link>
|
||||
|
||||
<ul className="Hide">
|
||||
<Link to={"/JoinTheClub"}>
|
||||
<li>Join the Club</li>
|
||||
</Link>
|
||||
<Link to={"/UpcomingEvents"}>
|
||||
<li>Upcoming Events</li>
|
||||
</Link>
|
||||
<Link>
|
||||
<li>Previous Events</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="DropDown">
|
||||
<Link className="DropDownHeader">More...</Link>
|
||||
<ul className="Hide">
|
||||
<Link to={"/Gallery"}>
|
||||
<li>Gallery</li>
|
||||
</Link>
|
||||
<Link>
|
||||
<li>Roster</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<Outlet />
|
||||
|
||||
BIN
src/Header/light-dark.webp
Normal file
BIN
src/Header/light-dark.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
35
src/MockDB/SubTeams.yml
Normal file
35
src/MockDB/SubTeams.yml
Normal file
@ -0,0 +1,35 @@
|
||||
Chassis and Ergonomics:
|
||||
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
shortDescription: The chassis and ergo team builds the Main Chassis of the Car and builds the components for the driver to sit in
|
||||
longDescription: Step into the world of the Chassis and Ergonomics Team, where comfort meets performance in every curve and contour. With an eye for detail and a passion for perfection, they sculpt the backbone of our vehicle, ensuring it's not just built to last, but to excel. From optimizing seating positions to fine-tuning weight distribution, they're the architects of a ride that feels as good as it looks. Join us as we push the boundaries of design and functionality, driven by the ingenuity of our Chassis and Ergonomics Team.
|
||||
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
Drivetrain:
|
||||
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
shortDescription: The drivetrain team connects the engine to the wheels
|
||||
longDescription: The drivetrain subteam plays a pivotal role in ensuring efficient power transfer from the engine to the wheels, overseeing key components such as gearboxes, axles, and driveshafts. Through hands-on learning and mentorship, members develop a comprehensive skill set in CAD, FEA, CAM, and machining, empowering them to design, analyze, and manufacture critical vehicle components with a focus on innovation and practical applications.
|
||||
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
Steering:
|
||||
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
shortDescription: The steering team builds the componets that allow the driver to control the car
|
||||
longDescription: In the steering subteam, we design and develop the steering behaviors of the car. This includes the turning radius, the ratio between the seeing pinion and rack, and implementing Ackerman geometry. every year we use a wide variety of machining techniques and software to bring our designs to life, ranging from FEA analysis to professional CNC machining. Our goal is to develop the most compact and lightweight system to achieve the optimal driving dynamics.
|
||||
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
Suspension:
|
||||
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
shortDescription: The suspension team makes it so that the car is able to handle all of the bumps and jumps
|
||||
longDescription: The suspension subteam manages the vehicle's manoeuvrability and handling capabilities. As an offroad buggy, suspension setups must endure all terrain types, including rough rocks and fast jumps. Beyond their endurance capabilities, the vehicle’s handling characteristics are determined through rigorous development of the suspension geometry in simulation software and hand calculations. This subteam collaborates frequently with the chassis and steering subteams to optimize geometries. Suspension assemblies primarily comprised of arms, shocks, steering knuckles, and rear bearing carriers.
|
||||
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
Electrical:
|
||||
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
shortDescription: The electrical team connects some of the instruments the car uses and supports the team in additional ways
|
||||
longDescription: The electrical team is pivotal in ensuring the performance, safety, and reliability of the racing car during competitions. They design robust electronics and safety mechanisms capable of withstanding the rigors of endurance racing. Additionally, they provide technological support to other sub-teams, integrating data collection systems that directly influence the design process for all components. Their responsibilities encompass designing, testing, and optimizing electrical systems while leveraging data to enhance vehicle performance and safety.
|
||||
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
Logistics:
|
||||
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
shortDescription: The logistics team handles the business side of the club and handles planning of trips to competitions
|
||||
longDescription: We handle generating a majority of the money needed for operation of the club, travel funds and our social media pages. As part of our responsibility to our sponsors we handle organizing and training all of our members to an industry standard level, all of our work from software, sponsorship, professional outreach, CAD and manufacturing processes.
|
||||
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
Software:
|
||||
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
shortDescription: The software team hanldes the data collection systems, our data storage server, and this website
|
||||
longDescription: The software team works very closely with electrical team with the creation of our onboard data collection unit, ensuring that all of the code we produce is up to industry standard as well as we handle the creation and maintenence of this site, including the backend which we run on our very own server.
|
||||
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||
1
src/MockDB/nothing.txt
Normal file
1
src/MockDB/nothing.txt
Normal file
@ -0,0 +1 @@
|
||||
this is only for testing vercel
|
||||
72
src/Teams/SubTeams.css
Normal file
72
src/Teams/SubTeams.css
Normal file
@ -0,0 +1,72 @@
|
||||
#subteams {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#subteams h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#subteams table {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#subteams table tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#subteams table td {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#subteams table img {
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
#subteams table p {
|
||||
width: 10rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subteamsEnd {
|
||||
text-align: end;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.subteamsEnd h2 {
|
||||
padding-right: 1rem;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
#subteamContent {
|
||||
padding-top: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.subteamData {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 10rem;
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#subteamContent p {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.subteamTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 5rem;
|
||||
margin: 0px auto;
|
||||
border-bottom: solid 2px black;
|
||||
}
|
||||
249
src/Teams/SubTeams.js
Normal file
249
src/Teams/SubTeams.js
Normal file
@ -0,0 +1,249 @@
|
||||
import "./SubTeams.css";
|
||||
import { useState, useEffect } from "react";
|
||||
import yaml from "js-yaml";
|
||||
import leadershipData from "../MockDB/SubTeams.yml";
|
||||
|
||||
/**
|
||||
* @param {null} null - requires nothing (link)
|
||||
* @returns {JSX.Element} page - page content
|
||||
* @description the subteams page
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
* @todo add gPRC to backend and any remaining css
|
||||
*/
|
||||
const SubTeams = () => {
|
||||
const [subteamsDict, setSubteamsDict] = useState();
|
||||
const [subteamsArray, setSubteamsArray] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
getLeadership();
|
||||
}, []);
|
||||
/**
|
||||
* @param {null} null - requires nothing (link)
|
||||
* @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive
|
||||
* @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
* @todo add gPRC to backend and front end add connect to synology drive
|
||||
*/
|
||||
const getLeadership = async () => {
|
||||
try {
|
||||
const res = await fetch(leadershipData);
|
||||
const rawText = await res.text();
|
||||
const yamlDict = await yaml.load(rawText);
|
||||
setSubteamsDict(yamlDict);
|
||||
setSubteamsArray(Object.values(yamlDict));
|
||||
} catch (error) {
|
||||
//error checking
|
||||
console.error("Error recieving data from server:");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {index} Int - requires the number of the section to go to
|
||||
* @returns {null} null - moves screen to a specific subteam section
|
||||
* @description moves screen to the subteam's section upon click
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
*/
|
||||
const ScrolltoSubteamSection = (index) => {
|
||||
const section = document.querySelectorAll(".subteamTitle")[index];
|
||||
if (section) {
|
||||
section.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div id="subteams">
|
||||
<h1>Get to Know Our Subteams</h1>
|
||||
{subteamsDict === undefined && subteamsArray === undefined ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<>
|
||||
<table>
|
||||
<tbody>
|
||||
{/* this really sucks it needs to be changed */}
|
||||
<tr>
|
||||
{/* row 1 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(0);
|
||||
}}>
|
||||
<img
|
||||
src={subteamsArray[0].iconUrl}
|
||||
alt={subteamsArray[0] + "'s Icon"}
|
||||
/>
|
||||
</td>
|
||||
{/* row 2 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(1);
|
||||
}}>
|
||||
<img
|
||||
src={subteamsArray[1].iconUrl}
|
||||
alt={subteamsArray[1] + "'s Icon"}
|
||||
/>
|
||||
</td>
|
||||
{/* row 3 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(2);
|
||||
}}>
|
||||
<img
|
||||
src={subteamsArray[2].iconUrl}
|
||||
alt={subteamsArray[2] + "'s Icon"}
|
||||
/>
|
||||
</td>
|
||||
{/* row 4 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(3);
|
||||
}}>
|
||||
<img
|
||||
src={subteamsArray[3].iconUrl}
|
||||
alt={subteamsArray[3] + "'s Icon"}
|
||||
/>
|
||||
</td>
|
||||
{/* row 5 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(4);
|
||||
}}>
|
||||
<img
|
||||
src={subteamsArray[4].iconUrl}
|
||||
alt={subteamsArray[4] + "'s Icon"}
|
||||
/>
|
||||
</td>
|
||||
{/* row 6 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(5);
|
||||
}}>
|
||||
<img
|
||||
src={subteamsArray[5].iconUrl}
|
||||
alt={subteamsArray[5] + "'s Icon"}
|
||||
/>
|
||||
</td>
|
||||
{/* row 7 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(6);
|
||||
}}>
|
||||
<img
|
||||
src={subteamsArray[6].iconUrl}
|
||||
alt={subteamsArray[6] + "'s Icon"}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
{/* row 1 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(0);
|
||||
}}>
|
||||
<p>{subteamsArray[0].shortDescription}</p>
|
||||
</td>
|
||||
{/* row 2 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(1);
|
||||
}}>
|
||||
<p>{subteamsArray[1].shortDescription}</p>
|
||||
</td>
|
||||
{/* row 3 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(2);
|
||||
}}>
|
||||
<p>{subteamsArray[2].shortDescription}</p>
|
||||
</td>
|
||||
{/* row 4 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(3);
|
||||
}}>
|
||||
<p>{subteamsArray[3].shortDescription}</p>
|
||||
</td>
|
||||
{/* row 5 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(4);
|
||||
}}>
|
||||
<p>{subteamsArray[4].shortDescription}</p>
|
||||
</td>
|
||||
{/* row 6 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(5);
|
||||
}}>
|
||||
<p>{subteamsArray[5].shortDescription}</p>
|
||||
</td>
|
||||
{/* row 7 */}
|
||||
<td
|
||||
onClick={() => {
|
||||
ScrolltoSubteamSection(6);
|
||||
}}>
|
||||
<p>{subteamsArray[6].shortDescription}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="subteamContent">
|
||||
{/* lays out content from the subteams dict gets the name of the subteam and index */}
|
||||
{Object.keys(subteamsDict).map((subteamName, index) => {
|
||||
const subteam = subteamsDict[subteamName];
|
||||
//changes location of content based if the second one creates a checkerboard layout
|
||||
let className = index % 2 === 0 ? "subteamsEnd" : "";
|
||||
return (
|
||||
<div key={subteamName}>
|
||||
{/* changes layout if the second or first one */}
|
||||
{index % 2 === 0 ? (
|
||||
<>
|
||||
<div className={"subteamTitle " + className}>
|
||||
<img
|
||||
src={subteam.iconUrl}
|
||||
alt={subteamName + "'s Icon"}
|
||||
className={className}
|
||||
/>
|
||||
<h2 className={className}>{subteamName}</h2>
|
||||
</div>
|
||||
<div className="subteamData">
|
||||
<img
|
||||
src={subteam.subteamAtWork}
|
||||
alt={
|
||||
subteamName +
|
||||
"'s members work or working on a project"
|
||||
}
|
||||
/>
|
||||
<p>{subteam.longDescription}</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className={"subteamTitle" + className}>
|
||||
<h2 className={className}>{subteamName}</h2>
|
||||
<img
|
||||
src={subteam.iconUrl}
|
||||
alt={subteamName + "'s Icon"}
|
||||
className={className}
|
||||
/>
|
||||
</div>
|
||||
<div className="subteamData">
|
||||
<p>{subteam.longDescription}</p>
|
||||
<img
|
||||
src={subteam.subteamAtWork}
|
||||
alt={
|
||||
subteamName +
|
||||
"'s members work or working on a project"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubTeams;
|
||||
@ -1,5 +0,0 @@
|
||||
export default function Teams() {
|
||||
return (
|
||||
<p>Teams</p>
|
||||
);
|
||||
};
|
||||
@ -1,13 +1,20 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
/* for dark mode */
|
||||
#root.darkmode img,
|
||||
#root.darkmode video,
|
||||
#root.darkmode iframe {
|
||||
filter: invert(95%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import reportWebVitals from "./reportWebVitals";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Header from "./Header/Header";
|
||||
import AboutUs from "./AboutUs/AboutUs";
|
||||
import Teams from "./Teams/Teams";
|
||||
import SubTeams from "./Teams/SubTeams";
|
||||
import OurSponsors from "./OurSponsors/OurSponsors";
|
||||
import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub";
|
||||
import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
|
||||
@ -22,7 +22,7 @@ root.render(
|
||||
element={<AboutUs />}></Route>
|
||||
<Route
|
||||
path="/Teams"
|
||||
element={<Teams />}></Route>
|
||||
element={<SubTeams />}></Route>
|
||||
<Route
|
||||
path="/OurSponsors"
|
||||
element={<OurSponsors />}></Route>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user