Can it be done with CSS? Grouping categories on category page

مطور
1

What I’d like to do (as I know there’s no baked in setting or feature set) is use CSS to group categories on the home page.

I’m not looking to nest categories, but just group some together and possibly put a header on them. I know the individual categories can be “separated” with padding, and I know each category can be targeted by category ID or category name. So what I’m hoping is to be able to replicate something that looks like this:

image

I realize for simplicity, the categories would have to be in their sorted order, and each category targeted by catediry_id, but I’m thinking that there’s possibly some CSS that can throw padding after one category or before another.

The big question is there the ability to insert some text in the padding to create a header?

The propose of this is to first break up the long category list view, but separate: example

  • category 1-2 under “staff” header

  • Category 3-4 under “community resources)

  • categories 5,8,11,12,13 “under general discussion categories”

I don’t want to make these sub categories, I like the structure and category system just as it is. All I want to do is display the categories a little differently on the categories view page. Ideally this is just a visual layout, NOTHING to change with the library structure of the platform.

Any idea how to make this happen?

This would be kind of a game changer for my work collaboration site’s layout.

Sam, codinghorror, do you think there would be a way to create a grouping step in the category reorganization menu that could do this natively, say as an option (grouping on/off).just put the categories in order within main page grouping and it could automatically separare them. In core, plugin or a theme component?

3 إعجابات
2

anyone? buehler.

feedback appreciated

3

This kind of stuff is possible in a theme component but extremely complicated. I think you would need to override templates which makes this also pretty fragile.

4 إعجابات
4

A bit late :smile: but maybe someone else needs it. I must mention that:

  • Not all the CSS code is required, especially the borders and the background colors for table rows, so feel free to adjust them as you like.
  • I had to change the layout from the regular table into flex cause you can’t have negative margins on table rows and other layout issues, and well…is more flexible :smile:
  • Replace Category Group 1 and Category Group 2 with your desired category group names
  • In my example I’ve used the category ID’s 2 and 4, so using chrome dev tools to inspect ( see pic below), find the right category id and replace [data-category-id="2"] and [data-category-id="4"] in my example with your id(s).

image
image829×290 17.9 KB

Paste this inside the Common tab:

.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Paste this inside the Desktop tab:

.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

And this inside the Mobile tab:

body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

And this is how it looks on desktop and mobile resolutions:

desktop-category-group
desktop-category-group659×837 73.3 KB
mobile-category-group
mobile-category-group453×1061 52.3 KB

10 إعجابات
5

Hi Cos
]very interesting; thank you for sharing. in the same spirit (that of obtaining a better presentation, we are trying to put, in front of discourse, a wordpress page with a specific presentation and we would like to "send on this page, category names, for example those which have received a response , those chosen by the user, or then a determinate category; do you think this is possible and if so how?

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

I’m afraid you can’t do that just by CSS. Maybe the WordPress Discourse plugin is what you need. In addition to this, the wp discourse shortcodes is also a must.
We are already using it on our WordPress website and it works great so far. This is how the plugin looks in the sidebar widget:

image
image454×664 52.5 KB

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

@sam, @cosdesign’s response works. is there any way to bake this into core’s menus so users can leave it off by default, but then set the headers in the admin panel for group header titles, and in each category’s attributes page, select from a dropdown of the enabled section headers from the admin panel so the category just falls under the header.

This shouldn’t be terribly difficult to add to the platform and would really improve large multi user role and group, multi category installations

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

هذا النوع من التجميع مدعوم الآن في نواة Discourse:

اختر “الفئات الفرعية مع المواضيع المميزة” كـ “نمط صفحة الفئة لسطح المكتب”:

لقطة شاشة 2022-03-07 في 10.25.34
لقطة شاشة 2022-03-07 في 10.25.341346×654 53.9 KB

ثم ستبدو صفحة الفئات الخاصة بك شيئًا كهذا:

صورة
صورة2440×1758 306 KB

5 إعجابات
10

هل من الممكن فعل ذلك باستخدام RTL؟ لقد حاولت لكنني فشلت :broken_heart:

11

هذا منطقي. يتم قلب أنماط Discourse الأساسية لإنشاء إصدار RTL هنا: discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub. لا أعتقد أن ملفات CSS التي تضيفها السمات يتم تجميعها لإنشاء إصدار RTL. إذا كان هذا صحيحًا، فهذا يفسر المشكلات التي واجهتها مع السمات عند استخدام تخطيط RTL.

يمكنك تأكيد ذلك عن طريق إضافة بعض قواعد CSS التي تحتوي على اتجاه إلى سمة موقعك، ثم زيارة الموقع بلغة RTL ومعرفة ما إذا كان الاتجاه قد تم قلبه. لا أعتقد أنه سيتم قلبه.

على سبيل المثال، إذا أضفت هذا إلى السمة الخاصة بك:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: right;
}

لا أعتقد أنه سيتم تحويله إلى هذا:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: left;
}
12

أتفق معك، ما زلت مرتبكًا بشأن استخدام الكود أعلاه :confused:

أي اقتراحات؟

13

هل تعرف مثالاً لموضوع لا يعمل مع RTL؟ إذا كان الأمر كذلك، فانشر رابطًا للموضوع هنا وسأختبر نظريتي وأشرح ما يحدث خطأ بعد اختباره.

تعديل: إليك شرح للمشكلة:

بالنسبة لملفات CSS الموجودة في قاعدة كود Discourse الرئيسية، يتم إنشاء CSS الخاص بـ RTL عن طريق “قلب” معظم قواعد CSS التي تعتمد على اتجاه تخطيط الموقع. على سبيل المثال، يتم قلب padding-left إلى padding-right. يتم ذلك باستخدام أداة RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

المشكلة هي أن سمات Discourse لا يتم قلب قواعد CSS الخاصة بها. هذا يعني أنه إذا كان للموضوع قواعد CSS تحدد اتجاهًا، فسيكون الاتجاه هو نفسه عند استخدام لغة RTL كما هو الحال عند استخدام لغة LTR. إليك مثال بسيط على ذلك:

عند استخدام السمة مع واجهة RTL، لا يتم قلب padding-left: 8px; إلى padding-right: 8px; هذا يسبب مشكلة بسيطة في المحاذاة. أنا متأكد من وجود أمثلة لمشاكل أكبر تحدث عند استخدام السمات مع لغة RTL.

وينطبق الشيء نفسه على أي CSS تضيفه إلى سمة Discourse افتراضية في محرر السمات. إليك مثال باستخدام الكود من هذا الموضوع: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

هذه قاعدة من CSS تقوم بتعيين اتجاه:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // this needs to be changed
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

مع لغة RTL، هذه هي المشكلة:

image
image863×676 57.5 KB

إذا كانت هذه القاعدة في ملف CSS أساسي لـ Discourse، فسيتم تحويل left: 0; تلقائيًا إلى right: 0; عند تحديد لغة RTL. نظرًا لأن CSS تتم إضافته إلى سمة، تحتاج إلى تعديله يدويًا إلى هذا:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // changed to the proper position for RTL layouts
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

يضيف Discourse فئة rtl إلى علامة html عند استخدام تخطيط RTL. يمكن لمطوري السمات استخدام هذه الفئة لجعل سماتهم تعمل مع كل من تخطيطات LTR و RTL. هذا يعمل، وأعتقد أنه صحيح، ولكن ربما لا تحتاج عبارة left: auto إلى أن تكون هناك.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Fix positioning for rtl layouts */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

لست متأكدًا مما إذا كان يجب على المطورين اتباع هذا النهج مع سماتهم. إنه يستغرق وقتًا طويلاً ويمكن أن يؤدي إلى أخطاء ومشكلات في الصيانة. ربما يمكن لـ Discourse تجميع بعض السمات التي يمكن أن تفكر في توفير إصدار RTL. قد يكون من المفيد اختبار هذا النهج مع عدد قليل منها:

require "rtlcss"

Rtlcss.flip_css("theme_css")

كان من المفترض أن يكون هذا إجابة قصيرة :slight_smile: إذا كان ما كتبته صحيحًا ولم يتم التعامل معه في موضوع آخر، فربما يجب نقله إلى موضوع جديد.

14

قد تفعل هذه Theme component ما تريده. أو قد تكون أساسًا جيدًا للنظر في الكود للحصول على أفكار.

“صناديق الفئات + المجموعات الحديثة” كما هو مستخدم في سمة Air تعمل بشكل جيد.

Screenshot_20240302-030928
Screenshot_20240302-0309281080×2400 122 KB