Setup animated countdown on schedule page #93

samderanova · 2023-10-25T04:28:01Z

This PR sets up an animated countdown with Framer. The time it counts down to has been hardcoded to the start of the hackathon.

github-actions · 2023-10-25T04:29:42Z

Deploy preview for zothacks-site-2023 ready!

Name	Hack at UCI Site
Preview	Visit Preview
Commit	`426061e`

github-actions · 2023-10-25T04:30:06Z

Deploy preview for zothacks-site-2023-sanity ready!

Name	Sanity Studio
Preview	Visit Preview
Commit	`426061e`

tyleryy

Looks great! I think we just need the borders and boxes around each of the digits and the timer. Maybe in another PR, up to you. Sidenote, do we want the 0's to show initially?

tyleryy · 2023-10-25T07:19:03Z

Slight bug from the hover dev component we were using. I believe this occurs when you switch between tabs.

still issues

tyleryy · 2023-10-25T07:34:34Z

This is occurring also on the component in hover.dev, so I sent an email to the dev team to ask them to fix it. If they don't respond we can just fix it ourselves.

samderanova · 2023-10-25T22:52:11Z

I sort of fixed it? I changed the animation exit y value to -50% and the problem no longer occurs. Please let me know if does for you though!

Edit: it doesn't work. Still debugging...

Maybe this is a problem with AnimationPresence? Worst case scenario, we can rely on the countdown component we've used in previous years.

samderanova · 2023-10-25T22:55:30Z

@alexanderl19 do you have an idea as to why this is happening?

tyleryy · 2023-10-26T06:39:04Z

The developer responded and said he is working on it.

samderanova · 2023-10-26T06:45:47Z

The developer responded and said he is working on it.

Did he provide an ETA?

tyleryy · 2023-10-26T20:30:38Z

no 😢 . I'll check in with him again and ask for an ETA.

tyleryy · 2023-10-29T18:58:07Z

Update: he said by end of this weekend. If he isn't done, by today, we'll prob have to do it. Might be something with setInterval?

samderanova · 2023-10-29T20:26:11Z

For now, we can just disable the slide up animation. We should focus on finishing the resources and clipboard content first.

taesungh

Looking alright so far, some notes on heading semantics, initial countdown value, and date formatting.

apps/site/src/views/Schedule/components/Countdown/Countdown.tsx

apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx

apps/site/src/views/Schedule/components/Countdown/Countdown.tsx

tyleryy · 2023-10-31T02:44:54Z

Just add the description and I'll approve/merge it. We need this page up ASAP. People are already asking for the schedule. Probably because they want to plan in advance. @alexanderl19 says he will do the sanity queries for the schedule by EOD, once this is merged.

tyleryy

On initial render, 3 numbers flash and then 4 because it is initially 0 time difference between the Zothacks dates. I personally think this is a blocker still.

tyleryy · 2023-11-02T02:26:43Z

nvm there is a hydration error.

tyleryy · 2023-11-02T02:35:04Z

maybe we should pull the deadline time from sanity? so we can switch between when hacking begins and ends for the countdown.

samderanova

One small change and we should be good to go.

apps/site/src/views/Schedule/components/Loader/Loader.tsx

tyleryy

lgtm

Outdated

* update: created getSchedule file * update: synced sanity data with schedule component * feat: update event schema * feat: group events by day * feat: format date ranges * fix: group events by America/Los_Angeles day * fix: event order asc * fix: remove resources from nav --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> Fix frontend issues on resources page (#103) * fix: backend description text overflow * feat: new ResourceCard component removed unused assets * fix: key prop error * fix: remove unused components * fix: references to unused images * refactor: short-circuit and color fixes * Fix transformed filter glitches for webkit - Include `translateZ(0)` when applying transform to drop shadow filter --------- Co-authored-by: Taesung Hwang <taesungh@uci.edu> fix: title and location mobile alignment (#109) feat: frontend resources section feat: starter packs section removed placeholder config files feat: add day of week to schedule (#110) * feat: add day of week to schedule * fix: replace weekday list with date format * fix: long month and date format update: restore resources link in navbar fix: timezone inconsistencies (#119) * fix: timezone inconsistencies * fix: timezone inconsistencies fix: backend resources grid issue feature: clipboard paper animation (#116) undefined Feature/clipboard animation update (#123) * feature: clipboard paper animation * fix: padding adjustment on date * fix: border radius and page animation update feat: incident response form fix: remove open in new window icon Setup animated countdown on schedule page (#93) * setup: basic framer countdown * fix: removed useRef, changed animation exit value * update: temporarily disabled slide up animation * fix: conditional day render * fix: precompute time * fix: margin for the countdown * update: added loading bar * fix: rename to Loader * feat: time until hacking countdown timer * fix: clipboard styling --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> Co-authored-by: Alexander Liu <a@alexanderliu.com> fix: match time zones on server and client fix: missing date-fns-tz import (#126) fix: disable page scroll x (#125) refactor: move homepage from views folder to app folder refactor: convert components to arrow functions and reexport feat: devpost fix: changed import path fix: added ease and moved component

* feat: svg animation rough draft * update: increase stroke width * update: new svg * update: added timing to opacity * update: switched to animate to create stagger * fix: adjusted timings * fix: timing * fix: more timing adjustments * fix: type issues with initial variant * fix: responsive svg * fix: removed old title svg * fix: added useEffect dep * fix: remove unused imports * fix: adjusted clamp * update: refactored animated title fix: visually hidden title update: refactored animated title Use lined paper vector and remove unnecessary nav (#62) * fix: use lined paper vector and remove unnecessary nav * fix: stick nav bar to top of screen * fix: remove sticky navbar for mobile --------- Co-authored-by: Sam Der <sder@uci.edu> fix: change resources PNGs to SVGs hotfix: heart and star sticker positioning Add ZotHacks Open Graph Properties (#71) * feat: add OG image * fix: use opengraph-image for OG generation Create Sanity resources schema (#91) * feat: resource schema * feat: icon, preview, and color field description update: TikTok logo and improved alt text (#83) * update: TikTok logo and improved alt text * fix: switch to svg version fix: use container spacing for resource page (#79) * fix: use container spacing for resource page * temp: fix row/col setup * remove col div update: remove apply links and mentor section (#89) * update: remove apply links and mentor section * fix: restore apply button, adjust wording * fix: disabled mentor apply button * update: zothacks 2023 * fix: removed extra import * fix: added variant type * fix: changed import path * fix: added ease and moved component * Feature: SVG ZotHacks Title animation * update: created getSchedule file * update: synced sanity data with schedule component * feat: update event schema * feat: group events by day * feat: format date ranges * fix: group events by America/Los_Angeles day * fix: event order asc * fix: remove resources from nav --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> Fix frontend issues on resources page (#103) * fix: backend description text overflow * feat: new ResourceCard component removed unused assets * fix: key prop error * fix: remove unused components * fix: references to unused images * refactor: short-circuit and color fixes * Fix transformed filter glitches for webkit - Include `translateZ(0)` when applying transform to drop shadow filter --------- Co-authored-by: Taesung Hwang <taesungh@uci.edu> fix: title and location mobile alignment (#109) feat: frontend resources section feat: starter packs section removed placeholder config files feat: add day of week to schedule (#110) * feat: add day of week to schedule * fix: replace weekday list with date format * fix: long month and date format update: restore resources link in navbar fix: timezone inconsistencies (#119) * fix: timezone inconsistencies * fix: timezone inconsistencies fix: backend resources grid issue feature: clipboard paper animation (#116) undefined Feature/clipboard animation update (#123) * feature: clipboard paper animation * fix: padding adjustment on date * fix: border radius and page animation update feat: incident response form fix: remove open in new window icon Setup animated countdown on schedule page (#93) * setup: basic framer countdown * fix: removed useRef, changed animation exit value * update: temporarily disabled slide up animation * fix: conditional day render * fix: precompute time * fix: margin for the countdown * update: added loading bar * fix: rename to Loader * feat: time until hacking countdown timer * fix: clipboard styling --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> Co-authored-by: Alexander Liu <a@alexanderliu.com> fix: match time zones on server and client fix: missing date-fns-tz import (#126) fix: disable page scroll x (#125) refactor: move homepage from views folder to app folder refactor: convert components to arrow functions and reexport feat: devpost fix: changed import path fix: added ease and moved component * fix: unused asset --------- Co-authored-by: Alexander Liu <a@alexanderliu.com>

samderanova requested a review from a team October 25, 2023 04:28

samderanova linked an issue Oct 25, 2023 that may be closed by this pull request

Set up animated countdown on schedule page #84

Closed

tyleryy previously approved these changes Oct 25, 2023

View reviewed changes

samderanova requested a review from tyleryy October 29, 2023 20:27

taesungh previously requested changes Oct 30, 2023

View reviewed changes

tyleryy suggested changes Oct 31, 2023

View reviewed changes

apps/site/src/views/Schedule/components/Countdown/Countdown.tsx Outdated Show resolved Hide resolved

apps/site/src/views/Schedule/components/Countdown/Countdown.tsx Outdated Show resolved Hide resolved

samderanova requested review from tyleryy and taesungh October 31, 2023 03:05

tyleryy suggested changes Oct 31, 2023

View reviewed changes

tyleryy self-requested a review November 2, 2023 02:14

tyleryy previously approved these changes Nov 2, 2023

View reviewed changes

tyleryy dismissed their stale review via 7909b2d November 2, 2023 02:37

samderanova commented Nov 2, 2023

View reviewed changes

apps/site/src/views/Schedule/components/Loader/Loader.tsx Outdated Show resolved Hide resolved

tyleryy self-requested a review November 2, 2023 22:01

tyleryy previously approved these changes Nov 2, 2023

View reviewed changes

alexanderl19 dismissed tyleryy’s stale review via 8e4242a November 3, 2023 06:14

alexanderl19 force-pushed the setup/animated-countdown branch 2 times, most recently from be315a9 to 7586998 Compare November 3, 2023 07:46

alexanderl19 marked this pull request as draft November 3, 2023 07:52

alexanderl19 marked this pull request as ready for review November 3, 2023 08:14

samderanova and others added 9 commits November 3, 2023 01:16

setup: basic framer countdown

e893b32

fix: removed useRef, changed animation exit value

fe366f2

update: temporarily disabled slide up animation

f2963b4

fix: conditional day render

e7795d3

fix: precompute time

d5c59fa

fix: margin for the countdown

911c087

update: added loading bar

6a2386a

fix: rename to Loader

440048e

feat: time until hacking countdown timer

8498b29

alexanderl19 force-pushed the setup/animated-countdown branch from 7586998 to 8498b29 Compare November 3, 2023 08:16

fix: clipboard styling

426061e

tyleryy approved these changes Nov 3, 2023

View reviewed changes

alexanderl19 merged commit 56117a2 into main Nov 3, 2023
2 checks passed

alexanderl19 deleted the setup/animated-countdown branch November 3, 2023 08:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setup animated countdown on schedule page #93

Setup animated countdown on schedule page #93

samderanova commented Oct 25, 2023

github-actions bot commented Oct 25, 2023 •

edited

Loading

github-actions bot commented Oct 25, 2023 •

edited

Loading

tyleryy left a comment

tyleryy commented Oct 25, 2023

tyleryy commented Oct 25, 2023

samderanova commented Oct 25, 2023 •

edited

Loading

samderanova commented Oct 25, 2023

tyleryy commented Oct 26, 2023

samderanova commented Oct 26, 2023

tyleryy commented Oct 26, 2023

tyleryy commented Oct 29, 2023

samderanova commented Oct 29, 2023 •

edited

Loading

taesungh left a comment

tyleryy commented Oct 31, 2023 •

edited

Loading

tyleryy left a comment

tyleryy commented Nov 2, 2023

tyleryy commented Nov 2, 2023

samderanova left a comment

tyleryy left a comment

Setup animated countdown on schedule page #93

Setup animated countdown on schedule page #93

Conversation

samderanova commented Oct 25, 2023

github-actions bot commented Oct 25, 2023 • edited Loading

github-actions bot commented Oct 25, 2023 • edited Loading

tyleryy left a comment

Choose a reason for hiding this comment

tyleryy commented Oct 25, 2023

tyleryy commented Oct 25, 2023

samderanova commented Oct 25, 2023 • edited Loading

samderanova commented Oct 25, 2023

tyleryy commented Oct 26, 2023

samderanova commented Oct 26, 2023

tyleryy commented Oct 26, 2023

tyleryy commented Oct 29, 2023

samderanova commented Oct 29, 2023 • edited Loading

taesungh left a comment

Choose a reason for hiding this comment

tyleryy commented Oct 31, 2023 • edited Loading

tyleryy left a comment

Choose a reason for hiding this comment

tyleryy commented Nov 2, 2023

tyleryy commented Nov 2, 2023

samderanova left a comment

Choose a reason for hiding this comment

tyleryy left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 25, 2023 •

edited

Loading

github-actions bot commented Oct 25, 2023 •

edited

Loading

samderanova commented Oct 25, 2023 •

edited

Loading

samderanova commented Oct 29, 2023 •

edited

Loading

tyleryy commented Oct 31, 2023 •

edited

Loading