The "See x new or updated topics" is misaligned after adding animations

UX
1

The PR added an animation to the new topic alert. It seems good overall but it accidentally break the original align mechanism.

The root cause behind it is that transform: translateX(50%); failed to work with the new animation css animation: float-down 250ms ease-in-out forwards; When the animation is activated, the original transform turns invalid.

The bug can be seen from the attached file.

image
image1919×918 157 KB

1 Like
2

Since transform and the float-down animation are conflict themselves, I think there are two ways to solve that:

  1. Adding a new animation class float-down-center to dicourse.scss, including the transform: translateX(50%); to the keyframe.
  2. Changing the way the button is aligned without using the tranform attribute, using width: fit-contenet, left: 0, right: 0 and margin: auto;

If that is the case, I’ll raise a PR to fix that.

1 Like
3

A PR is applied here, using the second method:

https://github.com/discourse/discourse/pull/36767

1 Like
4

(post deleted by author)

5

(post deleted by author)

6

(post deleted by author)

7

@jordan.vidrine i thought i noticed this too