MD Topic List Mobile component

[Steven]

I’ve pushed a fix

FIX main-link width

[Canapin (Coin-coin le Canapin)]

@Steven

What do you want for the official version?

The 2nd one with the avatar on the right please

I’m glad the component was updated, I’m using it on all my instances.

[Arkshine]

@Steven

I worked on an alternative that restore the excerpt and move the topic badge next to the title

The alternative looks good. Replacing the avatar with the badge is odd, to be honest. I would personally reduce the badge size, but yeah, it sounds good to me.

[joo (slower)]

@Steven

I like this alternative.

[Steven]

Ok I’ve updated the component to try this out. Let me know if you have any issue

Thanks again @Arkshine, without your work I would’ve let it down

[CAX.DO (Max)]

Do you think it’s necessary to display the number of views and likes below the title as well?
Because in the old version, they were displayed.

[Steven]

I don’t think it was, my guess is you added it directly in the component using plugin outlet

I don’t have the code right now, but if you really need it I can help

The base code should be something like this

<script type='text/x-handlebars' data-template-name='/connectors/topic-list-after-category/viewsandlikes'>
  <span class='topic-views'>{{d-icon "eye"}} **code**</span>
  <span class='topic-likes'>{{d-icon "heart"}} **code**</span>
</script>

[CAX.DO (Max)]

Aha, really? I can’t remember if I made any changes either.
Maybe my memory is playing tricks on me.
But thank your help, i’ll change code from my side

[Arkshine]

@Steven

md-topic-list-mobile - Preview

By the way, it looks like the preview link doesn’t work.

[Steven]

Fixed it, thanks

I cleaned up my theme creator page, but forgot to share these components again

[CAX.DO (Max)]

Hi Steven，

When a new article is published, two badges appear after the article title. Is this intentionally set up?

I added a piece of JS code to remove one of them, but it doesn’t seem to work consistently, especially when using different browsers.

Do you have any other good suggestions?

document.addEventListener("DOMContentLoaded", function () {
  const badges = document.querySelectorAll(".topic-post-badges .badge-notification.new-topic");
  if (badges.length > 1) {
    // 移除第二个 badge
    badges[1].remove();
  }
});

[Steven]

I think i’ve got it, i’ve pushed a fix, try to update and let me know if it’s good now

[CAX.DO (Max)]

After the update, it works very well.thank you

[Canapin (Coin-coin le Canapin)]

The online indicator is misplaced

See on the first line

[Steven]

It’s tricky since the whos online plugin attach this indicator to the pull left side (which we deactivated) and the avatar is centered vertically.

I can get closer with these modifications (put these on a css mobile stylesheet), but it’s definitely far from perfect.

.pull-left {
  float: right;
}

html.whos-online-flair.mobile-view .topic-list-item.last-poster-online div.pull-left::before {
  top: -15px;
  left: unset;
  right: -50px;
}

The easiest solution would be to deactivate this indicator on mobile and on the topic list only

html.whos-online-flair.mobile-view .topic-list-item.last-poster-online div.pull-left::before {
  display: none;
}

[clacle]

Hi Max. I wanna show some stuff under the title as well, like the number of likes and views. How did you pull that off?