MD Topic List Mobile component

Theme component
21

It’s doable

image

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"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#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
23

The eye is not showing. I added the script you posted to a new theme-component extension addon to your main theme.

Screenshot_20230228-165121
Screenshot_20230228-1651211080×2340 397 KB

24

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
25

Thanks that fixed it. I thought I had added ir but must have forgot to commit the change. :man_facepalming:

26

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.

27

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? :slight_smile:

Thanks for sharing!

28

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
29

Hi, the bulk select option on mobile does not work when this theme component is enabled.

1 Like
30

Thanks, I’ve pushed an update

You should have the checkbox next to the topic title now

image

2 Likes
31

Thanks the issue has resolved for me.