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

חווית משתמש
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
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
3

A PR is applied here, using the second method:

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

2 לייקים
7

@jordan.vidrine i thought i noticed this too

9

Have a small fix in for this, will merge soon.

2 לייקים
10

Merged your PR instead. Thanks!

לייק 1