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(Countdown): final css may be required but finished

Browse Source
This commit is contained in:
darkicewolf50
2025-06-28 12:01:17 -06:00
parent 92d6fd7ca9
commit dd60effc91
3 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Club Membership & Upcoming Events/JoinTheClub/messageToDisplayAfter.css
View File

@ -3,6 +3,6 @@
} }
#message a { #message a {
/* text-align: center; */ text-decoration: none;
width: auto; color: inherit;
} }

26
src/CountDown/CountDownTimer.css
View File

@ -1,5 +1,5 @@
#afterTime { #afterTime #counter {
color: darkred; color: black;
background-color: red; background-color: red;
} }
@ -10,14 +10,12 @@
#counter { #counter {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-left: 1svw; padding: 0.5svh 1svw;
padding-right: 1svw;
padding-top: 1svw;
text-align: center; text-align: center;
background-color: whitesmoke; background-color: whitesmoke;
border: 2px solid black; border: 2px solid black;
border-radius: 5px; border-radius: 1rem;
justify-content: space-between; justify-content: space-evenly;
font-size: x-large; font-size: x-large;
} }
@ -40,14 +38,14 @@
line-height: 1.75rem; line-height: 1.75rem;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
border-radius: 0.25rem; border-radius: 1rem;
text-decoration: none; text-decoration: none;
color: #000; color: #000;
} }
#counter .countdown { #counter .countdown {
line-height: 1.25svb; line-height: 1.25svb;
padding: 0 0.75rem 0 0.75rem; padding: 0.75rem 0.75rem;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -56,3 +54,13 @@
#counter .countdownDanger { #counter .countdownDanger {
color: #ff0000; color: #ff0000;
} }
.countDownTimer a {
color: inherit;
text-decoration: none;
}
.countDownTimer {
width: fit-content;
margin: 0.5svh 1svw;
}

19
src/CountDown/CountDownTimer.js
View File

@ -3,17 +3,23 @@ import "./CountDownTimer.css";
/** /**
* @param {Date} dateFinished - Date object with time that it finishes Date(year, monthNumber, day, hour, minute, second) * @param {Date} dateFinished - Date object with time that it finishes Date(year, monthNumber, day, hour, minute, second)
* @param {React.JSX.Element} messageDisplayAfter - Message to display afterwards, * @param {React.JSX.Element} messageDisplayAfter - Message to display afterwards
* @param {React.JSX.Element} messageDisplayBefore - The Message to display while it is counting down
* @returns {React.JSX.Element} page - returns the page content * @returns {React.JSX.Element} page - returns the page content
* @description A fun countdown timer of how many days, minutesz and seconds until x happens * @description A fun countdown timer of how many days, minutesz and seconds until x happens
* @author Brock <darkicewolf50@gmail.com> * @author Brock <darkicewolf50@gmail.com>
* @todo change messageDisplayAfter to take in another page
*/ */
const CountDownTimer = ({ dateFinished, messageDisplayAfter }) => { const CountDownTimer = ({
dateFinished,
messageDisplayAfter,
messageDisplayBefore,
}) => {
const [days, hours, minutes, seconds] = useCountdown(dateFinished); const [days, hours, minutes, seconds] = useCountdown(dateFinished);
if (days + hours + minutes + seconds <= 0) { if (days + hours + minutes + seconds <= 0) {
return ( return (
<div id="afterTime"> <div
id="afterTime"
className="countDownTimer">
<ShowCounter <ShowCounter
days={days} days={days}
hours={hours} hours={hours}
@ -25,13 +31,16 @@ const CountDownTimer = ({ dateFinished, messageDisplayAfter }) => {
); );
} else { } else {
return ( return (
<div> <div
id="countDownTimer"
className="countDownTimer">
<ShowCounter <ShowCounter
days={days} days={days}
hours={hours} hours={hours}
minutes={minutes} minutes={minutes}
seconds={seconds} seconds={seconds}
/> />
{messageDisplayBefore}
</div> </div>
); );
} }