# MD Topic List Mobile component

**URL:** https://meta.discourse.org/t/md-topic-list-mobile-component/146341
**Category:** Theme component
**Created:** [March 31, 2020, 8:32pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341 "2020-03-31T20:32:10Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [February 16, 2022, 2:34pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/21 "2022-02-16T14:34:54Z")

</div>

It’s doable

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/f/df19969f1eee44f35190cae5d5db3f116e24ef5f.png)

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:

```plaintext
<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>

```

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [February 28, 2023, 8:51pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/23 "2023-02-28T20:51:44Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/6/b/e/6beb2f7ca6696a0f8dae9bd01f71d1e5a077a861.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 1, 2023, 12:25pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/24 "2023-03-01T12:25:02Z")

</div>

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`

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 1, 2023, 1:39pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/25 "2023-03-01T13:39:03Z")

</div>

Thanks that fixed it. I thought I had added ir but must have forgot to commit the change. 🤦‍♂️

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 1, 2023, 2:27pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/26 "2023-03-01T14:27:33Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [April 30, 2023, 1:59pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/27 "2023-04-30T13:59:03Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [April 30, 2023, 6:03pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/28 "2023-04-30T18:03:38Z")

</div>

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

```css
.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;
}

```

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [December 27, 2023, 11:47pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/29 "2023-12-27T23:47:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [December 28, 2023, 2:31pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/30 "2023-12-28T14:31:18Z")

</div>

Thanks, I’ve pushed an update

You should have the checkbox next to the topic title now

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/6/1/461e3979e43396ed1e2e7996496f2ea37cffafde.png)

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [December 29, 2023, 1:33pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/31 "2023-12-29T13:33:32Z")

</div>

Thanks the issue has resolved for me.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [February 11, 2025, 6:12pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/33 "2025-02-11T18:12:22Z")

</div>

I don’t see a way to make it work with the new glimmer topic list

I think this theme component will be abandoned. For now we can tag it as #deprecated

I may try something new using only Plugin Outlets but it won’t definitely have the same aspect.

---

<div class="post-metadata">

### Author: ![CAX.DO](https://avatars.discourse-cdn.com/v4/letter/c/e9c0ed/32.png) [@CAX.DO](https://meta.discourse.org/u/CAX.DO)
#### Post date: [February 16, 2025, 1:42pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/34 "2025-02-16T13:42:51Z")

</div>

This is indeed a very useful component, especially its appearance, which allows the forum to display more content. It’s truly a pity that it won’t be usable in the future.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 20, 2025, 11:13am UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/35 "2025-02-20T11:13:04Z")

</div>

Huge fan of this component as I find the default mobile view subpar (the last poster’s avatar on the left being the weirdest thing). It would be sad to let it go, unfortunately I can’t code, and neither can chatGPT for this matter 😭

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 20, 2025, 12:55pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/36 "2025-02-20T12:55:31Z")

</div>

I will give it a try!

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 20, 2025, 7:15pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/37 "2025-02-20T19:15:11Z")

</div>

I made a PR 👍

[https://github.com/MonDiscourse/md-topic-list-mobile/pull/3](https://github.com/MonDiscourse/md-topic-list-mobile/pull/3)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [February 20, 2025, 7:32pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/38 "2025-02-20T19:32:46Z")

</div>

Great job!

I didn’t have the chance to try it yet, did you manage to have the topic badge (unread posts) too? I made some tests and the topic badge next to the topic title was not that easy to add

But I’m nowhere near your level

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 20, 2025, 7:40pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/39 "2025-02-20T19:40:02Z")

</div>

@Steven I did not test! With the current modifications, it doesn’t replace anything, so you can expect it to be displayed (but maybe not in the expected place).

EDIT:

Here what it looks like:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/4/c/5/4c59932912664c740c7cdc2f01edcc64b545cbe0.png)

The original view without the component looks like this:

![chrome_4b5W8Pbd7o](https://global.discourse-cdn.com/meta/original/4X/5/c/b/5cb8de544589d799942d8a79729b3c5a8e2b007b.png)

Do you still want to replace the avatar or is it fine as it is?  
Let me see if I can replace the avatar.

EDIT2:

[https://github.com/MonDiscourse/md-topic-list-mobile/pull/4](https://github.com/MonDiscourse/md-topic-list-mobile/pull/4)

![chrome_UEILhfhxua](https://global.discourse-cdn.com/meta/original/4X/f/a/a/faaa45c0bb9065636d41f3fe2019c35948a7ce1a.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [February 23, 2025, 11:17am UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/40 "2025-02-23T11:17:22Z")

</div>

Thanks @Arskshine for the work that you did!

I worked a little on the component, I have a proposition for all of you.

This is the view right now:

![chrome_UEILhfhxua](https://global.discourse-cdn.com/meta/original/4X/f/a/a/faaa45c0bb9065636d41f3fe2019c35948a7ce1a.png)

I worked on an alternative that restore the excerpt and move the topic badge next to the title (sorry the screenshot is in french, but the design is the most important part)

 ![The image displays a text screen detailing various sports headlines, primarily focused on European football matches, and includes sections on news and discussions related to French events. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/d/7/ad75e14552d23f044ef8c55d88b84ee69d5681e0.png)

What do you want for the official version?

---

<div class="post-metadata">

### Author: ![CAX.DO](https://avatars.discourse-cdn.com/v4/letter/c/e9c0ed/32.png) [@CAX.DO](https://meta.discourse.org/u/CAX.DO)
#### Post date: [February 23, 2025, 12:56pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/41 "2025-02-23T12:56:52Z")

</div>

hi @Steven @Arkshine  
Thank you very much for your work. 👍

I have another matter: the two images below are screenshots of the New version and the Old version, respectively. As you can see, the width of the article titles differs between the two versions, which is evident from the line breaks (sorry, the titles are in Chinese, but what matters is the position of the line breaks).

 ![A computer screen displays a forum titled "Computer Aided Everything," with a highlighted "New version" post and a sidebar listing various topics in Chinese. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/1/5/8/15888e19e7daf96e7c1a6a7e6a4aedbde4699f55.png)  
 ![The image displays a website or webpage titled "Computer Aided Everything" featuring a highlighted search term "Old version" in red, with a list of posts related to computer-aided design (CAD), materials, and various topics. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/f/2/0/f20a60ef80b86916730586da3ad0a1e3bee62efc.png)  
 ![The image is a screenshot of a webpage with categories labeled CAD, cfd, Fluid, General, AE, and Theoretical, with corresponding timestamps and icons next to the links. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/9/6/e/96e94b4bcec9d0aa6e63b517851d46be4abf02fd.png)

Is it possible to increase the length of the titles in the new version? One of the purposes of using this component is to display more information.

I don’t know how to code, so my description might not be very professional.

---

<div class="post-metadata">

### Author: ![CAX.DO](https://avatars.discourse-cdn.com/v4/letter/c/e9c0ed/32.png) [@CAX.DO](https://meta.discourse.org/u/CAX.DO)
#### Post date: [February 23, 2025, 1:05pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/42 "2025-02-23T13:05:07Z")

</div>

I tried adding this piece of CSS, and it worked.

```plaintext
td .main-link {
    width: 100%;
    display: inline-block;
}

```

[Previous page](https://meta.discourse.org/t/md-topic-list-mobile-component/146341.md?page=1)

[Next page](https://meta.discourse.org/t/md-topic-list-mobile-component/146341.md?page=3)