Unique CSS class for Group pages?

Contribuisci UX
1

Any chance of a group-specific class on the group-specific pages for members, topics, posts, etc.?

e.g. /groups/FOO/topics

This would allow us to do custom styling for each group.

3 Mi Piace
2

Pensavo che, dato che sono passati 4 anni, potrei chiedere di nuovo per vedere se c’è più interesse questa volta.

Sarebbe davvero bello poter stilizzare la pagina di un singolo gruppo, ma farlo senza una classe dedicata sul tag <body> – come quella che abbiamo per groups-page nella pagina principale dell’elenco dei gruppi a /g – sarebbe senz’altro ottimo, a mio parere.

C’è qualcun altro che ha desiderato questo, o magari ha trovato un modo per applicare uno styling CSS più dettagliato alla pagina di elenco di un singolo gruppo?

3

Che tipo di modifiche stai cercando?

Se ho capito bene, vuoi indirizzare una pagina di gruppo: puoi aggiungere il prefisso:

#main-outlet .container.group.FOO {
    //
}
6 Mi Piace
4

Grazie, potrebbe portarmi molto vicino. In genere sembra che questi selettori siano stati applicati su , quindi è lì che stavo cercando.

Sto cercando di creare qualcosa di più complementare al componente del tema (bellissimo) Discourse Category Banners creato da @awesomerobot, quindi non sono sicuro di poterlo fare in base all’HTML generato, ma ci proverò lo stesso.

2 Mi Piace
5

Potresti usare JavaScript per impostare le classi sugli elementi HTML superiori a partire da .group.

1 Mi Piace
6

Sì, sembra che sia stato fatto così su Discourse Category Banners per posizionare il contenuto corretto sopra #main-outlet. Probabilmente JavaScript aggiuntivo rimarrà nella mia lista dei desideri o da fare per molto tempo, e per ora farò quello che posso con il CSS.

7

Ecco un modo poco elegante per farlo. Aggiungere la classe è semplice. Questo aggiungerà un groupname al tuo id main, dove groupname è il nome del gruppo, ad esempio <section id="main" class="ember-application groupname">

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                if (myObj.group.name) {
                    document.getElementById("main").classList.add(myObj.group.name);
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();                
    }
    api.onPageChange(() =>{
        getGroupInfo();
    });
</script>

Il problema è che la classe rimane lì una volta che ti sposti altrove. Dobbiamo trovare un modo per rimuovere quella classe quando lasciamo la pagina. Probabilmente esiste un modo semplice per farlo, ma non conosco bene JavaScript, quindi non sono abbastanza abile da risolverlo da solo. Spero tu possa trovare un modo migliore per farlo, ma il metodo poco elegante consiste nel modificare la fine dello script come segue:

    api.onPageChange(() =>{
        document.getElementById("main").classList.remove("group1");
        document.getElementById("main").classList.remove("group2");
        document.getElementById("main").classList.remove("group3");
        getGroupInfo();
    });

Questo rimuoverĂ  qualsiasi classe di groupname che hai aggiunto. Ma sembra un modo davvero poco elegante per farlo, e devi modificare il codice ogni volta che aggiungi un nuovo gruppo.

1 Mi Piace
8

Il problema era che non riuscivo a capire come passare una variabile da getGroupInfo() a api.onPageChange(() => {

Il codice qui sotto risolve il problema utilizzando un cookie e dovrebbe aggiungere e rimuovere automaticamente la classe "nome-del-gruppo-corrente" dall’ID div principale per qualsiasi gruppo di cui fai parte.

<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                var groupName = myObj.group.name;
                if (groupName) {
                    document.getElementById("main").classList.add(groupName);
                    $.cookie('groupCookie', groupName, { expires: 7, path: '/' });
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();    			
    }
    api.onPageChange(() =>{
        var group = $.cookie('groupCookie');
        document.getElementById("main").classList.remove(group);
        $.cookie('groupCookie', 'false', { expires: -1, path: '/' })
        getGroupInfo();
    });
</script>