mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-15 13:24:17 -06:00
fix(OurSponsors) refactored code to make css more understandable
This commit is contained in:
parent
cc91df581a
commit
585138e772
36
src/MockDB/pastSponsors.yml
Normal file
36
src/MockDB/pastSponsors.yml
Normal file
@ -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:
|
||||
@ -37,5 +37,5 @@ Bronze Tier:
|
||||
DescriptionAboutSponsor:
|
||||
- Canada Action:
|
||||
LogoUrl:
|
||||
Url: I dont know
|
||||
Url:
|
||||
DescriptionAboutSponsor:
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -58,16 +58,14 @@ const OurSponsors = () => {
|
||||
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 <p>Loading...</p>;
|
||||
}
|
||||
if (currentSponsorsDict && pastSponsorsDict) {
|
||||
//maps out the dictionary and displays the content
|
||||
console.log(currentSponsorsDict);
|
||||
return (
|
||||
<div id="OurSponsors">
|
||||
<div id="BecomeASponsors">
|
||||
@ -76,16 +74,89 @@ const OurSponsors = () => {
|
||||
textOnButton={"Become a Sponsor"}
|
||||
/>
|
||||
</div>
|
||||
<div id="Sponsor">
|
||||
<h2 className="SponsorsTitle">Current Sponsors</h2>
|
||||
{/* gets the outmost name of the Object Name of tier*/}
|
||||
{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
|
||||
return (
|
||||
<div className="Sponsors">
|
||||
<h3>{sponsorsTier}</h3>
|
||||
{/* gets key form list of tier */}
|
||||
{Object.keys(currentSponsorsDict[sponsorsTier]).map(
|
||||
(sponsorsKey) => {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="SponsorsTitle">Current Sponsors</h3>
|
||||
{/* gets the outmost name of the Object {"Name of tier": {...}} */}
|
||||
{/* gets name out of object and gets data of that sponsor preped */}
|
||||
{Object.keys(
|
||||
currentSponsorsDict[sponsorsTier][sponsorsKey]
|
||||
).map((sponsorName) => {
|
||||
let sponsorData =
|
||||
currentSponsorsDict[sponsorsTier][sponsorsKey][
|
||||
sponsorName
|
||||
];
|
||||
return (
|
||||
<a
|
||||
href={sponsorData.Url}
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<div>
|
||||
<h4>{sponsorName}</h4>
|
||||
<img
|
||||
src={sponsorData.LogoUrl}
|
||||
alt={sponsorName + "'s Logo"}
|
||||
/>
|
||||
</div>
|
||||
{(sponsorsTier !== "Silver Tier" ||
|
||||
sponsorsTier !== "Bronze Tier") && (
|
||||
<div>
|
||||
<h3
|
||||
<p>{sponsorData.DescriptionAboutSponsor}</p>
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div id="Sponsor">
|
||||
<h2
|
||||
className="SponsorsTitle"
|
||||
id="SponsorFlexEnd">
|
||||
id="SponsorEnd">
|
||||
Past Sponsors
|
||||
</h3>
|
||||
</h2>
|
||||
{/* gets keys o objects in list */}
|
||||
{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
|
||||
return (
|
||||
<div className="Sponsors">
|
||||
{/* 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 (
|
||||
<a
|
||||
href={pastSponsors.Url}
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<div>
|
||||
<h4>{pastSponsorName}</h4>
|
||||
<img
|
||||
src={pastSponsors.LogoUrl}
|
||||
alt={pastSponsorName + "'s Logo"}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user