Unique CSS class for Group pages?

貢献 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
2

4 年が経ったので、今回はもう少し関心があるか聞いてみようと思いました。

個々のグループのページをスタイルできるのは確かに素敵ですが、メインのグループ一覧ページ（/g）にある groups-page のように、<body> タグに専用のクラスがないと難しいのは、私見ですが残念です。

他にもこれを望んでいる人はいますか？あるいは、個々のグループの一覧ページでより詳細な CSS スタイリングを行う方法をすでに発見した人はいますか？

3

どのような変更をお探しですか？

私の理解が合っていれば、グループページを対象にしたいとのことですね。以下のようにプレフィックスを付けてください。

#main-outlet .container.group.FOO {
    //
}
「いいね！」 6
4

ありがとうございます、かなり近いところまでたどり着けそうです。通常、これらのセレクターは 要素に適用されているように見えるため、私はそこを見ていました。

@awesomerobot さんが作成した（美しい）Discourse カテゴリバナー というテーマコンポーネントと調和するものを作りたいと考えています。出力される HTML を基にそれを実現できるかどうかわかりませんが、試行錯誤しながら進めてみます。

「いいね！」 2
5

.group から始まる上位の HTML 要素にクラスを設定するには、JavaScript を使用できます。

「いいね！」 1
6

はい、Discourse カテゴリバナー で #main-outlet の上に適切なコンテンツを表示するために、まさにその方法が取られました。追加の JavaScript は当分私の要望/TODO リストに残るでしょうし、今は CSS でできる範囲の対応をするつもりです。

7

これは、非常に不恰好な実装方法です。クラスの追加は簡単です。これにより、main ID に groupname が追加されます。ここで groupname はグループの名前そのものであり、例を挙げると <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>

問題は、ページを移動してもクラスが残ってしまうことです。ページを離れる際にそのクラスを削除する方法が必要です。おそらく簡単な方法があるはずですが、JavaScript がよくわからないため、私にはそれを見出すことができません。より良い方法をご提案いただければ幸いです。しかし、不恰好な方法として、スクリプトの末尾を以下のように変更する方法があります。

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

これにより、追加された可能性のあるすべての groupname クラスが削除されます。しかし、これは非常に不恰好な方法のように思え、新しいグループを追加するたびにコードを変更する必要があります。

「いいね！」 1
8

問題は、getGroupInfo() から api.onPageChange(() => { へ変数を渡す方法がわからなかったことです。

以下のコードは、クッキーを使ってこれを達成し、あなたが所属する任意のグループに対して、div ID main に "name-of-current-group" クラスを自動的に追加・削除します。

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