Clickable Topic Component

This component makes the entire area of a topic-list-item clickable, as opposed to just the topic title.

Thanks to @Johani :raised_hands: for this code and functionality. I’m just the messenger :smile_cat:

Install this theme component

29 Likes

Thank you so much, very needed thing! :heart:

2 Likes

That is a very helpful component! Should be from user experience point of view built into Discourse, but that is my opinion.

Anyways, I’m stuck in trying to make the same logic work for Categories. I wanted to do it with api.modifyClass but seem to miss the crucial part. Can you please help me?

I have this setting for my desktop page:
image

Basically the red box on the left should be clickable:

Or to have a perfect picture what I want to achieve: recreating the Blizzard Forum design, cause I like it a lot:

Appreciate any help here.

While waiting for a response I also found the components page here:

And tried different ideas but it seems my hook is not even available? Or I’m missing something!? :slight_smile:

Glad you like the component!

Thanks for the suggestions :grinning_face_with_smiling_eyes:

At the moment this component is only designed to work for Topics in a topic list.

1 Like

If you want to experiment and fork this component, you are welcome to do so :+1:

As a starting point to get a category to be clickable, I would suggest looking through the code in this component that does so by modifying the topic-list-item component inside Discourse core.

You could try creating a new file within this same folder which targets one of the many types of category layouts included in our components, making sure to target the same category page style you have selected on your forum.

Some of these are listed in their locations below…

app/assets/javascripts/discourse/app/components/categories-and-latest-topics.js
app/assets/javascripts/discourse/app/components/categories-and-top-topics.js
app/assets/javascripts/discourse/app/components/categories-boxes-topic.js
app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js
app/assets/javascripts/discourse/app/components/categories-boxes.js
app/assets/javascripts/discourse/app/components/categories-only.js
app/assets/javascripts/discourse/app/components/category-list-item.js

1 Like