Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

added subteams: css done needs images, icons and descriptions

Browse Source
This commit is contained in:
darkicewolf50 2024-03-23 15:06:18 -06:00
parent 074ac5c3ad
commit 891b818e93
2 changed files with 93 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/Teams/SubTeams.css
View File

@ -0,0 +1,76 @@
#subteams {
background-color: whitesmoke;
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;
background-color: grey;
}
#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;
background-color: aqua;
}
.subteamsEnd h2 {
padding-right: 1rem;
padding-left: 0px;
}
#subteamContent {
background-color: blueviolet;
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;
}

27
src/Teams/SubTeams.js
View File

@ -3,6 +3,13 @@ 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 css
*/
const SubTeams = () => {
const [subteamsDict, setSubteamsDict] = useState();
const [subteamsArray, setSubteamsArray] = useState();
@ -38,14 +45,14 @@ const SubTeams = () => {
* @todo add css pointer talbe elements
*/
const ScrolltoSubteamSection = (index) => {
const section = document.querySelectorAll(".subteamSection")[index];
const section = document.querySelectorAll(".subteamTitle")[index];
if (section) {
section.scrollIntoView({ behavior: "smooth" });
}
};
return (
<div id="Subteams">
<h2>Get to Know Our Subteams</h2>
<div id="subteams">
<h1>Get to Know Our Subteams</h1>
{subteamsDict === undefined && subteamsArray === undefined ? (
<p>Loading...</p>
) : (
@ -178,18 +185,18 @@ const SubTeams = () => {
</tr>
</tbody>
</table>
<div>
<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
const className = index % 2 === 0 ? "SubteamsEnd" : "";
let className = index % 2 === 0 ? "subteamsEnd" : "";
return (
<div>
<div key={subteamName}>
{/* changes layout if the second or first one */}
{index % 2 === 0 ? (
<>
<div className="subteamSection">
<div className={"subteamTitle " + className}>
<img
src={subteam.iconUrl}
alt={subteamName + "'s Icon"}
@ -197,7 +204,7 @@ const SubTeams = () => {
/>
<h2 className={className}>{subteamName}</h2>
</div>
<div>
<div className="subteamData">
<img
src={subteam.subteamAtWork}
alt={
@ -210,7 +217,7 @@ const SubTeams = () => {
</>
) : (
<>
<div className="subteamSection">
<div className={"subteamTitle" + className}>
<h2 className={className}>{subteamName}</h2>
<img
src={subteam.iconUrl}
@ -218,7 +225,7 @@ const SubTeams = () => {
className={className}
/>
</div>
<div>
<div className="subteamData">
<p>{subteam.longDescription}</p>
<img
src={subteam.subteamAtWork}