Clickable Topic

theme-component
,
1
: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 theme-creator.discourse.org
: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

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

preview

44 Likes
2

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

2 Likes
10

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:

image
image1474Ɨ153 29.6 KB

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.

11

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:

12

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
13

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
14

The preview does not work anymore

2 Likes
15

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

2 Likes
16

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

Screenshot 2023-08-07 at 10.56.48@2x
Screenshot 2023-08-07 at 10.56.48@2x2880Ɨ942 285 KB

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

18

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
19

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
20

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
21

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

2 Likes
22

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

1 Like
23

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
24

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

1 Like
25

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