CSS específico de categoría no se actualiza a menos que F5

Error
1

Hola chicos,

Tengo este CSS específico

body[class^="category-documentation"] {
        .topic-list .topic-list-header .posts, 
        .topic-list .topic-list-header .views,
        .topic-list .topic-list-body .posts,
        .topic-list .topic-list-body .views,
        .topic-list .topic-list-body .posters,
        .topic-list .topic-list-header .posters
        {
            display: none !important;
        }
        
        .topic-list .topic-list-body .main-link,
        .topic-list .topic-list-header .topic-list-data
        {
            width: 90% !important;
        }
        
        .topic-list .topic-list-header .activity, .full-width .contents .topic-list .topic-list-body .activity {
            width: 10% !important;
        }

        .topic-list .topic-excerpt {
            display: none !important;
        }
    }

Esto funciona muy bien para ocultar muchos elementos en una categoría de “documentación” (sí, sé que existe un plugin de documentación, pero prefiero el diseño nativo). Mi problema es que cuando hago clic, por ejemplo, de “Ford” a “Documentación”, el CSS no se actualiza y, por lo tanto, mis elementos no se ocultan a menos que actualice toda la página con F5 / Ctrl + R.

¿Hay algo que me falte para que esto funcione?

Lo mismo ocurre en la dirección opuesta.

Puedes visitar cualquier categoría en https://community.cyanlabs.net y luego ir a documentación y verás que los elementos CSS ocultos todavía se muestran.

1 me gusta
2

Parece que estás usando el tema Air, que incluye el componente de tema Discourse Loading Slider.

Si deshabilitas ese componente desde admin > customize > themes > components, y luego lo intentas de nuevo… ¿eso cambia algo? A veces, ese componente puede causar un problema donde las clases persisten entre páginas hasta que actualizas.

4 Me gusta
3

Gracias por tu respuesta,

Acabo de probar esto y, lamentablemente, no ha marcado ninguna diferencia en este caso.

Si no hay algo simple, entonces simplemente verificaré la clase del cuerpo en javascript usando api.onPageChange() pero parece un poco extraño.

1 me gusta
4

Ah, ok… echando un vistazo más de cerca, parece que hay una clase dinámica que un tema está añadiendo a la etiqueta body, como category-documentation-21 y category-ford-5… en las transiciones de página, esas clases no parecen eliminarse correctamente.

1 me gusta
5

EDIT, ya veo a qué te refieres, está manteniendo esa clase en el elemento body por alguna razón :thinking:

EDIT2: hice una copia del tema sin componentes, el mismo problema persiste, así que debe estar en un plugin o en el núcleo.

image
image722×1191 108 KB

El premio a la solución más cutre es para mí :smiley:

<script type="text/discourse-plugin" version="0.8.19">
  api.onPageChange((url) => {
        if (url.indexOf("/c/documentation/") >= 0) {
            $( "<style id='documentationworkaround'>.topic-list .topic-list-body .posters,.topic-list .topic-list-body .posts,.topic-list .topic-list-body .views,.topic-list .topic-list-header .posters,.topic-list .topic-list-header .posts,.topic-list .topic-list-header .views{display:none!important}.topic-list .topic-list-body .main-link,.topic-list .topic-list-header .topic-list-data{width:90%!important}.full-width .contents .topic-list .topic-list-body .activity,.topic-list .topic-list-header .activity{width:10%!important}.topic-list .topic-excerpt{display:none!important}</style>" ).appendTo( "head" )
        } else {
            $( "#documentationworkaround").remove();
        }

    });
</script>

Pero sí, si alguien sabe qué lo está causando, por favor hágamelo saber :slight_smile:

1 me gusta
6

Parece ser un error en el núcleo, así que lo estoy reclasificando.

Para reproducir:

  1. Visita una categoría como Support - Discourse meta
  2. Actualiza la página
  3. Cambia a otra categoría
  4. Echa un vistazo a las clases en la etiqueta del cuerpo, la categoría anterior permanece

Screen Shot 2022-05-10 at 2.31.33 PM

Parece que se agrega del lado del servidor, tuve un ingeniero que me ayudó a solucionar el problema y, más específicamente, parece provenir de:

3 Me gusta
7

Gracias por la actualización, por ahora mi chapucero javascript soluciona el problema, ¿cómo puedo seguir el estado de este error?

8

Actualizaremos este tema cuando esté solucionado (o algo más relacionado). Si cambia su nivel de seguimiento a “seguir” en el menú desplegable en la parte inferior del tema, recibirá notificaciones de nuevas publicaciones.

Screen Shot 2022-05-10 at 2.53.53 PM
Screen Shot 2022-05-10 at 2.53.53 PM390×136 10.3 KB

9

Perfecto, no sabía si había un problema en GitHub o algo así, ya estoy siguiendo este tema, así que me mantendré informado.

Gracias de nuevo por tu ayuda.

13

Esto debería corregirse en este commit, por lo que la próxima vez que actualices Discourse, las clases de categoría deberían añadirse/eliminarse según lo esperado.

4 Me gusta
14

Gracias, las clases se han actualizado correctamente ahora, pero el CSS todavía no se aplica al cambiar entre categorías

body[class^="category-documentation"] {
        .topic-list .topic-excerpt, .topic-list .topic-list-body .posts, .topic-list .topic-list-header .posts {
            display: none !important
        }
    }

muévete por las categorías, no funcionará correctamente.

1 me gusta
15

oh hmm, eso es inesperado… ¿eso es CSS añadido con JS?

16

No, solo plan css en los archivos common o desktop.css, probé ambos.

19

Ah, ok, esto se me acaba de ocurrir… class^= comprueba el principio de la clase, y la categoría no siempre es la primera clase de la lista.

Si actualizas a body[class*="category-documentation"] debería funcionar, esto comprueba el nombre de la clase dondequiera que aparezca en la lista.

5 Me gusta
20

Esto + la corrección principal parece funcionar. gracias

3 Me gusta