Unique CSS class for Group pages?

Beitragen 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 „Gefällt mir“
2

Ich dachte, da es jetzt vier Jahre her ist, würde ich es noch einmal fragen, um zu sehen, ob diesmal mehr Interesse besteht.

Es wäre wirklich schön, die Seite einer einzelnen Gruppe zu gestalten, aber dies ohne eine dedizierte Klasse am <body>-Tag zu tun – so wie wir es für groups-page auf der Hauptgruppenliste unter /g haben – wäre meiner Meinung nach sehr wünschenswert.

Hat sich noch jemand anderes danach gesehnt oder vielleicht alternativ einen Weg gefunden, das CSS auf der Auflistungsseite einer einzelnen Gruppe detaillierter zu gestalten?

3

Welche Art von Änderungen suchst du?

Wenn ich das richtig verstehe, möchtest du eine Gruppen-Seite ansprechen – du kannst dies mit folgendem Präfix tun:

#main-outlet .container.group.FOO {
    //
}
6 „Gefällt mir“
4

Danke, das bringt mich wahrscheinlich schon sehr weit. Normalerweise scheinen diese Selektoren auf dem <body>-Tag zu liegen, weshalb ich dort auch gesucht habe.

Ich versuche, etwas zu entwickeln, das sich gut mit der (wunderschönen) Theme-Komponente Discourse Category Banners von @awesomerobot ergänzt. Ich bin mir also nicht sicher, ob das basierend auf dem ausgegebenen HTML möglich ist, aber ich werde es einfach ausprobieren.

2 „Gefällt mir“
5

Du kannst JavaScript verwenden, um Klassen auf übergeordneten HTML-Elementen ab .group zu setzen.

1 „Gefällt mir“
6

Ja, das scheint das zu sein, was bei Discourse Category Banners getan wurde, um den richtigen Inhalt oberhalb von #main-outlet anzuzeigen. Zusätzliche JS-Funktionen werden wahrscheinlich noch eine Weile auf meiner Wunsch- bzw. To-Do-Liste bleiben, und ich werde vorerst das Beste mit CSS machen.

7

Hier ist eine hässliche Möglichkeit, dies zu tun. Das Hinzufügen der Klasse ist einfach. Dies fügt deinem main-ID einen groupname hinzu, wobei groupname der Name der Gruppe ist, also <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>

Das Problem ist, dass die Klasse bleibt, sobald du die Seite verlässt. Wir benötigen eine Möglichkeit, diese Klasse beim Verlassen der Seite zu entfernen. Es gibt wahrscheinlich einen einfachen Weg, dies zu tun, aber ich kenne JavaScript nicht wirklich gut genug, um darauf zu kommen. Hoffentlich kannst du einen besseren Weg finden, dies zu tun, aber die hässliche Methode besteht darin, das Ende des Skripts wie folgt zu ändern:

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

Dies entfernt alle möglichen groupname-Klassen, die du hinzugefügt hast. Aber es scheint wirklich eine hässliche Methode zu sein, und du musst den Code jedes Mal ändern, wenn du eine neue Gruppe hinzufügst.

1 „Gefällt mir“
8

Das Problem war, dass ich nicht herausfand, wie man eine Variable von getGroupInfo() an api.onPageChange(() => { weitergibt.

Der folgende Code löst dies mithilfe eines Cookies und fügt bzw. entfernt automatisch die Klasse "name-of-current-group" für jede Gruppe, der Sie angehören, vom div mit der ID main hinzu.

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