CSS specifico per categoria non si aggiorna se non con F5

[Fma965]

Ciao ragazzi,

Ho questo CSS specifico

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

Questo funziona benissimo per nascondere molti elementi in una categoria “documentazione” (sì, so che esiste un plugin per la documentazione, ma trovo il layout nativo migliore) il mio problema è che quando clicco da, ad esempio, “Ford” a “Documentazione”, il CSS non si aggiorna e quindi le mie cose non vengono nascoste a meno che non aggiorni l’intera pagina con F5 / Ctrl + R

C’è qualcosa che mi sfugge per permettere che questo funzioni?

Lo stesso vale anche al contrario

Puoi visitare qualsiasi categoria su https://community.cyanlabs.net e poi andare su documentazione e vedrai ancora gli elementi CSS nascosti mostrati.

[awesomerobot (Kris)]

Sembra che tu stia usando il tema Air, che include il componente tema Discourse Loading Slider.

Se disabiliti quel componente da admin > customize > themes > components, e poi riprovi… cambia qualcosa? a volte quel componente può causare un problema in cui le classi persistono tra le pagine finché non aggiorni.

[Fma965]

Grazie per la tua risposta,

Ho appena testato questo e sfortunatamente non ha fatto alcuna differenza in questo caso.

Se non c’è qualcosa di semplice, controllerò la classe del corpo in javascript usando api.onPageChange() ma sembra un po’ strano.

[awesomerobot (Kris)]

Ah ok… dando un’occhiata più da vicino, sembra che ci sia una classe dinamica aggiunta da un tema al tag body, ad esempio category-documentation-21 e category-ford-5… durante le transizioni di pagina quelle classi non sembrano essere rimosse correttamente.

[Fma965]

MODIFICA, ora capisco cosa intendi, per qualche motivo mantiene quella classe nell’elemento body

MODIFICA2: ho fatto una copia del tema senza componenti, lo stesso problema persiste, quindi deve essere in un plugin o nel core.

Il premio per la soluzione più traballante va a me

<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>

Ma sì, se qualcuno sa cosa lo sta causando, per favore me lo faccia sapere

[awesomerobot (Kris)]

Sembra un bug nel core, quindi lo sto riclassificando.

Per riprodurlo:

1. Visita una categoria come Support - Discourse Meta
2. Aggiorna la pagina
3. Passa a un’altra categoria
4. Dai un’occhiata alle classi sul tag del corpo, la categoria precedente rimane

Sembra essere aggiunto lato server, ho chiesto a un ingegnere di aiutarmi a risolvere il problema e più specificamente sembra provenire da:

app/helpers/application_helper.rb

[Fma965]

Grazie per l’aggiornamento, per ora il mio javascript improvvisato aggira il problema, come posso monitorare lo stato di questo bug?

[awesomerobot (Kris)]

Aggiorneremo questo argomento quando sarà risolto (o qualcos’altro di correlato). Se cambi il tuo livello di monitoraggio in “Segui” nel menu a discesa in fondo all’argomento, riceverai notifiche per i nuovi post.

[Fma965]

Perfetto, non sapevo se ci fosse un problema su GitHub o altro, sto già seguendo questo argomento quindi rimarrò aggiornato.

Grazie ancora per il tuo aiuto.

[awesomerobot (Kris)]

Questo dovrebbe essere risolto in questo commit, quindi la prossima volta che aggiornerai Discourse le classi delle categorie dovrebbero essere aggiunte/rimosse come previsto.

FIX: Harmonise category body class generation on server/client (#16967)

[Fma965]

Grazie, le classi sono state aggiornate correttamente ora ma il css non viene ancora applicato quando si passa da una categoria all’altra

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

Documentation

spostati tra le categorie, non funzionerà correttamente.

[awesomerobot (Kris)]

oh hmm, questo è inaspettato… è CSS aggiunto con JS?

[Fma965]

No, solo pianifica css nei file common o desktop.css, ho provato entrambi.

[awesomerobot (Kris)]

@Fma965

body[class^="category-documentation"]

Ah ok, mi è appena venuto in mente… class^= controlla l’inizio della classe e la categoria non è sempre la prima classe nell’elenco.

Se aggiorni a body[class*="category-documentation"] dovrebbe funzionare, questo controlla il nome della classe ovunque appaia nell’elenco.

[Fma965]

Questo + la correzione principale sembra funzionare. grazie