MD Topic List Mobile component

Customization Theme component

AI-generated summary

Steven introduces the MD Topic List Mobile theme component, a redesign of the Discourse topic list optimized for mobile devices. Key features include larger topic titles, a second line for additional information, and a dedicated column for the last post and avatar. The component is compatible with tags, featured links, and various category styles (bullet, bar, box), supporting light, neutral, and dark themes. However, it may conflict with plugins that alter the topic list presentation, such as Topic List Previews.

Early feedback from Heliosurge prompted Steven to create a specific branch for older Discourse versions, allowing installation via the older-discourse tag in advanced options Steven. Canapin provided a visual comparison, praising the right-aligned avatar but questioning the lack of SCSS nested syntax. Steven explained his preference to avoid nesting errors but agreed to refactor for better maintainability Steven. Subsequent updates added compatibility with thumbnails and excerpts components Steven.

Discussions continued regarding UI details. Canapin suggested removing the default tag emoji to align with desktop design choices, leading Steven to rewrite the template and stylesheet for easier future updates Steven. Users requested the ability to display view counts and like counts; Steven provided custom Handlebars code to implement this, noting that specific icons like ‘eye’ require registration in the svg icon subset setting Steven, Steven. A checkbox feature for topic status was also added Steven.

Towards the end, Steven proposed an alternative design that restores the topic excerpt and moves badges next to the title, seeking community preference for the official version. Finally, Steven reported that while the component works on the latest Discourse commits, it triggers a deprecation notice regarding site.mobileView access during initialization, which he plans to address in future updates.

1

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)
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)1080×1353 143 KB

After my work on a little redesign on the topic list pages on desktop, 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 . 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 !
:eyeglasses: Preview md-topic-list-mobile - Preview
:hammer_and_wrench: Repository md-topic-list-mobile
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes
22 Likes
Dracula a Dark Theme for Discourse
How minimal is your forum?
About the avatar position on topic list on mobile
Show both OP and last reply on mobile
Must have plugins and components for Discourse?
MD Topic List component
Third migration, once again for a niche forum (Volkswagen Campers vans)
2

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?

3

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
image928×472 27.3 KB

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

2 Likes
Profile picture next to pinned topics
4

A direct comparison:

Default / Component

image
image862×800 113 KB

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?

7 Likes
5

Tried the advanced option. Still says disabled req 2.5 beta2

6

Mostly because I make more mistakes with nested syntax on css :grimacing:

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

3 Likes
7

Thank you for your awesome work. :clinking_beer_mugs::smiling_face_with_sunglasses::+1::sparkles:

2 Likes
8

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
9

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
IMG_9783523×519 34.8 KB

10

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
11

I upgraded the component to reinstore this feature, I tested on two supports but if there’s any issue let me know

2 Likes
12

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
Screenshot_20200829-151127_Chrome1080×1920 435 KB

Very nice mobile topic view by the way. My users like it.

1 Like
13

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
14

Yes it works perfectly now, thank you it was fast :slight_smile:

1 Like
15

I think you shoud remove the tag emoji you added in front of the tag list:

It looks different on different os:

image

image
image1080×198 23 KB

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:

image

So I hid the emoji with CSS, but I think it shouldn’ be here in the first place :slight_smile:

How it is displayed on my forum now:

image

.md-tlm .discourse-tags::before {
    display: none;
}
.md-tlm .tl-replies {
    margin-right: 8px;
}
1 Like
16

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
17

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
image360×640 37.4 KB

There’s something odd with margins/paddings.

2 Likes
18

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

Let me know if you have any issue @Canapin

4 Likes
19

Seems perfect. Thank you!

1 Like
20

Can we add total topic likes and views next to the reply count?

2 Likes