Problema con `topic-progress-wrapper` en RTL

Contribuir Error
1

Hola, querido Discourse,

En RTL, cuando llegamos al final de la página del tema, la clase topic-progress-wrapper hace que la página se vea desordenada. Por favor, revisen este punto.

Al comentar los siguientes valores, el problema se resuelve:

@media screen and (min-width: 925px)
.container.posts .topic-navigation {
    grid-area: timeline;
    align-self: start;
    /* position: -webkit-sticky;
       position: sticky; */
    top: 6em;
    margin-right: 1em;
    z-index: 100;
}
2

Hola @Nildarar

¿Podrías publicar una captura de pantalla del problema?

3

No se muestra en la captura de pantalla. Déjame explicarlo con más detalle. Para ver el problema, sigue estos pasos:

  1. Configura tu plantilla como RTL.
  2. Entra en la vista móvil.
  3. Aumenta el ancho de la pantalla a más de 925 px.
  4. Desplázate hasta el final del tema.
  5. El módulo Progreso del tema desaparece de la pantalla y la página se desplaza horizontalmente.

Podríamos haber solucionado este problema nosotros mismos modificando el CSS, pero pensé que podría haber un error más allá de eso y que sería detectado por tu revisión.

1 me gusta
4

Ok, así que esto es un síntoma de un problema mayor. El problema raíz aquí es que Discourse debería mostrarse en vista de escritorio en lugar de vista móvil cuando la pantalla mide ≥ 925 px de ancho. ¿Podrías decirme en qué dispositivo(s) ves este problema?

Vale la pena mencionar que eliminar position: sticky puede parecer que resuelve este problema en particular, pero romperá la línea de tiempo del tema (no se desplazará hacia abajo al hacer scroll en un tema).

Aunque es algo no relacionado con esto, noté que la barra de progreso del tema debería estar a la izquierda en lugar de a la derecha en diseños RTL. Envié una PR para esto aquí: FIX: Topic progress bar should be on the left in RTL layouts by OsamaSayegh · Pull Request #11999 · discourse/discourse · GitHub.

7 Me gusta
5

Los usuarios nos lo reportaron y yo lo vi en las Herramientas para desarrolladores. Preguntaré a mis colegas y te informaré.

Gracias por esta corrección :+1:

2 Me gusta
6

Combinado, muchas gracias por el reporte. Espero que esto solucione el problema.

3 Me gusta