Enhanced category-box display component

discourse-theme-category-homepage

I’ve worked quite a lot on a new category-box homepage for my community’s forum. It’s quite specific for our needs and then may not be useful for a lot of people, but one might take ideas from it.

After/Before


Our specific usecase

We have a community that deal with a lot of broad topics. We federate local NGOs that have their own members, and we do have autonomous groups, each of them are performing one or multiple actions that they need to advertise and they also need a private space to talk about them.

A significant part of our members are old persons and any action that is more than 3 clicks long is very hard for them (so managing notification level the usual way is not doable for them).

The community large enough for us to need a strong sorting system, but the users digital skill and willingness is quite low so we need to keep something as easy and explicit to use as possible.

Topics organization

The top level categories are used as hosts for the community main purposes.
Any topic that does not refer to a group belong to the closest top-level category, and its main points may be labeled with tags. A tag is mostly but not necessarily contained in a top-level category.

Each NGOs and local groups does their announcements in a public subcategory of the most obviously related top-level category and quietly works in a private subcategory.

Thus, a user can easily find all the content about one of our main purpose (top-level category), about one specific topic (a tag that could be transversal to multiple purposes), about one specific group (a public subcategory), etc.

Features

  • Highlight each category to make them feel as whole section of the website.
    • Write with bold font and add an icon to anything one can click on, so it’s easier to focus on the important stuff.
  • Add additional stuff for each category:
    • the usual amount of posts
    • the notification level selector
    • a link “Click here to see all posts relative to that domain” in order to be extra explicit
  • Add tags related to that category
    • add a header to make very explicit these things are the main themes we are discussing about
    • these tags are selected with a theme setting
    • the tags display is made so that tags actually look like tags, so user understand what we are talking about when we use the word «tag».
    • note : the display is enhanced by the Tag icon component
  • Add header to subcategories to make extra explicit that these categories are for announcement, and an other one to make extra explicit that these subcategories are private (yes, there is a lock and any medium level user understands. But…)
    • note : the display is enhanced by the Category icon component
  • Most of these features are toggle-able.

Install

Note : this component is still Work in Progress. I’m still updating it, correcting CSS bug that I’ve propagated elsewhere, etc. Please show mercy and let me know if something looks odd.

Install the component as usual. How do I install a Theme or Theme Component?
Repository : https://framagit.org/oca/discourse-theme-category-homepage.git

Road map for future enhancements

Fix the very large amount of CSS bugs.
Fix the thing that force displaying for separator/header for subcategories even if there is no public or no private subcategory
Do an as-nice category page displaying subcategory boxes and topics.
Update everything as soon as the Discourse team decide that sub-sub-categories might be a thing (I know, let me hope…)

I’m open to new feature suggestions, but I will add them in this component only if they serve my very specific usecase or are very easy to do. Any new feature added will be toggle-able.

26 Me gusta

No problem, that’s done.

7 Me gusta

Thank you so much for creating this great component, it is awesome! :awthanks:

One question; is it possible to have it active with the category setting “Boxes with featured topics”? If not, is that a feature that would be possible to implement, or do you foresee any issues with it?

All the best, and again much appreciated for creating this! :pray:

3 Me gusta

Hey, thanks.
It’s not possible as it is right now (it’s not the same box that is tweaked) but it’s totally something that can be done easily. I can help you doing it if you want to talk by MP, or I might give it a look when I have some time, but for that, I’d need you to give me a sketch of what you’d like (and how stuff would be displayed).

4 Me gusta

Fully understood.

For me, the killer feature with your component is adding the notification status bell for each subcategory, as well as the simple yet powerful way of giving the freedom to change column width. To my use case, making those features available with “Boxes with featured topics” enabled would serve my particular needs brilliantly.

I am a rookie but would be glad to give it a shot to implement. Appreciate any pointers, but will inspect other category box components and hopefully be able to figure out how to do it. I will have time to wrap my brains around this in a couple of weeks and will update here if I make any progress.

All the best.

3 Me gusta

I’ve had trouble to do that but it’s finally not that hard.

In a theme component, modify your handlebar component to have this code:

{{#each categories as |c|}}
  
  ...some stuff before the bell...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...some stuff after the bell...

{{/each}}

If you don’t know how to do it, Johani’s tutorial is a perfect “first place to look”.

And if you find how to do the same with tags, please tell me ! I can’t find a way to do it.

5 Me gusta

@oca I made a recent change in core that causes this theme component’s SCSS to fail compilation. The fix is quite simple, these two lines need to be removed from the stylesheet:

@import "common/foundation/variables";
@import "theme_variables";

(The second line causes a SCSS compilation error because that file no longer exists. Both lines are unnecessary, though, the core and theme variables are now injected before any SCSS file is compiled.)

6 Me gusta

Thanks for the explanations.

That’s removed.

6 Me gusta

¡Buen trabajo! ¿Esto no funciona en móvil?

Móvil

Escritorio

1 me gusta

Ojalá pudiera averiguar cómo hacer que esto funcione en el móvil, se ve genial en el escritorio, pero si no es utilizable en el móvil, entonces es un poco inútil, estoy seguro de que hay alguna forma sencilla, pero no estoy seguro de cómo, ¿alguien tiene alguna sugerencia?

1 me gusta

Disculpe por la publicación múltiple

He logrado juntar Categories Layout Override para que funcione solo en dispositivos móviles

luego, al usar mi versión modificada GitHub - cyanlabs/discourse-categories-layout-override

ahora puedo especificar la anulación como categories_boxes
image
lo que luego fuerza la vista móvil a la vista requerida para que este complemento funcione

Tableta

Móvil

Obviamente no es una solución ideal, pero funciona, así que hasta que alguien tenga una mejor solución, aquí hay una solución alternativa :slight_smile:

9 Me gusta

Gracias por la personalización del componente temático Categories Layout Override, pero ¿puede compartir conmigo la personalización del componente temático Enhanced category-box display component? Visité su sitio web y aprecio su uso de “background-color” para la clase “category-logo”.

1 me gusta

Gracias por las personalizaciones recientes, sin embargo, con la actualización reciente a la versión 3.2.0.beta 4-dev, el componente del tema no funcionó. También espero que la personalización de la pantalla móvil se integre en el núcleo de Discourse. Porque quiero una experiencia síncrona de escritorio a móvil.

1 me gusta

Desafortunadamente, no tengo idea de cómo arreglarlo.

2 Me gusta

Recientemente, al actualizar a la última versión, el componente de tema “página de inicio de categoría de tema de discurso” ya no funciona en dispositivos móviles y sigo recibiendo el siguiente mensaje

Este es mi sitio https://businesslab.vn/categories

1 me gusta

Hola @hoangphuctran93, he movido tu publicación al tema del componente temático correspondiente (cc @oca)

4 Me gusta