# 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:** 1
### 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 31, 2020, 8:32pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/1 "2020-03-31T20:32:10Z")
![The image shows a screenshot of a forum platform with topics including a welcome post for a new forum theme creator's section, along with a couple of other threads labeled as "Junk," indicating that they contain non-essential content. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/e/9/5/e95310e219f8dfa592082147e931f0af49249565.jpeg) After my work on a little redesign on the [topic list pages on desktop](https://meta.discourse.org/t/md-topic-list-component/117694), I worked a bit on a mobile version with some similar ideas like a bigger room for the titles of the topics, a second line with more information and a column dedicated only to the last post. **Compatibility** This theme component is compatible with the tags, featured links functions, and any functions available in the [original topic-list version](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs). Any category style presentation (bullet, bar, box) should work with this component. The theme component has been tested on a few color palettes, it will work with light, neutral or dark themes. Sadly, the theme component might not work with plugins that already changes the topic-list presentation like the Topic List Previews. Let me know if you have any issue ! | | | | | --- | --- | --- | | šŸ‘“ | **Preview** | [md-topic-list-mobile - Preview](https://theme-creator.discourse.org/theme/Steven/md-topic-list-mobile) | | šŸ›  | **Repository** | [md-topic-list-mobile](https://github.com/MonDiscourse/md-topic-list-mobile) | | ā“ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | šŸ“– | **New to Discourse Themes?** | [Beginnerā€™s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | ---
### 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: [April 1, 2020, 4:54pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/2 "2020-04-01T16:54:07Z")
Nice Plugin. Though a general Reccommendation can we have Theme & Components list min Discourse version? I am on Stable branch but do have a test sandbox for 2.5beta. @codinghorror? ---
### 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 1, 2020, 7:09pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/3 "2020-04-01T19:09:11Z")
I just did a specific branch for older versions. When installing, use the link `https://github.com/iunctis/md-topic-list-mobile` the advanced options and add `older-discourse` ![image](https://global.discourse-cdn.com/meta/original/3X/b/7/b734806f8a009bc653c7dfafa203333a56c49631.png) Youā€™ll know if it works if the avatars on the right column works fine. In a few weeks, when the avatars will be broken, youā€™ll just have to reinstall the component without using the advanced option ---
### 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: [April 1, 2020, 7:31pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/4 "2020-04-01T19:31:04Z")
A direct comparison: Default / Component ![image](https://global.discourse-cdn.com/meta/original/3X/0/5/051af69d55c343d4f7f5f0a82d0ab402af3497b1.png) I like the fact that the last poster avatar is on the right. On the default mobile layout, the big avatar just on the left of the topic title screams ā€œauthorā€. Just out of curiosity, I looked at the scss file, any reason for which you didnā€™t use nested syntax provided by scss? ---
### 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: [April 1, 2020, 7:44pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/5 "2020-04-01T19:44:31Z")
> [@Steven](#): > > When installing, use the link `https://github.com/iunctis/md-topic-list-mobile` the advanced options and add `older-discourse` Tried the advanced option. Still says disabled req 2.5 beta2 ---
### 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 1, 2020, 7:56pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/6 "2020-04-01T19:56:22Z")
> [@Canapin](#): > > Just out of curiosity, I looked at the scss file, any reason for which you didnā€™t use nested syntax provided by scss? Mostly because I make more mistakes with nested syntax on css šŸ˜¬ But I could rewrite it in a few weeks when Iā€™m more confident with the topic list design @Heliosurge I edited the about.json file, it should be ok now ---
### 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: [April 1, 2020, 9:47pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/7 "2020-04-01T21:47:42Z")
Thank you for your awesome work. šŸ»šŸ˜ŽšŸ‘āœØ ---
### 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: [May 19, 2020, 8:21pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/8 "2020-05-19T20:21:48Z")
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: > [@Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602): > > discourse2Summary Topic List Thumbnails allows you to show topic thumbnails in topic list views.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-blog) (blog style) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-grid) (grid) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnail-list) (list) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-masonry) (masonry) [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-thumbnails-minimal-grid) (minimal grid)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-topic-thumbnails](https://github.com/discourse/discourse-topic-thumbnails)open_bookNew to Discourse Themes? [Begiā€¦](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) > [@Topic List Excerpts](https://meta.discourse.org/t/topic-list-excerpts-theme-component/151520): > > discourse2Summary Topic List Excerpts allows you to enable excerpts for unpinned topics (by default, Discourse only displays topic excerpts for pinned topics).eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/topic-list-excerpts)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-topic-excerpts](https://github.com/discourse/discourse-topic-excerpts)open_bookNew to Discourse Themes? [Beginnerā€™s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Works great aloā€¦ ---
### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini) #### Post date: [May 24, 2020, 12:38am UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/9 "2020-05-24T00:38:55Z")
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? ![IMG_9783](https://global.discourse-cdn.com/meta/original/3X/c/2/c25836d85f750ad84c54062ba8b3fb12d712476c.jpeg) ---
### 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: [May 24, 2020, 10:12am UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/10 "2020-05-24T10:12:39Z")
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 ---
### 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: [May 24, 2020, 6:48pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/11 "2020-05-24T18:48:29Z")
I upgraded the component to reinstore this feature, I tested on two supports but if thereā€™s any issue let me know ---
### 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: [August 29, 2020, 1:21pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/12 "2020-08-29T13:21:21Z")
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? ![Screenshot_20200829-151127_Chrome](https://global.discourse-cdn.com/meta/original/3X/c/f/cf5a929f8ca156ae03fe143d3a0b373ea2956813.jpeg) Very nice mobile topic view by the way. My users like it. ---
### 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: [August 29, 2020, 6:26pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/13 "2020-08-29T18:26:15Z")
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 ---
### 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: [August 29, 2020, 6:38pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/14 "2020-08-29T18:38:57Z")
Yes it works perfectly now, thank you it was fast šŸ™‚ ---
### 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: [September 20, 2020, 9:11am UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/15 "2020-09-20T09:11:08Z")
I think you shoud remove the tag emoji you added in front of the tag list: It looks different on different os: ![image](https://global.discourse-cdn.com/meta/original/3X/6/7/67f61f989ea24655142861253e99d9febd8e50e7.png) ![image](https://global.discourse-cdn.com/meta/original/3X/0/3/03475d898d7279651d7443688eff29cd0eac93d4.png) 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](https://meta.discourse.org/t/tag-icons-component/109757), it will look like this: ![image](https://global.discourse-cdn.com/meta/original/3X/5/b/5b26d64c90d22cfe50b961a95221cc4af1c3d57d.png) 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: ![image](https://global.discourse-cdn.com/meta/original/3X/b/d/bdeb27b2ca5489b0f1c7133f6486a5d4fc8d10b4.png) ```scss .md-tlm .discourse-tags::before { display: none; } .md-tlm .tl-replies { margin-right: 8px; } ``` ---
### 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: [September 29, 2020, 2:07pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/16 "2020-09-29T14:07:11Z")
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 ---
### 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: [December 6, 2021, 4:43pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/17 "2021-12-06T16:43:14Z")
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: ![image](https://global.discourse-cdn.com/meta/original/3X/1/4/149ca2e279ec9a1bfa8711260f3e86dde89eb07e.png) Thereā€™s something odd with margins/paddings. ---
### 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 6, 2021, 6:52pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/18 "2021-12-06T18:52:19Z")
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. [https://github.com/MonDiscourse/md-topic-list-mobile/commit/aee37cf5171492d18df1ad254cf73ce7699aa8e7](https://github.com/MonDiscourse/md-topic-list-mobile/commit/aee37cf5171492d18df1ad254cf73ce7699aa8e7) Let me know if you have any issue @Canapin ---
### 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: [December 6, 2021, 10:35pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/19 "2021-12-06T22:35:13Z")
Seems perfect. Thank you! ---
### Author: ![Mr.X\_Mr.X](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mr.x_mr.x/32/126610_2.png) [@Mr.X\_Mr.X](https://meta.discourse.org/u/Mr.X_Mr.X) #### Post date: [February 15, 2022, 8:29pm UTC](https://meta.discourse.org/t/md-topic-list-mobile-component/146341/20 "2022-02-15T20:29:23Z")
Can we add total topic likes and views next to the reply count? [Next page](https://meta.discourse.org/t/md-topic-list-mobile-component/146341.md?page=2)