Unique CSS class for Group pages?

ساهم تجربة المستخدم
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

شكرًا لك، قد يقترب ذلك من المطلوب. عادةً ما تبدو هذه المحددات (selectors) موضوعة على وسم <body>، لذا كنت أبحث هناك.

أحاول إنشاء شيء متكامل مع مكون السمة Discourse Category Banners (الجميل) الذي أنشأه @awesomerobot، لذا لا أعرف ما إذا كان بإمكاني تحقيق ذلك بناءً على مخرجات HTML، لكنني سأحاول التلاعب به.

إعجابَين (2)
5

يمكنك استخدام JavaScript لتعيين فئات على عناصر HTML العليا بدءًا من .group.

إعجاب واحد (1)
6

نعم، يبدو أن هذا ما تم فعله في Discourse Category Banners للحصول على المحتوى الصحيح أعلى #main-outlet. من المرجح أن تبقى الجافا سكريبت الإضافية في قائمة الرغبات/المهام الخاصة بي لفترة طويلة، وسأقوم بما يمكنني فعله باستخدام 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>

المشكلة هي أن الكلاس يبقى موجودًا بمجرد التنقل بعيدًا. نحتاج إلى طريقة لإزالة ذلك الكلاس عند مغادرة الصفحة. ربما توجد طريقة سهلة للقيام بذلك، لكنني لا أعرف JavaScript حقًا، لذا فأنا لست بارعًا بما يكفي لاكتشافها. آمل أن تتمكن من إيجاد طريقة أفضل للقيام بذلك، لكن الطريقة غير الأنيقة هي تغيير نهاية السكربت إلى

    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(() =>{

الكود أدناه يحقق ذلك باستخدام ملف تعريف ارتباط (cookie) ويجب أن يضيف ويحذف تلقائيًا الفئة "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>