Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Scrollytelling layout in Next instance #1408

Merged
merged 1 commit into from
Jan 29, 2025

Conversation

AliceR
Copy link
Member

@AliceR AliceR commented Jan 28, 2025

Related Ticket: Fix #1402

Description of Changes

Provide a fallback value for top offset of ScrollyMapContainer: When topOffset is undefined it causes the css top property to be faulty, which makes the position: sticky not working.

Notes & Questions About Changes

Do we still need the whole useSlidingStickyHeaderProps logic with the USWDS header?

Validation / Testing

You will to validate in the next-veda instance, making sure the map stays sticky on the top when scrolling down.
Related PR on next-veda-ui: developmentseed/next-veda-ui#41

Copy link

netlify bot commented Jan 28, 2025

Deploy Preview for veda-ui ready!

Name Link
🔨 Latest commit
🔍 Latest deploy log https://app.netlify.com/sites/veda-ui/deploys/67990b343e2f100083006b68
😎 Deploy Preview https://deploy-preview-1408--veda-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@hanbyul-here
Copy link
Collaborator

I believe useSlidingStickyHeaderProps is not necessary for the new uswds header ( that hook was there becauase we showed/hid the header based on scroll direction, and we ditched that behavior for the new header). The deploy preview from the pr you linked - https://deploy-preview-41--veda-ui-next-test.netlify.app/stories/air-quality-and-covid-19 Scrollytelling block still doesn't work for me. Can you take a look?

@AliceR
Copy link
Member Author

AliceR commented Jan 28, 2025

Yeah, I noticed the deploy preview isn't updating the library correctly. I need to figure out how to make it use this branch. Still not an expert on our verdaccio setup — and hopefully, I won't have to become one! 😅

@sandrahoang686
Copy link
Collaborator

sandrahoang686 commented Jan 28, 2025

@AliceR if you are publishing the same version to verdaccio, the build needs to be kicked off again to re-install that version.

@dzole0311 dzole0311 self-requested a review January 29, 2025 09:26
Copy link
Collaborator

@dzole0311 dzole0311 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in NextJS and works as expected. Thanks for fixing @AliceR

@AliceR AliceR merged commit 168a990 into main Jan 29, 2025
11 checks passed
@AliceR AliceR deleted the fix#1402/scrollytelling-position-sticky branch January 29, 2025 10:04
@hanbyul-here
Copy link
Collaborator

👋 I see a bug that scrollytelling doesn't scroll away even when the scrollytelling section is done (from the next instance preview!)
https://deploy-preview-41--veda-ui-next-test.netlify.app/stories/air-quality-and-covid-19
Screenshot 2025-01-29 at 8 49 08 AM

@AliceR
Copy link
Member Author

AliceR commented Jan 29, 2025

Hej @hanbyul-here , thanks for reporting! Do you think the bug was introduced by this change? Or is that a separate issue?

@hanbyul-here
Copy link
Collaborator

This PR probably didn't introduce the bug, but if its intention was to handle #1402, I think it is the same issue. (Feel free to handle it in whichever way you prefer! I mainly wanted to flag what I found!)

@AliceR
Copy link
Member Author

AliceR commented Jan 30, 2025

I wasn't aware of this issue when working on #1402 . I created a new one and added your description here: #1418

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix Scrollytelling layout in Next instance
4 participants