-
Notifications
You must be signed in to change notification settings - Fork 179
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
chore(website): make caurosel horizontally scrollable (closes #562) #639
base: main
Are you sure you want to change the base?
Conversation
…t/carousel-animation Carousel animations
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
…actor/responsive-footer Responsive footer
…actor/responsive Responsive navbar
…t/learn-page Create Website Learn page
…re/pse-icon Add PSE icon to the button in the "Projects" page
…t/website-metadata Add website metadata
…/website-metadata Change website metadata
…/website-metadata-img Update website metadata image
…f/background-images NextJS background images
…actor/carousel Merge Carousel components
…s/v4-alpha V4-alpha documentation
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
…d-new-videos Added the new videos
…re/cookies Matomo script for cookies
@@ -71,6 +71,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps | |||
<HStack w="full" overflow="hidden"> | |||
<HStack | |||
w="full" | |||
overflowX="auto" // Enable horizontal scrolling |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like the arrows buttons don't work properly after scrolling. I'm testing it with my laptop. Could you try it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You are right -- I forgot to test the arrows buttons and they were not working.
I've added a new commit that should fix this :) (at least on my laptop in several browsers, both the arrows and the scrolling should be working now)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @intldds, they are working now. But when I scroll and then use the arrows the scrollbar changes its size and cannot be used to reach all the items anymore. Can you see it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @cedoor, the Right Arrow seems to be working fine with the desired behavior. However, the Left Arrow indeed is not working as supposed to. I would guess the problem is probably in the previousProject
const, which is somehow being overridden by the scrolling functionality.
I've tried making some changes but unfortunately couldn't make it work. It's a bit weird because the Right Arrow recognizes the index of the project and works fine, but when clicking on the Left Arrow it always assumes the index is 0 and takes me back to the last project.
Both previousProject
and nextProject
are built in similar way, so I can't figure out why the scrollbar only causes this error on the left side.
Hey @intldds! Thank you so much for all the work. What about using We could have control every time the element is scrolled. Then we can set the value in a way that if it was scrolled and someone click on one of the arrows, the list will start from the beginning. Then, if someone wants to scroll, they can do it and if they want to click on the arrows they can do it too. What do you think? |
chore(website): make caurosel horizontally scrollable (closes #562)
🚨 Report Summary
For more details view the full report in OpenZeppelin Code Inspector |
Hi @vplasencia! Sorry for taking so long with this, I had a surgery mid-March and took me a while to recover (feeling good now :)) I've followed your suggestion of adding the If you click on the left arrow, the list should start from the beginning. It feels intuitive, clean and easy to use -- let me know what you think and sorry once again for not replying sooner! |
chore(website): make caurosel horizontally scrollable (closes #562)
Added horizontal scrolling on the "Carousel.tsx" fileDescription
Added horizontal scrolling on the "Carousel.tsx" file Feature (website) Carousel isn't scrolling horizontally (issue #562) Carousel should be scrolling horizontally now NoRelated Issue(s)
#562Other information
I've basically just added one line in the
Project Card
box:overflowX="auto"
and it should work smoothly : )
Checklist
yarn prettier
andyarn lint
without getting any errors