MD Topic List component

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 : https://github.com/iunctis/discourse-topic-previews
These changes specifically - https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (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 : https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

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

4 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) : https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr
But it used different css class and alignmnent for some things, this may not work with your forum.

2 Likes

Hi @Steven i am using your plugin for a while now and i removed activity tab and view tab from topic so i can move both of them below topics like your plugin but i am not successful can you help me out , i just want to add date(activity) like the image below

image

First you need to change the structure of the table and delete the view and activity tabs columns

<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'}}
</script>

You can delete the last line also if you want to delete the replies column


Then let’s takle the big part with the content, first, i’ve deleted the two columns

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

{{~raw-plugin-outlet name="topic-list-before-columns"}}

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

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <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"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#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>
	{{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}}

</script>

Then we add the content we want, I won’t add all the details you need because it requires a bit of work, but it should look like this

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

{{~raw-plugin-outlet name="topic-list-before-columns"}}

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

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <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"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#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>Started <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> by <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span><br>
    <span><a href="{{topic.lastPostUrl}}">Last post {{format-date topic.bumpedAt format="tiny"}}</a> by <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
	{{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}}

</script>

But this is just a first scratch and I didn’t test it, you might need to add some span class, change the date format (using format=“medium” instead of tiny?), but the structure should be pretty much okay

1 Like

really thankyou @Steven , this is actually what i need really appreciate quick response , just one more thing there is no gap between “admin” and Last post" , how to add some space in them

image

I added a <br> weird it didn’t take. You put it in the span tag or use &nbsp; to force some spacing if you’re not comfortable with adding a class element in the span tag.

1 Like

nbsp worked like charm :+1:

@Steven it is working fine on desktop (also added some more data ) but it is not showing on mobile version , can you help

I created a separate component for mobile :

@Steven can we also add “last post by” inside a category box on the index or homepage which is set to categories only

You will need to rewrite a template, there are too many options for me to add this in my component, but it can be done in your customize section

My guess is you should use categories boxes with topics and rewrite this template : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs

@Steven thanks again and one last thing if i choose categories with latest or top topics then i am unable to see the "Last Post BY " on index page but it is visible inside the category sections

image

I’m not sure what templates is used in this scenario, it’s probably on this list : https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components

But I’m note sure which one, my best guess is this one : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs

1 Like

I think it is “categories with topic “ but it is not working , @Steven can you share what i need to add for just “last post by “ below topics