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

Implement scrolling text #221

Closed
wants to merge 2 commits into from
Closed

Implement scrolling text #221

wants to merge 2 commits into from

Conversation

raymosun
Copy link
Contributor

Info

Implement scrolling text for event info that overflows the card

Changes

  • Implements the ScrollingText component that makes child text scroll on hover if it would overflow
  • EventCard uses new scrolling text for each line

Type of Change

  • Bug Fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as
    expected)
  • Logistics Change (A change to a README, description, or dev workflow setup like
    linting/formatting)
  • Continuous Integration Change (Related to deployment steps or continuous integration
    workflows)
  • Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

  • locally on Desktop.
  • on the live deployment preview on Desktop.
  • on the live deployment preview on Mobile.
  • I have added new Cypress tests that are passing.

Checklist

  • I have performed a self-review of my own code.
  • I have followed the style guidelines of this project.
  • I have documented any new functions in /src/lib/* and commented hard to understand areas
    anywhere else.
  • My changes produce no new warnings.

Screenshots

image
^overflowing text fades out

image
^mid scroll when title is hovered

Copy link

vercel bot commented Apr 10, 2024

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

Name Status Preview Comments Updated (UTC)
membership-portal-ui-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 10, 2024 6:11am
testing-membership-portal-ui-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 10, 2024 6:11am

Copy link
Member

@SheepTester SheepTester left a comment

Choose a reason for hiding this comment

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

alex apparently rejected this so i wont approve

<div className={styles.window}>
<div className={styles.slider}>
<div ref={node => setContentWidth(node?.offsetWidth ?? 0)}>{children}</div>
{overflowAmount > 0 && <div>{children}</div>}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
{overflowAmount > 0 && <div>{children}</div>}
{overflowAmount > 0 && <div aria-hidden>{children}</div>}

You should also disable user-select on this so it doesn't get copied, maybe

}

&:hover {
animation: marquee var(--anim-time, 3s) linear infinite;
Copy link
Member

Choose a reason for hiding this comment

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

right now the animation resets when your mouse moves off. should it?

you can also keep the animation always on, but set animation-playing-state to paused until it's hovered

should it play when the mouse hovers on the text or on the card?

>
<div className={styles.window}>
<div className={styles.slider}>
<div ref={node => setContentWidth(node?.offsetWidth ?? 0)}>{children}</div>
Copy link
Member

Choose a reason for hiding this comment

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

I think maybe you should also add a title attribute with the text so that you can see the whole title in the tooltip. but idk if that'll cover up the animation

@alexzhang1618
Copy link
Contributor

closing since we're not going to add this 😢

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

Successfully merging this pull request may close these issues.

3 participants