Clickable Topic

:discourse2: Summary Clickable Topic makes the entire area of a topic-list-item clickable, as opposed to just the topic title.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-clickable-topic
:open_book: New to Discourse Themes? Beginnerā€™s guide to using Discourse Themes

Install this theme component

Features

preview

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T12:48:31Z

Check documentPerform check on document:
46 Likes

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

3 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

3 Likes

The preview does not work anymore

2 Likes

I think that should be okay now. :slightly_smiling_face::+1:

2 Likes

Broken now.

We relied on this component to make Categories + Latest view (default in our case) topic cards clickable. Since todayā€™s update to the latest 3.1.0beta8 (now it shows as 3.2.0.beta1-dev), the component stopped working correctly.

Now the active state of the cursor remains as clickable, but topic area is not clickable. With browserā€™s console opened thereā€™s an error, which may help developers to identify the problem:

Uncaught TypeError: this.router is undefined

function navigateToTopic(topic, href) {
    if (this.siteSettings.page_loading_indicator !== "slider") {
      // With the slider, it feels nicer for the header to update once the rest of the topic content loads,
      // so skip setting it early.
      this.appEvents.trigger("header:update-topic", topic);
    }
    this.session.set("lastTopicIdViewed", {
      topicId: topic.id,
      historyUuid: this.router.location.getState?.().uuid
    });
    _url.default.routeTo(href || topic.get("url"));
    return false;
  }

The error thrown for line:

historyUuid: this.router.location.getState?.().uuid

May it be related to Ember upgrades planned/ongoing in the core?

Hi @kinetiksoft - I havenā€™t been able to reproduce the problem on my end. The theme component seems to work well against the latest version of Discourse. Using the ā€˜preview on theme creatorā€™ link in the OP here seems to work as well.

Could you share a link to a site with the problem? Perhaps there is clash with another theme/plugin.

2 Likes

Thank you! Iā€™ve PMā€™ed you a link to the community in question. Itā€™s not appropriate to share it in public.

1 Like

Thanks @kinetiksoft! Looks like the problem happens when the theme component is used alongside the ā€˜categories + latestā€™ view (which you have configured as your homepage).

Iā€™ve made a PR which should solve the problem.

Iā€™ll post here once itā€™s merged, and then youā€™ll need to update your forum to the latest version of Discourse core.

1 Like

Thank you David! Glad we could help identifying the issue in perfectly working component

2 Likes

All done - so it should take effect next time you update to the latest version of Discourse

1 Like

We will do update attempt later this week and I will certainly come back to this topic to report how everything is going. Thank you again!

1 Like

We can confirm the issue has been fixed. Thank you again! :heart:

1 Like

Hi, how can I modify this component to support the Docs plugin?

I am running the latest Discourse 3.4.0.beta2-dev.


Iā€™m not sure if I have something wrong in my set up of this theme component, but all of the body text on the topic on the card is not clickable. If you click just after the text ends on either line, you can activate the card and open the topic.

Any thoughts on what might be causing this?

Thank you in advance for all your help and input. :slight_smile:

3 Likes