Unique CSS class for Group pages?

Contribuir 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 Me gusta
2

Pensé que, dado que han pasado 4 años, volvería a preguntar para ver si hay más interés esta vez.

Sería muy útil poder estilizar la página de un grupo individual, pero hacerlo sin una clase dedicada en la etiqueta <body> —como la que tenemos para groups-page en el listado principal de grupos en /g— sería realmente agradable, en mi opinión.

¿Alguien más ha deseado esto o, alternativamente, ha encontrado una manera de aplicar un estilo CSS más detallado en la página de listado de un grupo individual?

3

¿Qué tipo de modificaciones estás buscando?

Si entiendo bien, quieres apuntar a una página de grupo; puedes usar el prefijo:

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

Gracias, eso podría acercarme bastante. Por lo general, parece que estos selectores se han colocado en <body>, así que era allí donde estaba buscando.

Estoy intentando crear algo más complementario con el componente de tema (hermoso) Discourse Category Banners creado por @awesomerobot, así que no estoy seguro de si puedo hacerlo basándome en el HTML generado, pero lo intentaré a ver qué puedo hacer.

2 Me gusta
5

Podrías usar JS para establecer clases en los elementos HTML superiores comenzando desde .group.

1 me gusta
6

Sí, eso parece ser lo que se hizo en Discourse Category Banners para colocar el contenido correcto encima de #main-outlet. El JavaScript adicional probablemente seguirá en mi lista de deseos/tareas durante bastante tiempo, y por ahora haré lo que pueda con CSS.

7

Aquí hay una forma poco elegante de hacerlo. Añadir la clase es sencillo. Esto agregará un groupname a tu id main, donde groupname es el nombre del grupo, por ejemplo: <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>

El problema es que la clase permanece ahí una vez que navegas a otra página. Necesitamos una forma de eliminar esa clase al salir de la página. Probablemente haya una manera sencilla de hacerlo, pero como no sé mucho de JavaScript, no tengo la suficiente astucia para resolverlo. Espero que puedas encontrar una mejor forma de hacerlo, pero la forma poco elegante sería cambiar el final del script así:

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

Esto eliminará cualquier clase de nombre de grupo que hayas añadido. Pero parece una forma realmente poco elegante de hacerlo, y tendrás que modificar el código cada vez que añadas un nuevo grupo.

1 me gusta
8

El problema era que no podía averiguar cómo pasar una variable desde getGroupInfo() a api.onPageChange(() => {

El código a continuación logra esto mediante una cookie y debería agregar y eliminar automáticamente la clase "nombre-del-grupo-actual" de/del div ID main para cualquier grupo que tengas.

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