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 года, стоит спросить ещё раз, чтобы узнать, есть ли сейчас к этому больший интерес.

Было бы здорово иметь возможность стилизовать страницу отдельной группы, но делать это без специального класса на теге <body> — как у нас есть для groups-page на главной странице списка групп по адресу /g — было бы, на мой взгляд, ещё лучше.

Кто-нибудь ещё испытывал подобную потребность или, возможно, нашёл способ применить более детальную CSS-стилизацию к странице списка отдельной группы?

3

Какие именно изменения вы ищете?

Если я правильно понял, вы хотите обратиться к странице группы — в этом случае добавьте префикс:

#main-outlet .container.group.FOO {
    //
}
6 лайков
4

Спасибо, это, вероятно, поможет мне приблизиться к цели. Обычно такие селекторы размещаются на теге <body>, поэтому я искал именно там.

Я пытаюсь создать что-то, что будет гармонировать с компонентом темы Discourse Category Banners (красивым!), созданным @awesomerobot, поэтому пока не уверен, смогу ли я реализовать это на основе выводимого HTML, но попробую поэкспериментировать.

2 лайка
5

Вы можете использовать JavaScript, чтобы назначать классы вышестоящим HTML-элементам, начиная с .group.

1 лайк
6

Да, похоже, именно так было сделано в теме Баннеры категорий Discourse, чтобы разместить нужный контент выше #main-outlet. Дополнительный JavaScript, скорее всего, ещё долго будет оставаться в моём списке желаемого/задач, так что пока я ограничусь тем, что смогу сделать с помощью CSS.

7

Вот неуклюжий способ сделать это. Добавление класса — дело простое. Это добавит groupname к вашему идентификатору main, где 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>

Проблема в том, что класс остаётся, даже когда вы переходите на другую страницу. Нам нужен способ удалять этот класс при выходе со страницы. Вероятно, есть простой способ сделать это, но я не очень хорошо знаю JS, поэтому не могу сообразить, как. Надеюсь, вы сможете найти более элегантное решение, но неуклюжий способ — изменить конец скрипта следующим образом:

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

Это удалит любой возможный класс с именем группы, который вы добавили. Но это кажется действительно неуклюжим решением, и вам придётся менять код каждый раз, когда вы добавляете новую группу.

1 лайк
8

Проблема заключалась в том, что я не мог понять, как передать переменную из getGroupInfo() в api.onPageChange(() => {.

Ниже приведенный код решает эту задачу с использованием куки и должен автоматически добавлять и удалять класс "name-of-current-group" из div с идентификатором main для любой группы, к которой вы принадлежите.

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