Unique CSS class for Group pages?

Contribuir Experiência do Usuário
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 curtidas
2

Pensei que, já que se passaram 4 anos, eu perguntaria novamente para ver se há mais interesse dessa vez.

Seria muito bom poder estilizar a página de um grupo individual, mas fazê-lo sem uma classe dedicada na tag <body> — como temos para groups-page na lista principal de grupos em /g — seria ótimo, na minha opinião.

Mais alguém tem esse desejo ou, alternativamente, conseguiu descobrir uma maneira de aplicar um CSS mais detalhado na página de listagem de um grupo individual?

3

Que tipo de modificações você está procurando?

Se entendi corretamente, você quer direcionar uma página de grupo – você pode adicionar o prefixo:

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

Obrigado, isso pode me deixar bem próximo. Geralmente, parece que esses seletores foram aplicados ao <body>, então foi aí que eu estava procurando.

Estou tentando criar algo mais complementar ao componente de tema Discourse Category Banners (bonito!) criado por @awesomerobot, então não tenho certeza se consigo fazer isso com base no HTML gerado, mas vou tentar contornar o problema.

2 curtidas
5

Você pode usar JavaScript para definir classes em elementos HTML superiores, começando a partir de .group.

1 curtida
6

Sim, parece que foi isso que foi feito nos Discourse Category Banners para colocar o conteúdo correto acima de #main-outlet. Javascript extra provavelmente permanecerá na minha lista de desejos/tarefas por um bom tempo, e por enquanto farei o que puder apenas com CSS.

7

Aqui está uma maneira feia de fazer isso. Adicionar a classe é fácil. Isso adicionará um groupname ao seu id main, onde groupname = qualquer que seja o nome do grupo, ou seja, <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>

O problema é que a classe permanece lá mesmo depois que você navega para outro lugar. Precisamos de uma maneira de remover essa classe ao sair da página. Provavelmente existe uma maneira fácil de fazer isso, mas como não sei muito de JS, não sou inteligente o suficiente para descobrir. Espero que você consiga encontrar uma maneira melhor de fazer isso, mas a maneira feia de fazer é alterar o final do script para:

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

Isso removerá qualquer classe de groupname que você tenha adicionado. Mas parece uma maneira realmente feia de fazer isso, e você terá que alterar o código sempre que adicionar um novo grupo.

1 curtida
8

O problema era que eu não conseguia descobrir como passar uma variável de getGroupInfo() para api.onPageChange(() => {

O código abaixo realiza isso usando um cookie e deve adicionar e remover automaticamente a classe "name-of-current-group" de/para o div ID main para qualquer grupo que você tenha.

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