MD Topic List component

Thanks for reporting, it is fixed now. You can upgrade the component and reactivate it

3 Likes

Ah, ty for the quick fix man! It’s working like a charm now :slight_smile:

I have updated to the newest version and my avatars are gone (2.4.1).
I had to disable this component for now.

You need to upgrade Discourse also and it will be fixed

2 Likes

Unfortunately for me, that means lots of upgrades (18 custom plugins) so I tend to update once every 3-4 months. I guess I am out of luck :smiley:

Anyway to access the previous version?

You can edit the component directly and change the header part and paste this. It will use the older version

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span> &nbsp;
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script>
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});
   
})();
</script>
3 Likes

Thank you for that :smiley:

1 Like

I created a specific branch for those who don’t want to edit the component and can’t upgrade their discourse forum right now

You can install a new component, use the advanced settings

Repository containing theme: https://github.com/iunctis/md-topic-list
Branch name: bf-20200323

image

You’ll have the component compatible with the version Discourse older than march 23, 2020. Before this commit

2 Likes

I was playing a bit with the topic list presentation on mobile, it still needs some work but would you be interested with something like this (it would be a separate component):

image

The current topic list mobile presentation:

image

The avatar still opens the user card, the date links to the last post

5 Likes

I definitely would, would be a nice addition especially since the layout for mobile and desktop would be similar instead of looking totally different :slight_smile:

The preview link doesn’t work. When I try to access, I get this error message:

Access Denied

while trying to load /theme/Steven/md-topic-list.json

Something went wrong.

1 Like

Sorry about that, I cleaned up my Discourse theme pages earlier but I cleaned a bit too much :broom:

It should be fixed now, thanks for reporting!

2 Likes

Hey @Steven

I am on 2.4.1 already, yet my avatars are still gone. See my topic preview screenshot her

Have you tried this branch?

If you have a Discourse version older than march 23rd, you need to use this branch until you upgrade your forum:

1 Like

Is anyone running this theme component in combination Topic List Previews plugin. Or is it causing issues after all?

I am currently using Sam’s minimal theme, but it’s not working with Topic List Previews at its current state. So I am considering switching to be able to have both: Minimalistic topic list and image previews of topics

It’s expected, the topic list previews plugin override the topic list items templates, so as this theme component. I think the plugin has the edge over the theme component, so I think the best way to has both is to fork the topic list previews plugin and customize the templates.

I did a customized fork myself if you want to check how it can be done : GitHub - iunctis/discourse-topic-previews
These changes specifically - version iunctis.fr · iunctis/discourse-topic-previews@6905fce · GitHub (I don’t really recommand this version to your forum because I have a customized theme that comes with it, and I changed a few things in the tiles most users wouldn’t like)

The desktop templates in the original plugin are here, this is the best way to start : discourse-topic-previews/assets/javascripts/discourse/templates/list at master · paviliondev/discourse-topic-previews · GitHub

It’s totally doable but you need to be a bit confortable with github (to stay up to date with the plugin) and template customization.

I pushed a little upgrade just now. No new feature but I added the compatibility with the new thumbnails functions.

The theme component is compatible with these components

3 Likes

Hi, it is compatible also with this plugin? Topic List Previews
Thank you,
Deb

Sadly not since we edit the same file.

You can make both work if you change the header code, and integrate tiles style with my modifications but it require some understanding of how this works.

You can use some inspiration in my old custom version of the topic list preview (it was before the official thumbnails theme component, so it may not work at the moment) : discourse-topic-previews/topic-list-item.hbr at master · iunctis/discourse-topic-previews · GitHub
But it used different css class and alignmnent for some things, this may not work with your forum.

2 Likes