O "Ver x novos ou atualizados tópicos" está desalinhado após adicionar animações

Experiência do Usuário
1

A PR adicionou uma animação ao alerta de novo tópico. Parece bom no geral, mas acidentalmente quebrou o mecanismo de alinhamento original.

A causa raiz disso é que transform: translateX(50%); falhou ao funcionar com o novo CSS de animação animation: float-down 250ms ease-in-out forwards;. Quando a animação é ativada, o transform original se torna inválido.

O erro pode ser visto no arquivo anexado.

image

1 curtida
2

Como transform e a animation de descida (float-down) entram em conflito, acho que há duas maneiras de resolver isso:

  1. Adicionar uma nova classe de animação float-down-center ao dicourse.scss, incluindo o transform: translateX(50%); na keyframe.
  2. Mudar a forma como o botão é alinhado, 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);
    }

para

.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);
    }

Se for esse o caso, levantarei um PR para mesclagem.
Por favor, reserve um tempo para analisar. @bryce

1 curtida
3

(postagem excluída pelo autor)

2 curtidas
4

(postagem excluída pelo autor)

5

(postagem excluída pelo autor)

6

(postagem excluída pelo autor)

7

@jordan.vidrine eu também achei que tinha notado isso

9

Tenho um pequeno conserto para isso, farei o merge em breve.

2 curtidas
10

Mesclei seu PR em vez disso. Obrigado!

1 curtida