From 7a83dfcf703b770a4667104dd0907a7f9ae696cb Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Wed, 13 Mar 2024 20:17:15 -0600 Subject: [PATCH 1/8] attempted to change the css, added past sponsors spot --- src/MockDB/sponsorship.yml | 9 --- src/OurSponsors/OurSponsors.css | 13 +++- src/OurSponsors/OurSponsors.js | 126 ++++++++++++++++++++++++++------ 3 files changed, 115 insertions(+), 33 deletions(-) diff --git a/src/MockDB/sponsorship.yml b/src/MockDB/sponsorship.yml index 5123cab..51837f9 100644 --- a/src/MockDB/sponsorship.yml +++ b/src/MockDB/sponsorship.yml @@ -3,48 +3,39 @@ Diamond Tier: LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU Url: https://schulich.ucalgary.ca/ DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor. - DecriptionOnHelp: Money Platinum Tier: - Name: Platinum Sponsor Name LogoUrl: Url: DescriptionAboutSponsor: - DescriptionOnHelp: Money Gold Tier: - Name: Suri LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280 Url: https://www.surimanufacturing.com/ DescriptionAboutSponsor: - DescriptionOnHelp: I am not sure of the time of writing this - Name: SKF LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg Url: https://www.skf.com/ca/en DescriptionAboutSponsor: I am not sure - DescriptionOnHelp: I am not sure of the time of writing this - Name: WRMA LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png Url: https://wildrosemx.com/ DescriptionAboutSponsor: - DescriptionOnHelp: Lets us use their trak during the warm months Silver Tier: - Name: Encore Metals LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png Url: https://www.encoremetals.com/ DescriptionAboutSponsor: Metal supplier - DescriptionOnHelp: Where we buy metals from at a discounted rate - Name: CNOOC LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png Url: https://cnoocinternational.com/ DescriptionAboutSponsor: - DescriptionOnHelp: Money Bronze Tier: - Name: Redbull LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg" Url: https://www.redbull.com/ca-en/ DescriptionAboutSponsor: - DescriptionOnHelp: Free Energy Drinks - Name: Canada Action LogoUrl: Url: I dont know DescriptionAboutSponsor: - DescriptionOnHelp: Money diff --git a/src/OurSponsors/OurSponsors.css b/src/OurSponsors/OurSponsors.css index 7938902..5f80c2b 100644 --- a/src/OurSponsors/OurSponsors.css +++ b/src/OurSponsors/OurSponsors.css @@ -39,12 +39,21 @@ width: 100%; } +#OurSponsors div div h3 { + cursor: pointer; +} + #OurSponsors h2 { background-color: aquamarine; text-align: center; margin: 0px; } -#OurSponsors h3 { - text-align: left; +#SponsorFlexEnd { + text-align: end; +} + +.SponsorsTitle { + text-align: left; + border-bottom: 2px solid black; } diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js index 8d278c0..8c7519c 100644 --- a/src/OurSponsors/OurSponsors.js +++ b/src/OurSponsors/OurSponsors.js @@ -1,6 +1,7 @@ import "./OurSponsors.css"; import { useEffect, useState } from "react"; -import sponsorData from "../MockDB/sponsorship.yml"; +import currentSponsorData from "../MockDB/sponsorship.yml"; +import pastSponsorData from "../MockDB/sponsorship.yml"; import yaml from "js-yaml"; import OpenPage from "../Header/OpenPage"; @@ -12,10 +13,12 @@ import OpenPage from "../Header/OpenPage"; * @todo finish page layout */ const OurSponsors = () => { - const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors + const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors + const [pastSponsorsDict, setPastSponsorsDict] = useState(); useEffect(() => { - getSponsors(); + getCurrentSponsors(); + getPastSponsors(); }, []); /** @@ -25,24 +28,42 @@ const OurSponsors = () => { * @author Brock * @todo add gPRC to backend and front end add connect to synology drive */ - const getSponsors = async () => { + const getCurrentSponsors = async () => { try { - const res = await fetch(sponsorData); + const res = await fetch(currentSponsorData); const rawText = await res.text(); const yamlDict = yaml.load(rawText); - setSponsorsDict(yamlDict); + setCurrentSponsorsDict(yamlDict); + } catch (error) { + //error checking + console.error("Error recieving data from server:"); + } + }; + /** + * @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 + * @todo add gPRC to backend and front end add connect to synology drive + */ + const getPastSponsors = async () => { + try { + const res = await fetch(pastSponsorData); + const rawText = await res.text(); + const yamlDict = yaml.load(rawText); + setPastSponsorsDict(yamlDict); } catch (error) { //error checking console.error("Error recieving data from server:"); } }; - if (!sponsorsDict) { + if (!currentSponsorsDict && !pastSponsorsDict) { //awaiting for a resposne from the backend //add loading notification to user return

Loading...

; } - if (sponsorsDict) { + if (currentSponsorsDict && pastSponsorsDict) { //maps out the dictionary and displays the content return (
@@ -52,23 +73,91 @@ const OurSponsors = () => { textOnButton={"Become a Sponsor"} />
-
-

Current Sponsors

+
+

Current Sponsors

{/* gets the outmost name of the Object {"Name of tier": {...}} */} - {Object.keys(sponsorsDict).map((sponsorTier) => ( + {Object.keys(currentSponsorsDict).map((sponsorTier) => (

{sponsorTier}

{/* gets the keys from the new inner object used so that no two html tags are the "same" */} - {Object.keys(sponsorsDict[sponsorTier]).map((sponsorKey) => { - const sponsor = sponsorsDict[sponsorTier][sponsorKey]; + {Object.keys(currentSponsorsDict[sponsorTier]).map( + (sponsorKey) => { + const sponsor = currentSponsorsDict[sponsorTier][sponsorKey]; + return ( +
+
+
+ {sponsor.Name &&

{sponsor.Name}

} + {sponsor.LogoUrl && ( + + { + + )} +
+ {/* puts this in the sponsor's section only if they are silver and above */} + {sponsor.DescriptionAboutSponsor !== undefined && + sponsor.DecriptionOnHelp !== undefined && + (sponsorTier !== "Bronze Tier" || + sponsorTier !== "Silver Tier") && ( +

Another Element

+ )} +
+ {/* puts this in the sponsor's section only if they are silver and above */} + {sponsor.DescriptionAboutSponsor !== undefined && + (sponsorTier !== "Bronze Tier" || + sponsorTier !== "Silver Tier") && ( +

{sponsor.DescriptionAboutSponsor}

+ )} + {/* puts this in the sponsor's section only if they are silver and above */} + {sponsor.DecriptionOnHelp !== undefined && + (sponsorTier !== "Bronze Tier" || + sponsorTier !== "Silver Tier") && ( +

{sponsor.DecriptionOnHelp}

+ )} +
+ ); + } + )} +
+ ))} +
+
+

+ Past Sponsors +

+ {/* gets the outmost name of the Object {"Name of tier": {...}} */} + {Object.keys(pastSponsorsDict).map((sponsorTier) => ( +
+

{sponsorTier}

+ {/* gets the keys from the new inner object used so that no two html tags are the "same" */} + {Object.keys(pastSponsorsDict[sponsorTier]).map((sponsorKey) => { + const sponsor = pastSponsorsDict[sponsorTier][sponsorKey]; return (
- {sponsor.Name &&

{sponsor.Name}

} - {sponsor.LogoUrl && ( + {sponsor.Name && ( +

window.open(sponsor.Url, "_blank")}> + {sponsor.Name} +

+ )} + {sponsor.LogoUrl && sponsorTier !== "Bronze Tier" && ( { )}
- {/* puts this in the sponsor's section only if they are silver and above */} - {sponsor.DescriptionAboutSponsor !== undefined && - sponsor.DecriptionOnHelp !== undefined && - (sponsorTier !== "Bronze Tier" || - sponsorTier !== "Silver Tier") && ( -

Another Element

- )}
{/* puts this in the sponsor's section only if they are silver and above */} {sponsor.DescriptionAboutSponsor !== undefined && From cc91df581a681661207512b6982022d9497737cd Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 16 Mar 2024 21:52:16 -0600 Subject: [PATCH 2/8] change(OurSponsors) removed a lot to reformat into better code --- src/MockDB/sponsorship.yml | 72 ++++++++++----------- src/OurSponsors/OurSponsors.js | 110 +-------------------------------- 2 files changed, 39 insertions(+), 143 deletions(-) diff --git a/src/MockDB/sponsorship.yml b/src/MockDB/sponsorship.yml index 51837f9..63bcbff 100644 --- a/src/MockDB/sponsorship.yml +++ b/src/MockDB/sponsorship.yml @@ -1,41 +1,41 @@ Diamond Tier: - - Name: Schulich School of Engineering - LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU - Url: https://schulich.ucalgary.ca/ - DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor. + - Schulich School of Engineering: + LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU + Url: https://schulich.ucalgary.ca/ + DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor. Platinum Tier: - - Name: Platinum Sponsor Name - LogoUrl: - Url: - DescriptionAboutSponsor: + - Platinum Sponsor Name: + LogoUrl: + Url: + DescriptionAboutSponsor: Gold Tier: - - Name: Suri - LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280 - Url: https://www.surimanufacturing.com/ - DescriptionAboutSponsor: - - Name: SKF - LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg - Url: https://www.skf.com/ca/en - DescriptionAboutSponsor: I am not sure - - Name: WRMA - LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png - Url: https://wildrosemx.com/ - DescriptionAboutSponsor: + - Suri: + LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280 + Url: https://www.surimanufacturing.com/ + DescriptionAboutSponsor: + - SKF: + LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg + Url: https://www.skf.com/ca/en + DescriptionAboutSponsor: I am not sure + - WRMA: + LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png + Url: https://wildrosemx.com/ + DescriptionAboutSponsor: Silver Tier: - - Name: Encore Metals - LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png - Url: https://www.encoremetals.com/ - DescriptionAboutSponsor: Metal supplier - - Name: CNOOC - LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png - Url: https://cnoocinternational.com/ - DescriptionAboutSponsor: + - Encore Metals: + LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png + Url: https://www.encoremetals.com/ + DescriptionAboutSponsor: Metal supplier + - CNOOC: + LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png + Url: https://cnoocinternational.com/ + DescriptionAboutSponsor: Bronze Tier: - - Name: Redbull - LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg" - Url: https://www.redbull.com/ca-en/ - DescriptionAboutSponsor: - - Name: Canada Action - LogoUrl: - Url: I dont know - DescriptionAboutSponsor: + - Redbull: + LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg" + Url: https://www.redbull.com/ca-en/ + DescriptionAboutSponsor: + - Canada Action: + LogoUrl: + Url: I dont know + DescriptionAboutSponsor: diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js index 8c7519c..54eee29 100644 --- a/src/OurSponsors/OurSponsors.js +++ b/src/OurSponsors/OurSponsors.js @@ -36,6 +36,7 @@ const OurSponsors = () => { setCurrentSponsorsDict(yamlDict); } catch (error) { //error checking + console.log(error); console.error("Error recieving data from server:"); } }; @@ -61,10 +62,12 @@ const OurSponsors = () => { if (!currentSponsorsDict && !pastSponsorsDict) { //awaiting for a resposne from the backend //add loading notification to user + console.log(currentSponsorsDict); return

Loading...

; } if (currentSponsorsDict && pastSponsorsDict) { //maps out the dictionary and displays the content + console.log(currentSponsorsDict); return (
@@ -76,61 +79,6 @@ const OurSponsors = () => {

Current Sponsors

{/* gets the outmost name of the Object {"Name of tier": {...}} */} - {Object.keys(currentSponsorsDict).map((sponsorTier) => ( -
-

{sponsorTier}

- {/* gets the keys from the new inner object used so that no two html tags are the "same" */} - {Object.keys(currentSponsorsDict[sponsorTier]).map( - (sponsorKey) => { - const sponsor = currentSponsorsDict[sponsorTier][sponsorKey]; - return ( -
-
-
- {sponsor.Name &&

{sponsor.Name}

} - {sponsor.LogoUrl && ( - - { - - )} -
- {/* puts this in the sponsor's section only if they are silver and above */} - {sponsor.DescriptionAboutSponsor !== undefined && - sponsor.DecriptionOnHelp !== undefined && - (sponsorTier !== "Bronze Tier" || - sponsorTier !== "Silver Tier") && ( -

Another Element

- )} -
- {/* puts this in the sponsor's section only if they are silver and above */} - {sponsor.DescriptionAboutSponsor !== undefined && - (sponsorTier !== "Bronze Tier" || - sponsorTier !== "Silver Tier") && ( -

{sponsor.DescriptionAboutSponsor}

- )} - {/* puts this in the sponsor's section only if they are silver and above */} - {sponsor.DecriptionOnHelp !== undefined && - (sponsorTier !== "Bronze Tier" || - sponsorTier !== "Silver Tier") && ( -

{sponsor.DecriptionOnHelp}

- )} -
- ); - } - )} -
- ))}

{ id="SponsorFlexEnd"> Past Sponsors

- {/* gets the outmost name of the Object {"Name of tier": {...}} */} - {Object.keys(pastSponsorsDict).map((sponsorTier) => ( -
-

{sponsorTier}

- {/* gets the keys from the new inner object used so that no two html tags are the "same" */} - {Object.keys(pastSponsorsDict[sponsorTier]).map((sponsorKey) => { - const sponsor = pastSponsorsDict[sponsorTier][sponsorKey]; - return ( -
-
-
- {sponsor.Name && ( -

window.open(sponsor.Url, "_blank")}> - {sponsor.Name} -

- )} - {sponsor.LogoUrl && sponsorTier !== "Bronze Tier" && ( - - { - - )} -
-
- {/* puts this in the sponsor's section only if they are silver and above */} - {sponsor.DescriptionAboutSponsor !== undefined && - (sponsorTier !== "Bronze Tier" || - sponsorTier !== "Silver Tier") && ( -

{sponsor.DescriptionAboutSponsor}

- )} - {/* puts this in the sponsor's section only if they are silver and above */} - {sponsor.DecriptionOnHelp !== undefined && - (sponsorTier !== "Bronze Tier" || - sponsorTier !== "Silver Tier") && ( -

{sponsor.DecriptionOnHelp}

- )} -
- ); - })} -
- ))}
); From 585138e7729ce601ff96b1487d37f0183ae3b83b Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sun, 17 Mar 2024 00:03:04 -0600 Subject: [PATCH 3/8] fix(OurSponsors) refactored code to make css more understandable --- src/MockDB/pastSponsors.yml | 36 +++++++++++++ src/MockDB/sponsorship.yml | 2 +- src/OurSponsors/OurSponsors.css | 79 +++++++++++++-------------- src/OurSponsors/OurSponsors.js | 95 ++++++++++++++++++++++++++++----- 4 files changed, 157 insertions(+), 55 deletions(-) create mode 100644 src/MockDB/pastSponsors.yml diff --git a/src/MockDB/pastSponsors.yml b/src/MockDB/pastSponsors.yml new file mode 100644 index 0000000..9b6f171 --- /dev/null +++ b/src/MockDB/pastSponsors.yml @@ -0,0 +1,36 @@ +- Schulich School of Engineering: + LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU + Url: https://schulich.ucalgary.ca/ + DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor. +- Platinum Sponsor Name: + LogoUrl: + Url: + DescriptionAboutSponsor: +- Suri: + LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280 + Url: https://www.surimanufacturing.com/ + DescriptionAboutSponsor: +- SKF: + LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg + Url: https://www.skf.com/ca/en + DescriptionAboutSponsor: I am not sure +- WRMA: + LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png + Url: https://wildrosemx.com/ + DescriptionAboutSponsor: +- Encore Metals: + LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png + Url: https://www.encoremetals.com/ + DescriptionAboutSponsor: Metal supplier +- CNOOC: + LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png + Url: https://cnoocinternational.com/ + DescriptionAboutSponsor: +- Redbull: + LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg" + Url: https://www.redbull.com/ca-en/ + DescriptionAboutSponsor: +- Canada Action: + LogoUrl: + Url: + DescriptionAboutSponsor: diff --git a/src/MockDB/sponsorship.yml b/src/MockDB/sponsorship.yml index 63bcbff..b89946a 100644 --- a/src/MockDB/sponsorship.yml +++ b/src/MockDB/sponsorship.yml @@ -37,5 +37,5 @@ Bronze Tier: DescriptionAboutSponsor: - Canada Action: LogoUrl: - Url: I dont know + Url: DescriptionAboutSponsor: diff --git a/src/OurSponsors/OurSponsors.css b/src/OurSponsors/OurSponsors.css index 5f80c2b..05ea249 100644 --- a/src/OurSponsors/OurSponsors.css +++ b/src/OurSponsors/OurSponsors.css @@ -3,53 +3,15 @@ flex-direction: column; justify-content: center; background-color: gray; - padding-left: 10%; - padding-right: 10%; + padding-left: 2%; + padding-right: 2%; } -#OurSponsors div div { - display: flex; - flex-direction: column; - justify-content: center; +#Sponsor { background-color: white; } -#OurSponsors div div div div div img { - display: flex; - justify-content: left; -} - -#OurSponsors div div div p { - display: flex; - justify-content: left; -} - -#OurSponsors div div div div div { - padding: 0%; - display: flex; - flex-direction: column; - justify-content: left; -} - -#OurSponsors div div div div { - display: flex; - flex-direction: row; - justify-content: flex-end; - padding: 0%; - width: 100%; -} - -#OurSponsors div div h3 { - cursor: pointer; -} - -#OurSponsors h2 { - background-color: aquamarine; - text-align: center; - margin: 0px; -} - -#SponsorFlexEnd { +#SponsorEnd { text-align: end; } @@ -57,3 +19,36 @@ text-align: left; border-bottom: 2px solid black; } + +.Sponsors { + background-color: inherit; +} + +.Sponsors a { + display: flex; + flex-direction: column; + color: inherit; + text-decoration: none; + cursor: pointer; + background-color: whitesmoke; +} + +.Sponsors a div { + display: flex; + flex-direction: row; +} + +.Sponsors a div h4 { + width: 30%; +} + +.Sponsors a div img { + max-height: 8rem; + max-width: 70%; +} + +.Sponsors a div p { + padding: 2rem; + padding-top: 5px; + padding-bottom: 5px; +} diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js index 54eee29..dc42482 100644 --- a/src/OurSponsors/OurSponsors.js +++ b/src/OurSponsors/OurSponsors.js @@ -1,7 +1,7 @@ import "./OurSponsors.css"; import { useEffect, useState } from "react"; import currentSponsorData from "../MockDB/sponsorship.yml"; -import pastSponsorData from "../MockDB/sponsorship.yml"; +import pastSponsorData from "../MockDB/pastSponsors.yml"; import yaml from "js-yaml"; import OpenPage from "../Header/OpenPage"; @@ -54,20 +54,18 @@ const OurSponsors = () => { const yamlDict = yaml.load(rawText); setPastSponsorsDict(yamlDict); } catch (error) { - //error checking + // error checking console.error("Error recieving data from server:"); } }; - + // needs to change into ? : statement and have content above it if (!currentSponsorsDict && !pastSponsorsDict) { //awaiting for a resposne from the backend //add loading notification to user - console.log(currentSponsorsDict); return

Loading...

; } if (currentSponsorsDict && pastSponsorsDict) { //maps out the dictionary and displays the content - console.log(currentSponsorsDict); return (
@@ -76,16 +74,89 @@ const OurSponsors = () => { textOnButton={"Become a Sponsor"} />
-
-

Current Sponsors

- {/* gets the outmost name of the Object {"Name of tier": {...}} */} + -
-

+ id="SponsorEnd"> Past Sponsors -

+ + {/* gets keys o objects in list */} + {Object.keys(pastSponsorsDict).map((pastSponsorKey) => { + return ( +
+ {/* gets name of sponsor then uses it to get data of past sponsor */} + {Object.keys(pastSponsorsDict[pastSponsorKey]).map( + (pastSponsorName) => { + let pastSponsors = + pastSponsorsDict[pastSponsorKey][pastSponsorName]; + return ( + +
+

{pastSponsorName}

+ {pastSponsorName +
+
+ ); + } + )} +
+ ); + })}
); From 98ee3152c94d84ea64fd398f52df294c95606439 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sun, 17 Mar 2024 12:16:12 -0600 Subject: [PATCH 4/8] changed if statements to ? : statements --- src/OurSponsors/OurSponsors.js | 214 +++++++++++++++++---------------- 1 file changed, 110 insertions(+), 104 deletions(-) diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js index dc42482..3c33305 100644 --- a/src/OurSponsors/OurSponsors.js +++ b/src/OurSponsors/OurSponsors.js @@ -4,6 +4,7 @@ import currentSponsorData from "../MockDB/sponsorship.yml"; import pastSponsorData from "../MockDB/pastSponsors.yml"; import yaml from "js-yaml"; import OpenPage from "../Header/OpenPage"; +import fakeDelay from "../TestingTools/fakeDelay"; /** * @param {null} null - requires onthing @@ -30,9 +31,10 @@ const OurSponsors = () => { */ const getCurrentSponsors = async () => { try { + await fakeDelay(5000); const res = await fetch(currentSponsorData); const rawText = await res.text(); - const yamlDict = yaml.load(rawText); + const yamlDict = await yaml.load(rawText); setCurrentSponsorsDict(yamlDict); } catch (error) { //error checking @@ -51,116 +53,120 @@ const OurSponsors = () => { try { const res = await fetch(pastSponsorData); const rawText = await res.text(); - const yamlDict = yaml.load(rawText); + const yamlDict = await yaml.load(rawText); setPastSponsorsDict(yamlDict); } catch (error) { // error checking console.error("Error recieving data from server:"); } }; - // needs to change into ? : statement and have content above it - if (!currentSponsorsDict && !pastSponsorsDict) { - //awaiting for a resposne from the backend - //add loading notification to user - return

Loading...

; - } - if (currentSponsorsDict && pastSponsorsDict) { - //maps out the dictionary and displays the content - return ( -
-
- -
- - + + return ( +
+
+
- ); - } + + +
+ ); }; export default OurSponsors; From 31a546f985017f4901af4c80249eea65df1327db Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sun, 17 Mar 2024 12:39:01 -0600 Subject: [PATCH 5/8] add OurSponsors: added QR code spot and space for content --- src/OurSponsors/OurSponsors.css | 25 ++++++++++++++++++--- src/OurSponsors/OurSponsors.js | 39 +++++++++++++++++++++------------ 2 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/OurSponsors/OurSponsors.css b/src/OurSponsors/OurSponsors.css index 05ea249..0dd17ec 100644 --- a/src/OurSponsors/OurSponsors.css +++ b/src/OurSponsors/OurSponsors.css @@ -7,6 +7,25 @@ padding-right: 2%; } +#BecomeASponsors { + background-color: white; +} + +#BecomeASponsors div { + display: flex; + flex-direction: row; +} + +#BecomeASponsors a { + color: inherit; + text-decoration: none; +} + +#BecomeASponsors div a img { + height: 18rem; + padding-right: 3rem; +} + #Sponsor { background-color: white; } @@ -38,16 +57,16 @@ flex-direction: row; } -.Sponsors a div h4 { +.Sponsors a h4 { width: 30%; } -.Sponsors a div img { +.Sponsors a img { max-height: 8rem; max-width: 70%; } -.Sponsors a div p { +.Sponsors a p { padding: 2rem; padding-top: 5px; padding-bottom: 5px; diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js index 3c33305..297aad1 100644 --- a/src/OurSponsors/OurSponsors.js +++ b/src/OurSponsors/OurSponsors.js @@ -3,15 +3,13 @@ import { useEffect, useState } from "react"; import currentSponsorData from "../MockDB/sponsorship.yml"; import pastSponsorData from "../MockDB/pastSponsors.yml"; import yaml from "js-yaml"; -import OpenPage from "../Header/OpenPage"; -import fakeDelay from "../TestingTools/fakeDelay"; /** * @param {null} null - requires onthing * @returns {JSX.Element} JSX - HTML tags and JS functionality * @description Our Sponsors Page * @author Brock - * @todo finish page layout + * @todo finsih layout and add content */ const OurSponsors = () => { const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors @@ -31,7 +29,6 @@ const OurSponsors = () => { */ const getCurrentSponsors = async () => { try { - await fakeDelay(5000); const res = await fetch(currentSponsorData); const rawText = await res.text(); const yamlDict = await yaml.load(rawText); @@ -63,11 +60,25 @@ const OurSponsors = () => { return (
+

Sponsor

- +

(How our team uses what's given by and benefits from sponsors)

+
+ + QR code to contanct us form +

Click on this to open the contact form

+
+

+ Talk about how you can reach out to sponsor us. (Maybe also include + a link to the form as well) +

+
+ )}
From 27fe57c40e1f2ba0ee2906682179264be107aab2 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sun, 17 Mar 2024 21:12:02 -0600 Subject: [PATCH 6/8] removed become a sponsor --- src/BecomeASponsor/BecomeASponsor.css | 3 -- src/BecomeASponsor/BecomeASponsor.js | 55 ---------------------- src/index.js | 66 +++++++++++++++------------ 3 files changed, 38 insertions(+), 86 deletions(-) delete mode 100644 src/BecomeASponsor/BecomeASponsor.css delete mode 100644 src/BecomeASponsor/BecomeASponsor.js diff --git a/src/BecomeASponsor/BecomeASponsor.css b/src/BecomeASponsor/BecomeASponsor.css deleted file mode 100644 index 1bb253a..0000000 --- a/src/BecomeASponsor/BecomeASponsor.css +++ /dev/null @@ -1,3 +0,0 @@ -#BecomeASponsor div { - background-color: green; -} diff --git a/src/BecomeASponsor/BecomeASponsor.js b/src/BecomeASponsor/BecomeASponsor.js deleted file mode 100644 index 38c70f0..0000000 --- a/src/BecomeASponsor/BecomeASponsor.js +++ /dev/null @@ -1,55 +0,0 @@ -import "./BecomeASponsor.css"; - -/** - * @param {null} null - requires onthing - * @returns {JSX.Element} JSX - HTML tags and JS functionality - * @description Our Sponsors Page - * @author Brock - * @todo Make and Finish the Page - */ -const BecomeASponsor = () => { - return ( -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed - justo eget orci sagittis sollicitudin eu eget augue. Phasellus lacus - turpis, interdum vitae nibh a, tristique ultricies erat. Integer et - sapien congue, facilisis massa id, molestie magna. Maecenas augue - nisi, ullamcorper sit amet suscipit non, sodales nec tortor. Aenean - imperdiet sit amet velit a lacinia. Vestibulum vel consequat mauris. - Proin suscipit lectus id erat malesuada fermentum. Quisque ac dui - malesuada, accumsan magna quis, convallis ex. Nulla feugiat fermentum - maximus. Pellentesque rutrum malesuada metus ut accumsan. Nullam - semper, eros in tempor mollis, lorem magna auctor turpis, a ornare - diam metus sit amet odio. Sed aliquam nulla eu dolor commodo - efficitur. -

- Student Driving the Green (2019 Car) -
-
- Sponsorship Package with Benefits -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus - laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc - blandit ut erat sed maximus. Orci varius natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus. Donec at laoreet nisi. - Ut tempor nunc tellus, quis mollis sapien ultricies ut. Fusce gravida - varius ligula, venenatis fringilla velit fringilla quis. Sed - condimentum sapien libero, vel pharetra purus ultricies nec. Etiam a - vulputate tellus. Quisque eget purus in orci accumsan tincidunt ac ut - nisl. Pellentesque tincidunt porta purus, quis congue nibh tempus - eget. Sed diam sapien, dictum ut mattis sit amet, faucibus at enim.{" "} -

-
-
- ); -}; - -export default BecomeASponsor; diff --git a/src/index.js b/src/index.js index dceadbb..8153a13 100644 --- a/src/index.js +++ b/src/index.js @@ -1,34 +1,44 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +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 OurSponsors from './OurSponsors/OurSponsors'; -import BecomeASponsor from './BecomeASponsor/BecomeASponsor'; -import JoinTheClub from './Club Membership & Upcoming Events/JoinTheClub/JoinTheClub'; -import UpcomingEvents from './Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents'; -import Gallery from './Gallery/Gallery'; -import './index.css'; +import Header from "./Header/Header"; +import AboutUs from "./AboutUs/AboutUs"; +import Teams from "./Teams/Teams"; +import OurSponsors from "./OurSponsors/OurSponsors"; +import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub"; +import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents"; +import Gallery from "./Gallery/Gallery"; +import "./index.css"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - - - - }> - }> - }> - }> - }> - }> - }> - }> - - - - + + + + }> + }> + }> + }> + }> + }> + }> + + + + ); // If you want to start measuring performance in your app, pass a function From 8f615d4f1bfdaefc245d2cb4836210588085dd78 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sun, 17 Mar 2024 21:17:53 -0600 Subject: [PATCH 7/8] added OurSponsors: added final template content to page --- src/OurSponsors/OurSponsors.css | 6 ++++++ src/OurSponsors/OurSponsors.js | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/src/OurSponsors/OurSponsors.css b/src/OurSponsors/OurSponsors.css index 0dd17ec..c9c80fe 100644 --- a/src/OurSponsors/OurSponsors.css +++ b/src/OurSponsors/OurSponsors.css @@ -23,9 +23,15 @@ #BecomeASponsors div a img { height: 18rem; + width: auto; padding-right: 3rem; } +#BecomeASponsors img { + height: auto; + width: 60%; +} + #Sponsor { background-color: white; } diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js index 297aad1..dc74e4d 100644 --- a/src/OurSponsors/OurSponsors.js +++ b/src/OurSponsors/OurSponsors.js @@ -79,6 +79,16 @@ const OurSponsors = () => { a link to the form as well)

+

+ (Talk about what we can offer our sponsors for helping us briefly or + in a listing format. We can also mention how they can find more on the + sponsorship package - plus provide some way they can access the + package from here) +

+ A photo of our sponsorship package