Avatares que siguen al usuario (Sticky)

Oshvam

Hola, quería saber si hay alguna posibilidad de hacer que la zona de avatares se convierta en sticky. A veces, las discusiones pueden ser muy extensas, y estaría bien que el avatar de editor de post siga al usuario mientras se desplaza hacia abajo.

Esto es algo que viene de serie en el CSS de Discourse, pero no he visto ninguna clase a la que poder aplicar esto en mobile y desktop. Si aplico position: sitcky, se descuadra el avatar en el post, pero no sigue al usuario. ¿Alguna idea?

Por ejemplo, si apuntamos a la clase .PostUser-avatar e intento fijarla, no se comporta como esperaba.

Darkle

Oshvam Por como está estructurado ahora mismo el post stream de Flarum no es algo sencillo, igualmente le he echado un vistazo y esto sería una aproximación, creo que así también puedes ver claramente el problema que existe actualmente.

article > div > header.Post-header {
    position: sticky;
    top: 70px;
}

De todas formas, si te gusta como se ve, podemos mejorarlo un poco para que al menos el texto del nombre usuario no se solape con el post.

Oshvam

Gracias. Intentaré a ver qué tal. En el foro oficial sugerí que esto debería estar dentro del core, me parece básico en la usabilidad

Darkle De todas formas, si te gusta como se ve, podemos mejorarlo un poco para que al menos el texto del nombre usuario no se solape con el post.

Si me echais una mano con eso, os lo agradecería eternamente.

Oshvam

Sorry por el doble post. Esto es lo mejor que se me ocurrió para que no quedase tan raro.

/* APLICA CAMBIOS EN AMBOS MODOS */

:root {
  & when (@config-dark-mode = true) { 

/* Avatares Sticky modo dark */

article > div > header.Post-header {
    position: sticky;
    top: 50px;
    z-index: 999;
    background:#15191e;
}

@media @phone {
article > div > header.Post-header {
    position: sticky;    
    top: 46px;
    overflow:hidden;
    background:#15191e;
} 
}
} 

   & when (@config-dark-mode = false) { 

/* Avatares Sticky modo white */

article > div > header.Post-header {
    position: sticky;
    top: 50px;
    z-index: 999;
    background:#eaedf0;
}

@media @phone {
article > div > header.Post-header {
    position: sticky;    
    top: 46px;
    overflow:hidden;
    background:#eaedf0;
} 
}
}
}

Darkle

Oshvam Así mucho mejor, tal vez pondría el fondo de color blanco, aunque ya es cuestión de gustos y estética de cada web.

Con la 2.0 sin duda será mucho más sencillo hacer este tipo de cosas, el sticky y top para el avatar serían suficiente, como se va a reescribir todo el frontend, estará todo mucho más estructurado a través del CSS con flexbox y grid, así la estructura HTML será bastante más limpia.

A fin de cuentas, aunque al diseño/frontend de Flarum le han sentado muy bien los años, muchas partes como esta en particular son prácticamente las mismas que tenían las primeras versiones de 2015, y ya se empiezan a notar.

FlarumES es una comunidad oficial aprobada por Flarum.org y funciona de forma independiente a la Fundación Flarum. Para obtener más información, visite esta página.