Unique CSS class for Group pages?

Contribuer 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 « J'aime »
2

Je pensais que, puisque quatre ans se sont écoulés, je demanderais à nouveau pour voir s’il y a plus d’intérêt cette fois.

Ce serait vraiment agréable de styliser la page d’un groupe individuel, mais le faire sans une classe dédiée sur la balise <body> — comme nous en avons une pour groups-page sur la liste principale des groupes à /g — serait vraiment bien, à mon avis.

Est-ce que quelqu’un d’autre a souhaité cela, ou peut-être a-t-il trouvé un moyen de faire un style CSS plus détaillé sur la page de liste d’un groupe individuel ?

3

Quel type de modifications recherchez-vous ?

Si j’ai bien compris, vous souhaitez cibler une page de groupe — vous pouvez ajouter le préfixe suivant :

#main-outlet .container.group.FOO {
    //
}
6 « J'aime »
4

Merci, cela devrait me rapprocher pas mal. En général, il semble que ces sélecteurs soient placés sur <body>, c’est donc là que je regardais.

J’essaie de créer quelque chose de plus complémentaire avec le composant de thème (magnifique) Bannières de catégorie Discourse créé par @awesomerobot, donc je ne suis pas sûr de pouvoir le faire à partir du HTML généré, mais je vais essayer de contourner le problème.

2 « J'aime »
5

Vous pouvez utiliser JavaScript pour définir des classes sur les éléments HTML supérieurs en commençant par .group.

1 « J'aime »
6

Oui, cela semble être ce qui a été fait dans Discourse Category Banners pour afficher le bon contenu au-dessus de #main-outlet. Du JavaScript supplémentaire restera probablement sur ma liste de souhaits/à faire pendant un bon moment, et je ferai au mieux avec du CSS pour l’instant.

7

Voici une méthode peu élégante pour le faire. Ajouter la classe est simple. Cela ajoutera un groupname à votre identifiant main, où groupname correspond au nom du groupe, par exemple : <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>

Le problème est que la classe reste présente une fois que vous naviguez ailleurs. Nous devons trouver un moyen de supprimer cette classe en quittant la page. Il existe probablement une solution simple, mais comme je ne connais pas vraiment JavaScript, je ne suis pas assez ingénieux pour la trouver. J’espère que vous pourrez trouver une meilleure méthode, mais la façon peu élégante de procéder consiste à modifier la fin du script comme suit :

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

Cela supprimera toutes les classes de nom de groupe éventuelles que vous avez ajoutées. Mais cela semble vraiment être une méthode peu élégante, et vous devrez modifier le code à chaque fois que vous ajouterez un nouveau groupe.

1 « J'aime »
8

Le problème était que je ne parvenais pas à comprendre comment passer une variable de getGroupInfo() vers api.onPageChange(() => {

Le code ci-dessous y parvient à l’aide d’un cookie et devrait automatiquement ajouter et retirer la classe "nom-du-groupe-actuel" à/de div ID main pour tout groupe dont vous êtes membre.

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