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

added sponsor: finshed a majority of the css

Browse Source
This commit is contained in:
darkicewolf50 2024-03-30 15:09:52 -06:00
parent 236108e895
commit 159ed24c31
2 changed files with 143 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/OurSponsors/OurSponsors.css
View File

@ -41,8 +41,8 @@
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: scale 0.3s; transition: scale 0.3s;
border-radius: 5px; border-radius: 5px;
margin-left: 1rem; margin-left: 1svw;
margin-right: 3rem; margin-right: 3svw;
width: fit-content; width: fit-content;
} }
@ -52,7 +52,7 @@
} }
#BecomeASponsors div a img { #BecomeASponsors div a img {
height: 18rem; height: 40svh;
width: auto; width: auto;
} }
@ -89,6 +89,7 @@
#Sponsor { #Sponsor {
background-color: white; background-color: white;
padding-bottom: 3svh;
} }
#SponsorEnd { #SponsorEnd {
@ -115,8 +116,8 @@
flex-direction: row; flex-direction: row;
padding-top: 2svh; padding-top: 2svh;
padding-bottom: 2svh; padding-bottom: 2svh;
margin-top: 2svh; margin-top: 1svh;
margin-bottom: 4svh; margin-bottom: 3svh;
border-bottom: var(--sponsorBorder); border-bottom: var(--sponsorBorder);
align-items: center; align-items: center;
} }
@ -152,7 +153,6 @@
background-color: whitesmoke; background-color: whitesmoke;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: scale 0.3s; transition: scale 0.3s;
margin: 1rem;
} }
.Sponsors a:hover { .Sponsors a:hover {
@ -163,6 +163,8 @@
.Sponsors a div { .Sponsors a div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: inherit;
width: inherit;
} }
.Sponsors a div div { .Sponsors a div div {
@ -171,12 +173,47 @@
padding-left: 5svw; padding-left: 5svw;
} }
.Sponsors a h4 { .Sponsors a h3 {
display: flex;
width: fit-content; width: fit-content;
border-bottom: var(--sponsorBorder); border-bottom: var(--sponsorBorder);
} }
.Sponsors a img { .Sponsors a img {
max-height: 24svh; max-height: 24svh;
width: 25svw; width: 24svw;
padding-top: 1svh;
padding-bottom: 1svh;
}
.sponsorCenter {
display: flex;
justify-content: center;
}
.sponsorGridContainer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 20px;
}
.sponsorGridItem {
background-color: aqua;
width: calc(100%- 20px);
height: 100%;
}
.sponsorGridContainer .sponsorGridItem div div {
flex: 1;
padding-left: 1svw;
}
.sponsorGridItem h3 {
text-align: center;
justify-content: center;
align-items: center;
}
.sponsorGridItem {
grid-column: span 1;
} }

170
src/OurSponsors/OurSponsors.js
View File

@ -145,7 +145,7 @@ const OurSponsors = () => {
rel="noreferrer"> rel="noreferrer">
<table> <table>
<caption> <caption>
<h2>Sponsor Packages</h2> <h3>Sponsor Packages</h3>
</caption> </caption>
<thead> <thead>
<tr> <tr>
@ -255,52 +255,69 @@ const OurSponsors = () => {
<> <>
{/* gets the outmost name of the Object Name of tier*/} {/* gets the outmost name of the Object Name of tier*/}
{Object.keys(currentSponsorsDict).map((sponsorsTier) => { {Object.keys(currentSponsorsDict).map((sponsorsTier) => {
let changetoGridStyle =
sponsorsTier === "Diamond Tier" ||
sponsorsTier === "Platinum Tier";
let girdContainer = changetoGridStyle
? ""
: "sponsorGridContainer";
let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
return ( return (
<div <div
key={sponsorsTier} key={sponsorsTier}
className="Sponsors"> className="Sponsors">
<h3>{sponsorsTier}</h3> <h3>{sponsorsTier}</h3>
{/* gets key form list of tier */} <div className={girdContainer}>
{Object.keys(currentSponsorsDict[sponsorsTier]).map( {/* gets key form list of tier */}
(sponsorsKey) => { {Object.keys(currentSponsorsDict[sponsorsTier]).map(
return ( (sponsorsKey) => {
<> return (
{/* gets name out of object and gets data of that sponsor preped */} <div key={sponsorsKey}>
{Object.keys( {/* gets name out of object and gets data of that sponsor preped */}
currentSponsorsDict[sponsorsTier][sponsorsKey] {Object.keys(
).map((sponsorName) => { currentSponsorsDict[sponsorsTier][sponsorsKey]
let sponsorData = ).map((sponsorName) => {
currentSponsorsDict[sponsorsTier][sponsorsKey][ let sponsorData =
sponsorName currentSponsorsDict[sponsorsTier][sponsorsKey][
]; sponsorName
return ( ];
<a let sponsorBronzeSilver =
key={sponsorData} sponsorsTier !== "Silver Tier" &&
href={sponsorData.Url} sponsorsTier !== "Bronze Tier";
target="_blank" return (
rel="noreferrer"> <a
<div> key={sponsorData}
<img href={sponsorData.Url}
src={sponsorData.LogoUrl} target="_blank"
alt={sponsorName + "'s Logo"} className={gridItem}
/> rel="noreferrer">
<div> <div>
<h4>{sponsorName}</h4> <img
{(sponsorsTier !== "Silver Tier" || src={sponsorData.LogoUrl}
sponsorsTier !== "Bronze Tier") && ( alt={sponsorName + "'s Logo"}
<p> />
{sponsorData.DescriptionAboutSponsor} {sponsorBronzeSilver === true ? (
</p> <div>
<h3>{sponsorName}</h3>
<p>
{sponsorData.DescriptionAboutSponsor}
</p>
</div>
) : (
<div className="sponsorCenter">
<h3>{sponsorName}</h3>
</div>
)} )}
</div> </div>
</div> </a>
</a> );
); })}
})} </div>
</> );
); }
} )}
)} </div>
</div> </div>
); );
})} })}
@ -308,44 +325,53 @@ const OurSponsors = () => {
)} )}
</div> </div>
<div id="Sponsor"> <div id="Sponsor">
<h1 <div id="sideBorder">
className="SponsorsTitle" <div></div>
id="SponsorEnd"> <h1
Past Sponsors className="SponsorsTitle"
</h1> id="SponsorEnd">
Past Sponsors
</h1>
</div>
{/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */} {/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */}
{pastSponsorsDict === undefined ? ( {pastSponsorsDict === undefined ? (
<p>Loading...</p> <p>Loading...</p>
) : ( ) : (
<> <>
{/* gets keys o objects in list */} <div className="Sponsors sponsorGridContainer">
{Object.keys(pastSponsorsDict).map((pastSponsorKey) => { {/* gets keys o objects in list */}
return ( {Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
<div className="Sponsors"> return (
{/* gets name of sponsor then uses it to get data of past sponsor */} <>
{Object.keys(pastSponsorsDict[pastSponsorKey]).map( {/* gets name of sponsor then uses it to get data of past sponsor */}
(pastSponsorName) => { {Object.keys(pastSponsorsDict[pastSponsorKey]).map(
let pastSponsors = (pastSponsorName) => {
pastSponsorsDict[pastSponsorKey][pastSponsorName]; let pastSponsors =
return ( pastSponsorsDict[pastSponsorKey][pastSponsorName];
<a return (
href={pastSponsors.Url} <a
target="_blank" href={pastSponsors.Url}
rel="noreferrer"> target="_blank"
<div> className="sponsorGridItem"
<h4>{pastSponsorName}</h4> rel="noreferrer">
<img <div>
src={pastSponsors.LogoUrl} <img
alt={pastSponsorName + "'s Logo"} src={pastSponsors.LogoUrl}
/> alt={pastSponsorName + "'s Logo"}
</div> />
</a> <div className="sponsorCenter">
); <h3>{pastSponsorName}</h3>
} </div>
)} </div>
</div> </a>
); );
})} }
)}
</>
);
})}
</div>
</> </>
)} )}
</div> </div>