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

feat(AboutEvents): added count down timers

Browse Source
This commit is contained in:
darkicewolf50
2025-07-05 11:17:47 -06:00
parent bef3b1ce95
commit 620afb0609
3 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/AboutUs/AboutUs.css
View File

@ -19,7 +19,8 @@
border-bottom: solid 3px white; border-bottom: solid 3px white;
} }
#AboutUs #AboutEvents { #AboutEvents {
flex-direction: column !important;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
padding: 2svh 2svw; padding: 2svh 2svw;

13
src/AboutUs/AboutUs.js
View File

@ -1,4 +1,5 @@
import UpdateBanner from "../Header/UpdateBanner"; import UpdateBanner from "../Header/UpdateBanner";
import CountDownTimer from "../CountDown/CountDownTimer";
import "./AboutUs.css"; import "./AboutUs.css";
/** /**
@ -19,6 +20,18 @@ const AboutsUs = () => {
<div id="AboutUs"> <div id="AboutUs">
<div id="AboutEvents"> <div id="AboutEvents">
<h2>Upcoming Events</h2> <h2>Upcoming Events</h2>
<h4>Baja SAE April</h4>
<CountDownTimer
dateFinished={new Date("April 29, 2026 00:00:00")}
messageDisplayBefore={""}
messageDisplayAfter={<p>Wish Us Luck!</p>}
/>
<h4>Baja SAE May</h4>
<CountDownTimer
dateFinished={new Date("May 22, 2026 00:00:00")}
messageDisplayBefore={""}
messageDisplayAfter={<p>Ready! Set! Go!</p>}
/>
</div> </div>
<div> <div>
<div> <div>

36
src/CountDown/CountDownTimer.css
View File

@ -1,15 +1,16 @@
#afterTime #counter { .countDownTimer #afterTime #counter {
color: black; color: white;
background-color: red; background-color: red;
} }
#counter.dangerDays { .countDownTimer #counter.dangerDays {
background-color: red; background-color: red;
color: white;
} }
#counter { .countDownTimer #counter {
display: flex; display: flex;
flex-direction: row; flex-flow: row nowrap !important;
padding: 0.5svh 1svw; padding: 0.5svh 1svw;
text-align: center; text-align: center;
background-color: whitesmoke; background-color: whitesmoke;
@ -17,18 +18,22 @@
border-radius: 1rem; border-radius: 1rem;
justify-content: space-evenly; justify-content: space-evenly;
font-size: x-large; font-size: x-large;
color: black;
column-gap: 10px;
} }
#counter div { .countDownTimer #counter div {
display: flex; display: flex;
flex-direction: row; flex-flow: row nowrap !important;
padding: 0px;
column-gap: 10px;
} }
#counter div p { .countDownTimer #counter div p {
padding-left: 1svw; padding: 0px;
} }
#counter .countdown-link { .countDownTimer #counter .countdown-link {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -36,22 +41,20 @@
font-weight: 700; font-weight: 700;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
padding: 0.5rem;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
border-radius: 1rem; border-radius: 1rem;
text-decoration: none; text-decoration: none;
color: #000; color: #000;
} }
#counter .countdown { .countDownTimer #counter .countdown {
line-height: 1.25svb; line-height: 1.25svb;
padding: 0.75rem 0.75rem;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#counter .countdownDanger { .countDownTimer #counter .countdownDanger {
color: #ff0000; color: #ff0000;
} }
@ -61,6 +64,7 @@
} }
.countDownTimer { .countDownTimer {
width: fit-content; width: 525px !important;
margin: 0.5svh 1svw; margin: 0px !important;
padding: 0px !important;
} }