I pushed a little upgrade just now. No new feature but I added the compatibility with the new thumbnails functions.
The theme component is now fully compatible with these components:
4 Likes
I love it, so clean. @Steven I was wondering if its possible too add with CSS this native feature when you click in total replies?
Not with css but the template can be corrected.
I personally only use this feature to access the first post but I shouldn’t impose my way of navigating to everyone. I’ll see if I can reinstore the feature
2 Likes
I upgraded the component to reinstore this feature, I tested on two supports but if there’s any issue let me know
2 Likes
Hey @Steven, it seems that the new messages notifications are shown twice. Once on the right of the topic title, once instead of the reply counter. Is that a bug or am I missing something here?
Very nice mobile topic view by the way. My users like it.
1 Like
It must come from the last update with the topic entrance button. I think it’ll be better to go back to the previous version. It’s not really adapted to the component.
I’ll upgrade in a few minutes
edit: Upgraded just now, let me know if it’s better
1 Like
Yes it works perfectly now, thank you it was fast 
1 Like
I think you shoud remove the tag emoji you added in front of the tag list:
It looks different on different os:
It may not fit the forum’s design, and it should honor desktop design choices (where there is no icon by default)
If you actually add a tag icon with tag icons component, it will look like this:
So I hid the emoji with CSS, but I think it shouldn’ be here in the first place 
How it is displayed on my forum now:
.md-tlm .discourse-tags::before {
display: none;
}
.md-tlm .tl-replies {
margin-right: 8px;
}
1 Like
Thanks for the feedback, I have major internet issues so I’m a bit behind on all discourse work.
I like the idea of the tag icon or emoji, but I’ll probably change the two theme components to a d-icon tag. At the same time, I’ll create a branch without any icon for a compatibility with the tag icons component
1 Like
Hi Steven!
It seems there are a few layout issues with the current version of Discourse.
I have created an empty theme and just included the MD Topic List Mobile Component and this seems to be indeed the problem.
Here’s the mobile view:
There’s something odd with margins/paddings.
2 Likes
Thanks, I’ll look into it right now.
I’ll try to rewrite the template to remove the maximum of custom classes too, I think it’s best with the redesign in progress in core.
edit: New commit, I did a rewrite of the template and stylesheet to make it easier to update in the future.
Let me know if you have any issue @Canapin
4 Likes
Seems perfect. Thank you!
1 Like
Can we add total topic likes and views next to the reply count?
1 Like
It’s doable
I don’t know if I would put this in the default settings, but if you want to try it, here is the code to add in the header section
{{d-icon "eye"}} {{number topic.views numberKey="views_long"}}
and
{{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
For my screen, I used this:
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
{{~raw-plugin-outlet name="topic-list-before-columns"}}
<div class='right'>
<div>
{{!--
The `~` syntax strip spaces between the elements, making it produce
`<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
with no space between them.
This causes the topic-post-badge to be considered the same word as "text"
at the end of the link, preventing it from line wrapping onto its own line.
--}}
{{~raw-plugin-outlet name="topic-list-before-link"}}
<div class='main-link'>
{{~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}}
{{~#if expandPinned~}}
{{~raw "list/topic-excerpt" topic=topic~}}
{{~/if~}}
</div>
<div class="topic-item-stats clearfix">
{{#if hideCategory}}
<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>
{{else}}
{{~raw-plugin-outlet name="topic-list-before-category"}}
<div class='category'>
{{category-link topic.category}}
</div>
{{/if}}
<span class="comments">
{{d-icon "eye"}} {{number topic.views numberKey="views_long"}} {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
</span>
{{discourse-tags topic mode="list"}}
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="pull-right">
<div class="last-post-avatar">
<a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
</div>
<div class='num activity last'>
<span class="age activity" title="{{topic.bumpedAtTitle}}"><a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
</div>
</div>
</td>
</script>
4 Likes
The eye is not showing. I added the script you posted to a new theme-component extension addon to your main theme.
For some icons, you need to register the font awesome character that goes with it.
Check the setting svg icon subset and add fa-eye
2 Likes
Thanks that fixed it. I thought I had added ir but must have forgot to commit the change. 
It all woks well in Stable. But test passed seems to not display views or likes. even in preview to ensure other components are not interfering with things like Air Theme. Your base component wirks as intended. The extension does not show views or likes.
Sorry but what the red icon means? It’s like tag or something?
Can we use awesome icon instead, to keep the armony with the rest of the forum? 
Thanks for sharing!
I had some trouble with the d-icon tag in case there were no tags.
I’ve tried a new solution right now, I’ve push an update, to use font-awesome icon instead of an emoji, let me know if it works well
edit : reverted, it works on desktop but not on mobile
If you want to try it, this is the css you can use
.topic-list .topic-item-stats .discourse-tags::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f02b";
margin-left: 5px;
margin-right: 2px;
}
1 Like