Add icons for Views and Replies, and Last Activity date in Topic Cards

The Topic Cards offers a simple and yet beautiful and usable way to render topics in main pages. However, there is room for improvement in the metadata it presents.

  • It only shows Likes. Meanwhile, the also official Topic List Thumbnails shows very elegantly icons for Views, Likes, Replies, and the Last Activity is also rendered neatly together with these icons.
  • It shows the publication’s date instead of the last activity date, which is inconsistent with Discourse’s default behavior and might cause confusion top users (“why is this topic at the top if it’s so old?”)

image

The solution could be simple UX-wise: render the metadata in Topic Cards just like it is being rendered in Topic List Thumbnails. Same code, if possible. More consistency, and theoretically less maintenance work.

See for comparison:

Topic Cards

See the publication date on the left and the :heart: on the right.

Topic List Thumbnails

Same topic. Double the data shown and yet it doesn’t add clutter, and the date corresponds to the last activity, not the publication date, just like Discourse’s default does.

image

5 Likes

You can refer to the fkb theme, I have made additional customizations and created a theme template for private use at https://businesslab.vn

1 Like

To make this suggestion simple, I’m proposing to refer to one official component (Topic List Thumbnails) to improve another official component (Topic Cards). Adding third party themes or components to the mix complicate things, no matter how good these external components might be. :slight_smile:

I personally prefer to stay with the Default theme and build on top of it. We might be settling on the Graceful theme only because it offers more design flexibility with background / floating areas. Topic Cards complements well the principles of the Graceful theme and doesn’t add more features that (in our case) we don’t need.

1 Like

This sounds like a good improvement to me. We don’t have bandwidth to take this change right now, but I am marking this as pr-welcome, meaning, we’re happy to review a contribution from the community making the proposed change here.

Thanks for the suggestion @icaria36.

5 Likes

Great! @RGJ and I have started to discuss a PR.

5 Likes

:+1: PR here Add icons for Views and Replies, and Last Activity date by communiteq · Pull Request #13 · discourse/discourse-topic-cards · GitHub

image

5 Likes

Thank you very much, @RGJ!

We have deployed this version on https://podkasts.org and we have tested it on desktop and mobile.

We added some extra CSS (locally, separated from @RGJ’s component version) to

a) Remove “Published” (see my reasoning for this change above)
b) Make it work better with the Graceful theme (which introduces a left margin that limits the space on mobile).

The end result is just exactly what I we wanted. :tada:

3 Likes

I think it would be a good idea to add a setting to enable showing/hiding the extra metrics. The original design intended to be more minimalistic by stripping some of the content, so I would like to be able to keep the that intent.

2 Likes

I’ll add a setting later this week, defaulting to not showing the views and replies.

2 Likes

I have added these settings, each icon + number can be now shown or hidden.
The original behavior is the default.

See Add icons for Views and Replies, and Last Activity date by communiteq · Pull Request #13 · discourse/discourse-topic-cards · GitHub

2 Likes