El "Ver x temas nuevos o actualizados" está desalineado después de añadir animaciones

UX
1

La PR añadió una animación a la alerta de nuevo tema. Parece buena en general, pero accidentalmente rompió el mecanismo de alineación original.

La causa raíz es que transform: translateX(50%); no funcionó con el nuevo CSS de animación animation: float-down 250ms ease-in-out forwards;. Cuando se activa la animación, el transform original deja de ser válido.

El error se puede ver en el archivo adjunto.

image

1 me gusta
2

Dado que transform y la animation de flotación hacia abajo (float-down) entran en conflicto entre sí, creo que hay dos formas de resolverlo:

  1. Añadir una nueva clase de animación float-down-center a dicourse.scss, incluyendo el transform: translateX(50%); en el keyframe.
  2. Cambiar la forma en que se alinea el botón, de:
.show-more {
    &.has-topics {
      @include viewport.from(md) {
        position: absolute;
        z-index: z("base");
        width: auto;
        right: 50%;
        transform: translateX(50%);
        font-size: var(--font-down-1-rem);

        .alert {
          border-radius: var(--d-border-radius-large);
        }
      }

      @include d-animation(float-down, 250ms, ease-in-out);
    }

a

.show-more {
    &.has-topics {
      @include viewport.from(md) {
        position: absolute;
        z-index: z("base");
        width: fit-contenet;
        left: 0;
        right: 0;
        margin: auto;
        font-size: var(--font-down-1-rem);

        .alert {
          border-radius: var(--d-border-radius-large);
        }
      }

      @include d-animation(float-down, 250ms, ease-in-out);
    }

Si este es el caso, crearé un PR para fusionar.
Por favor, tómate tiempo para revisarlo. @bryce

1 me gusta
3

(publicación eliminada por el autor)

2 Me gusta
4

(publicación eliminada por el autor)

5

(publicación eliminada por el autor)

6

(publicación eliminada por el autor)

7

@jordan.vidrine yo también noté esto

9

Tengo una pequeña corrección lista para esto, la fusionaré pronto.

2 Me gusta
10

He fusionado tu PR en su lugar. ¡Gracias!

1 me gusta