From 585138e7729ce601ff96b1487d37f0183ae3b83b Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sun, 17 Mar 2024 00:03:04 -0600 Subject: [PATCH] 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 +
+ + ); + } + )} +
+ ); + })}
);