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

Add marquee to website carousel component #322

Open
wants to merge 3 commits into
base: temp
Choose a base branch
from

Conversation

vipulgupta2048
Copy link
Member

@vipulgupta2048 vipulgupta2048 commented Jun 3, 2024

Added react-marquee component to the Carousel

What has been done:

  • Add marquee to Alumni Section
  • Fix Volunteer Section CSS

How it looks:

ScreenRecording2024-06-04at3 42 23AM-ezgif com-optimize

What's fixed: #319

Copy link

vercel bot commented Jun 3, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
website ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 3, 2024 10:23pm

@Vyogami
Copy link
Member

Vyogami commented Jun 3, 2024

@Vyogami Vyogami requested a review from rohan09-raj June 6, 2024 04:59
@Vyogami
Copy link
Member

Vyogami commented Jun 6, 2024

@rohan09-raj can you please review these changes?

Copy link
Contributor

@rohan09-raj rohan09-raj left a comment

Choose a reason for hiding this comment

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

Looks good to me, one question that does it handle scroll on user interaction to carousel ??

@Maniktherana
Copy link
Collaborator

i dont think marquees let you scroll
it does it automatically

@Maniktherana Maniktherana reopened this Jun 6, 2024
@Maniktherana
Copy link
Collaborator

mb i fat fingered the close button

@vipulgupta2048
Copy link
Member Author

I think when I tried it - it was scrolling?

@Maniktherana
Copy link
Collaborator

I think when I tried it - it was scrolling?

I mean you don't manually have to scroll it
It does it automatically

@rohan09-raj
Copy link
Contributor

I think when I tried it - it was scrolling?

I mean you don't manually have to scroll it
It does it automatically

Shouldn't we allow the manual scrolling as well ?

@vipulgupta2048
Copy link
Member Author

The React component has multiple issues open on users requesting draggable marquee or scrolling horizontal support: https://github.com/justin-chu/react-fast-marquee/issues?q=is%3Aissue+is%3Aopen+scroll
No feature to enable that yet

@Maniktherana
Copy link
Collaborator

It would be better to have carousels that autoscroll

@vipulgupta2048
Copy link
Member Author

IMO, the improvement was to add an auto-scroll marquee component, which this PR added successfully.
Wouldn't this conversation be better for another issue to now make it scrollable too and at least get this functional change merged?

@Maniktherana
Copy link
Collaborator

should have this fixed before merge

Screenshot 2024-06-07 at 6 49 00 PM

@Maniktherana
Copy link
Collaborator

Maniktherana commented Jun 7, 2024

suggestions:

  • In EventItem.module.css > .event class, add the line: min-width: 27.6rem;
  • Whereever we have a <Carousel> component, update props such that:
-+props={data.map((item) => {
+props={data.map((item, idx) => {
          return (
            <VolunteerItem
-             key={item.id}
+             key={idx}

there's a key error in one of them (maybe repeated id field in data sources)

@Maniktherana
Copy link
Collaborator

oh wait now that I'm seeing the original issue:

Add auto-scroll(marquee) on Volunteers and Alumni section to give fair visibility on every individual.

@Vyogami should the events section be a marquee or should it just remain a carousel?

@Vyogami
Copy link
Member

Vyogami commented Jun 7, 2024

oh wait now that I'm seeing the original issue:

Add auto-scroll(marquee) on Volunteers and Alumni section to give fair visibility on every individual.

@Vyogami should the events section be a marquee or should it just remain a carousel?

I suppose a carousel would make more sense!

@Vyogami
Copy link
Member

Vyogami commented Jun 7, 2024

In addition to #323, the speed of marquee can be adjusted as atm the animation looks jittery it can be ease out to look more natural.

@vipulgupta2048
Copy link
Member Author

vipulgupta2048 commented Jun 7, 2024

Feel free to modify or tweak the changes if you want to, I might have some time next week to resolve these things. Changing the speed and removing events carasoul would be straightforward changes.

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.

[Feature] add auto-scroll(marquee) on Volunteers and Alumni section
4 participants