Topic Cards

[huynhthai824 (Sora &\)]

Currently, the homepage is displaying incorrectly on the Samsung S23 Ultra. A single post is causing text to overflow and break the entire layout.

Is this issue caused by the post itself or a theme component bug?

Thank you!

[huynhthai824 (Sora &\)]

I have checked and found that the issue is caused by a Google Maps link in the post.

If the link is in the format maps.google.com, it works fine.

[icaria36]

Is the Topic Cards component getting ready for Upcoming topic-list changes - how to prepare themes and plugins? I just upgraded discourse and got a notice for admins saying that this component needs to be updated.

[david (David Taylor)]

It has already been updated, so you shouldn’t be seeing any warnings. Can you double check that you’re running the latest official version of this component, and not a fork?

[icaria36]

Argh, true! My bad. I had forgotten that we are running GitHub - communiteq/discourse-topic-cards: This changed the topic list into cards with a modified layout, and a thumbnail if available.. https://github.com/communiteq/discourse-topic-cards

@RGJ sorry to bother you, do you know if what’s the difference currently between your fork and the main repo?

[RGJ (Richard - Communiteq)]

@icaria36

sorry to bother you, do you know if what’s the difference currently between your fork and the main repo?

Yes, the main repo has been properly maintained… I will get to this in the beginning of next week.

[eisammy (Dreadwhole)]

Mobile version for some reason are broken when component ‘topic excerpt’ are enabled and without it too ( i’ve two themes with and without this component and both broke) ¯\_(ツ)_/¯ so this css it’s enough

PS: Paste this code at mobile scss from admin dashboard

.topic-card__excerpt-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    white-space: normal !important; 
}

.topic-card__excerpt {
    max-width: 100% !important;
    overflow: hidden !important;
}

.topic-list-item {
    overflow: hidden !important;
    max-width: 100% !important;
    white-space: normal !important;
}

td {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
}

[jordan-violet]

How can this be applied to only a single category, or list of categories, like Topic Thumbnails?

[nolo (Manuel)]

You’d need to add the logic to the component. If that’s not on the official roadmap, then only by forking it.

[jord8on (Jordan)]

Yes, this is something we would definitely need, as well. @jordan-violet did you do what @nolo suggested…

@nolo

You’d need to add the logic to the component. If that’s not on the official roadmap, then only by forking it.

I don’t have the technical know-how to do this.

[jordan-violet]

We went a different direction that we liked more. We’re using Topic List Thumbnails and then we added some of our own CSS to have it look/behave the way we wanted. You can see it in action here:

Topics tagged announcement

[Heliosurge (Dan DeMontmorency)]

Looks good

[jordan-violet]

Hey, that means a lot coming from you! Thanks!