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: cleared comments added scroll to subteam code

Browse Source
This commit is contained in:
darkicewolf50 2024-03-23 13:15:32 -06:00
parent 32e8dbacbd
commit 849350c732
1 changed files with 73 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/Teams/SubTeams.js
View File

@ -30,6 +30,19 @@ const SubTeams = () => {
} }
}; };
/**
* @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>
* @todo add css pointer talbe elements
*/
const ScrolltoSubteamSection = (index) => {
const section = document.querySelectorAll(".subteamSection")[index];
if (section) {
section.scrollIntoView({ behavior: "smooth" });
}
};
return ( return (
<div id="Subteams"> <div id="Subteams">
<h2>Get to Know Our Subteams</h2> <h2>Get to Know Our Subteams</h2>
@ -42,49 +55,70 @@ const SubTeams = () => {
{/* this really sucks it needs to be changed */} {/* this really sucks it needs to be changed */}
<tr> <tr>
{/* row 1 */} {/* row 1 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(0);
}}>
<img <img
src={subteamsArray[0].iconUrl} src={subteamsArray[0].iconUrl}
alt={subteamsArray[0] + "'s Icon"} alt={subteamsArray[0] + "'s Icon"}
/> />
</td> </td>
{/* row 2 */} {/* row 2 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(1);
}}>
<img <img
src={subteamsArray[1].iconUrl} src={subteamsArray[1].iconUrl}
alt={subteamsArray[1] + "'s Icon"} alt={subteamsArray[1] + "'s Icon"}
/> />
</td> </td>
{/* row 3 */} {/* row 3 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(2);
}}>
<img <img
src={subteamsArray[2].iconUrl} src={subteamsArray[2].iconUrl}
alt={subteamsArray[2] + "'s Icon"} alt={subteamsArray[2] + "'s Icon"}
/> />
</td> </td>
{/* row 4 */} {/* row 4 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(3);
}}>
<img <img
src={subteamsArray[3].iconUrl} src={subteamsArray[3].iconUrl}
alt={subteamsArray[3] + "'s Icon"} alt={subteamsArray[3] + "'s Icon"}
/> />
</td> </td>
{/* row 5 */} {/* row 5 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(4);
}}>
<img <img
src={subteamsArray[4].iconUrl} src={subteamsArray[4].iconUrl}
alt={subteamsArray[4] + "'s Icon"} alt={subteamsArray[4] + "'s Icon"}
/> />
</td> </td>
{/* row 6 */} {/* row 6 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(5);
}}>
<img <img
src={subteamsArray[5].iconUrl} src={subteamsArray[5].iconUrl}
alt={subteamsArray[5] + "'s Icon"} alt={subteamsArray[5] + "'s Icon"}
/> />
</td> </td>
{/* row 7 */} {/* row 7 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(6);
}}>
<img <img
src={subteamsArray[6].iconUrl} src={subteamsArray[6].iconUrl}
alt={subteamsArray[6] + "'s Icon"} alt={subteamsArray[6] + "'s Icon"}
@ -93,47 +127,69 @@ const SubTeams = () => {
</tr> </tr>
<tr> <tr>
{/* row 1 */} {/* row 1 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(0);
}}>
<p>{subteamsArray[0].shortDescription}</p> <p>{subteamsArray[0].shortDescription}</p>
</td> </td>
{/* row 2 */} {/* row 2 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(1);
}}>
<p>{subteamsArray[1].shortDescription}</p> <p>{subteamsArray[1].shortDescription}</p>
</td> </td>
{/* row 3 */} {/* row 3 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(2);
}}>
<p>{subteamsArray[2].shortDescription}</p> <p>{subteamsArray[2].shortDescription}</p>
</td> </td>
{/* row 4 */} {/* row 4 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(3);
}}>
<p>{subteamsArray[3].shortDescription}</p> <p>{subteamsArray[3].shortDescription}</p>
</td> </td>
{/* row 5 */} {/* row 5 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(4);
}}>
<p>{subteamsArray[4].shortDescription}</p> <p>{subteamsArray[4].shortDescription}</p>
</td> </td>
{/* row 6 */} {/* row 6 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(5);
}}>
<p>{subteamsArray[5].shortDescription}</p> <p>{subteamsArray[5].shortDescription}</p>
</td> </td>
{/* row 7 */} {/* row 7 */}
<td> <td
onClick={() => {
ScrolltoSubteamSection(6);
}}>
<p>{subteamsArray[6].shortDescription}</p> <p>{subteamsArray[6].shortDescription}</p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div> <div>
{/* lays out content from the .yml file gets the name of the subteam and ready for layout */} {/* lays out content from the subteams dict gets the name of the subteam and index */}
{Object.keys(subteamsDict).map((subteamName, index) => { {Object.keys(subteamsDict).map((subteamName, index) => {
const subteam = subteamsDict[subteamName]; const subteam = subteamsDict[subteamName];
//changes location of content based if the second one creates a checkerboard layout //changes location of content based if the second one creates a checkerboard layout
const className = index % 2 === 0 ? "SubteamsEnd" : ""; const className = index % 2 === 0 ? "SubteamsEnd" : "";
return ( return (
<div> <div>
{/* changes layout if the second or first one */}
{index % 2 === 0 ? ( {index % 2 === 0 ? (
<> <>
<div> <div className="subteamSection">
<img <img
src={subteam.iconUrl} src={subteam.iconUrl}
alt={subteamName + "'s Icon"} alt={subteamName + "'s Icon"}
@ -154,7 +210,7 @@ const SubTeams = () => {
</> </>
) : ( ) : (
<> <>
<div> <div className="subteamSection">
<h2 className={className}>{subteamName}</h2> <h2 className={className}>{subteamName}</h2>
<img <img
src={subteam.iconUrl} src={subteam.iconUrl}