Add hover animation to eventList #4998

magnusbrecke · 2024-09-25T19:53:38Z

Description

Added a hover effect over the event items in eventlist

Result

Before:

Skjermopptak.2024-09-25.kl.21.48.07.mov

After:

Skjermopptak.2024-09-25.kl.21.51.06.mov

[ x ] Changes look good on both light and dark theme.
[ x ] Changes look good with different viewports (mobile, tablet, etc.).
[ x ] Changes look good with slower Internet connections.

Testing

[ x ] I have thoroughly tested my changes.

Please describe what and how the changes have been tested, and provide instructions to reproduce if necessary.

Resolves ABA-1084

linear · 2024-09-25T19:53:42Z

ABA-1084 Badly shown events in eventlist

falbru

Very nice work! Looks great 🔥

I forgot to mention it, but you don't actually need to use TypeScript in order to track if an element is hovered or not. You can use the CSS selector :hover instead!

app/components/EventItem/styles.css

ivarnakken

I have wanted this to be a link for so long!😍 Very nice!!

app/components/EventItem/styles.css

vercel · 2024-09-27T10:16:13Z

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
lego-bricks-storybook	⬜️ Ignored (Inspect)	Visit Preview		Oct 2, 2024 6:39pm

magnusbrecke · 2024-09-27T10:18:33Z

New Changes:

Skjermopptak.2024-09-27.kl.12.17.15.mov

falbru

Awesome!

eikhr

Looks very good!

ivarnakken

Looking better!

ivarnakken · 2024-09-27T14:13:56Z

app/components/EventItem/styles.css

+.eventItem:hover .companyLogo img {
+  border-radius: var(--border-radius-sm);
 }


This feels off - why are we adding border-radius to the images as well?

I tried both with and without, but personally felt with felt more natural. No other reason than that

ivarnakken · 2024-09-27T14:14:43Z

app/components/EventItem/index.tsx

You don't have to fix this now in this PR, but it would be nice if you did the same to the other event item types 😍

I agree I have already started working on it!

magnusbrecke · 2024-10-02T16:56:45Z

New additions to the page where the hover effect has been implemented:

Profile page:

Skjermopptak.2024-10-02.kl.18.53.46.mov

Authenticated front-page:

Skjermopptak.2024-10-02.kl.18.55.40.mov

itsisak

LGTM.

In the future it could be nice with a standardized component for a link with this effect. But this is good for now!

app/components/EventItem/index.tsx

…bapp into better-show-arrangementer

eikhr

Huge improvement!

eikhr · 2024-10-02T17:50:22Z

app/components/EventItem/styles.css

+}
+
+.eventItem:hover {
+  background-color: var(--additive-background);
+  border-radius: var(--border-radius-sm);
 }


Suggested change

}

.eventItem:hover {

background-color: var(--additive-background);

border-radius: var(--border-radius-sm);

}

&:hover {

background-color: var(--additive-background);

border-radius: var(--border-radius-sm);

}

}

Use &:hover nested inside the class to add hover styling to the same classname:)

eikhr · 2024-10-02T17:55:40Z

app/components/EventItem/styles.css

+
+.eventItem:hover {
+  background-color: var(--additive-background);
+  border-radius: var(--border-radius-sm);


Joblistings use --border-radius-lg. I would love for this to be consistant with that

I also removed the radius from the left side
It is necessary when the bordrer radius is that big

eikhr · 2024-10-02T17:58:47Z

We should add this to articles and meetings too, preferably with a shared component to ensure consistency. But I think this is good now, and that can be done in a separate PR:)

falbru

Awesome

ivarnakken · 2024-10-03T07:05:08Z

Remember to squash merge all the commits

Add hover animation to eventList

1435ca0

github-actions bot added the review-needed Pull requests that need review label Sep 25, 2024

magnusbrecke requested a review from falbru September 25, 2024 19:54

falbru reviewed Sep 25, 2024

View reviewed changes

app/components/EventItem/styles.css Outdated Show resolved Hide resolved

app/components/EventItem/styles.css Outdated Show resolved Hide resolved

This comment was marked as off-topic.

Sign in to view

ivarnakken reviewed Sep 26, 2024

View reviewed changes

app/components/EventItem/styles.css Outdated Show resolved Hide resolved

app/components/EventItem/styles.css Outdated Show resolved Hide resolved

app/components/EventItem/styles.css Outdated Show resolved Hide resolved

ivarnakken added enhancement Pull requests that make enhancements, instead of just purely new features changes-requested Pull requests with requested changes labels Sep 26, 2024

Fix requested changes

e2db5cf

magnusbrecke requested review from ivarnakken, falbru and eikhr September 27, 2024 10:16

falbru approved these changes Sep 27, 2024

View reviewed changes

Remove comment from css file

f75ab45

eikhr approved these changes Sep 27, 2024

View reviewed changes

norbye approved these changes Sep 27, 2024

View reviewed changes

ivarnakken reviewed Sep 27, 2024

View reviewed changes

Add the same hover effect to all events on page

386bcad

magnusbrecke requested review from falbru, eikhr and ivarnakken October 2, 2024 16:57

magnusbrecke self-assigned this Oct 2, 2024

magnusbrecke requested a review from itsisak October 2, 2024 16:57

fix lint

383f079

itsisak approved these changes Oct 2, 2024

View reviewed changes

app/components/EventItem/index.tsx Outdated Show resolved Hide resolved

delete unnessecary comments

a63e58e

Merge branch 'master' into better-show-arrangementer

4dfe85f

vercel bot temporarily deployed to Preview October 2, 2024 17:16 Inactive

Magnus Brecke added 2 commits October 2, 2024 19:24

fix lint second time

79225a0

Merge branch 'better-show-arrangementer' of github.com:webkom/lego-we…

38242fd

…bapp into better-show-arrangementer

vercel bot temporarily deployed to Preview October 2, 2024 17:29 Inactive

eikhr approved these changes Oct 2, 2024

View reviewed changes

magnusbrecke added 2 commits October 2, 2024 20:09

edit borderradius and fix css

e920f1f

fix rest of border-radius

9d93c67

falbru approved these changes Oct 3, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add hover animation to eventList #4998

Add hover animation to eventList #4998

magnusbrecke commented Sep 25, 2024

linear bot commented Sep 25, 2024

falbru left a comment

This comment was marked as off-topic.

ivarnakken left a comment •

edited

Loading

vercel bot commented Sep 27, 2024 •

edited

Loading

magnusbrecke commented Sep 27, 2024

falbru left a comment

eikhr left a comment

ivarnakken left a comment

ivarnakken Sep 27, 2024 •

edited

Loading

magnusbrecke Oct 2, 2024

ivarnakken Sep 27, 2024

magnusbrecke Sep 27, 2024

magnusbrecke commented Oct 2, 2024

itsisak left a comment

eikhr left a comment

eikhr Oct 2, 2024

eikhr Oct 2, 2024

magnusbrecke Oct 2, 2024

eikhr commented Oct 2, 2024

falbru left a comment

ivarnakken commented Oct 3, 2024

Add hover animation to eventList #4998

Are you sure you want to change the base?

Add hover animation to eventList #4998

Conversation

magnusbrecke commented Sep 25, 2024

Description

Result

Testing

linear bot commented Sep 25, 2024

falbru left a comment

Choose a reason for hiding this comment

This comment was marked as off-topic.

ivarnakken left a comment • edited Loading

Choose a reason for hiding this comment

vercel bot commented Sep 27, 2024 • edited Loading

magnusbrecke commented Sep 27, 2024

falbru left a comment

Choose a reason for hiding this comment

eikhr left a comment

Choose a reason for hiding this comment

ivarnakken left a comment

Choose a reason for hiding this comment

ivarnakken Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

magnusbrecke Oct 2, 2024

Choose a reason for hiding this comment

ivarnakken Sep 27, 2024

Choose a reason for hiding this comment

magnusbrecke Sep 27, 2024

Choose a reason for hiding this comment

magnusbrecke commented Oct 2, 2024

itsisak left a comment

Choose a reason for hiding this comment

eikhr left a comment

Choose a reason for hiding this comment

eikhr Oct 2, 2024

Choose a reason for hiding this comment

eikhr Oct 2, 2024

Choose a reason for hiding this comment

magnusbrecke Oct 2, 2024

Choose a reason for hiding this comment

eikhr commented Oct 2, 2024

falbru left a comment

Choose a reason for hiding this comment

ivarnakken commented Oct 3, 2024

ivarnakken left a comment •

edited

Loading

vercel bot commented Sep 27, 2024 •

edited

Loading

ivarnakken Sep 27, 2024 •

edited

Loading