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);
transition: scale 0.3s;
border-radius: 5px;
margin-left: 1rem;
margin-right: 3rem;
margin-left: 1svw;
margin-right: 3svw;
width: fit-content;
}
@ -52,7 +52,7 @@
}
#BecomeASponsors div a img {
height: 18rem;
height: 40svh;
width: auto;
}
@ -89,6 +89,7 @@
#Sponsor {
background-color: white;
padding-bottom: 3svh;
}
#SponsorEnd {
@ -115,8 +116,8 @@
flex-direction: row;
padding-top: 2svh;
padding-bottom: 2svh;
margin-top: 2svh;
margin-bottom: 4svh;
margin-top: 1svh;
margin-bottom: 3svh;
border-bottom: var(--sponsorBorder);
align-items: center;
}
@ -152,7 +153,6 @@
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);
transition: scale 0.3s;
margin: 1rem;
}
.Sponsors a:hover {
@ -163,6 +163,8 @@
.Sponsors a div {
display: flex;
flex-direction: row;
height: inherit;
width: inherit;
}
.Sponsors a div div {
@ -171,12 +173,47 @@
padding-left: 5svw;
}
.Sponsors a h4 {
.Sponsors a h3 {
display: flex;
width: fit-content;
border-bottom: var(--sponsorBorder);
}
.Sponsors a img {
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">
<table>
<caption>
<h2>Sponsor Packages</h2>
<h3>Sponsor Packages</h3>
</caption>
<thead>
<tr>
@ -255,52 +255,69 @@ const OurSponsors = () => {
<>
{/* gets the outmost name of the Object Name of tier*/}
{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
let changetoGridStyle =
sponsorsTier === "Diamond Tier" ||
sponsorsTier === "Platinum Tier";
let girdContainer = changetoGridStyle
? ""
: "sponsorGridContainer";
let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
return (
<div
key={sponsorsTier}
className="Sponsors">
<h3>{sponsorsTier}</h3>
{/* gets key form list of tier */}
{Object.keys(currentSponsorsDict[sponsorsTier]).map(
(sponsorsKey) => {
return (
<>
{/* 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
key={sponsorData}
href={sponsorData.Url}
target="_blank"
rel="noreferrer">
<div>
<img
src={sponsorData.LogoUrl}
alt={sponsorName + "'s Logo"}
/>
<div className={girdContainer}>
{/* gets key form list of tier */}
{Object.keys(currentSponsorsDict[sponsorsTier]).map(
(sponsorsKey) => {
return (
<div key={sponsorsKey}>
{/* 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
];
let sponsorBronzeSilver =
sponsorsTier !== "Silver Tier" &&
sponsorsTier !== "Bronze Tier";
return (
<a
key={sponsorData}
href={sponsorData.Url}
target="_blank"
className={gridItem}
rel="noreferrer">
<div>
<h4>{sponsorName}</h4>
{(sponsorsTier !== "Silver Tier" ||
sponsorsTier !== "Bronze Tier") && (
<p>
{sponsorData.DescriptionAboutSponsor}
</p>
<img
src={sponsorData.LogoUrl}
alt={sponsorName + "'s Logo"}
/>
{sponsorBronzeSilver === true ? (
<div>
<h3>{sponsorName}</h3>
<p>
{sponsorData.DescriptionAboutSponsor}
</p>
</div>
) : (
<div className="sponsorCenter">
<h3>{sponsorName}</h3>
</div>
)}
</div>
</div>
</a>
);
})}
</>
);
}
)}
</a>
);
})}
</div>
);
}
)}
</div>
</div>
);
})}
@ -308,44 +325,53 @@ const OurSponsors = () => {
)}
</div>
<div id="Sponsor">
<h1
className="SponsorsTitle"
id="SponsorEnd">
Past Sponsors
</h1>
<div id="sideBorder">
<div></div>
<h1
className="SponsorsTitle"
id="SponsorEnd">
Past Sponsors
</h1>
</div>
{/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */}
{pastSponsorsDict === undefined ? (
<p>Loading...</p>
) : (
<>
{/* 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 className="Sponsors sponsorGridContainer">
{/* 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 (
<a
href={pastSponsors.Url}
target="_blank"
className="sponsorGridItem"
rel="noreferrer">
<div>
<img
src={pastSponsors.LogoUrl}
alt={pastSponsorName + "'s Logo"}
/>
<div className="sponsorCenter">
<h3>{pastSponsorName}</h3>
</div>
</div>
</a>
);
}
)}
</>
);
})}
</div>
</>
)}
</div>