Discourse Topic Cards

[Gonerdot]

Please tell me what to change in the files to change the location of the tags.
I think the title should come first.

Before:

After:

[manchestermania (Quaerimus Felicitatem)]

Thank you very much for this wonderful TC. The appearance is really modern, simple and looks classy.

one question and request,

Can the search results display also have the same appearance? It would be really nice if the search results display was the same as TC’s display, considering that our users use the search feature a lot.

Once again, thank you very much for this work

[chapoi (Charlie)]

@manchestermania

Can the search results display also have the same appearance? It would be really nice if the search results display was the same as TC’s display, considering that our users use the search feature a lot.

That would be cool but unfortunately it’s a completely different area of the app. So it’s not possible to just apply it there as well. It would basically be a whole new component to achieve that.

[Ahmed26]

@chapoi How can I reduce the image size and subject area?

topic cards are too big

[P_O]

It’s a really great theme component, may I suggest some improvements including adding a settings page to edit the following:

• rounded corners setting value or off
• shadow setting value or off
• Replies, View and Activity enabled/disabled setting
• Show posters true or false

[bloomexperiment (Tracey)]

@Gonerdot

I tried to install this component on many themes, but it looks a little crooked everywhere. What am I doing wrong?

@chapoi

Okay so, the topic-cards need a max-height, otherwise you get issues like:

@chapoi

It might have something to do with the font-size, font-family, or line-height. Unfortunately that will require some individual tweaking, and not something I can apply a fix-for-all for.

Just want to share in case anyone else finds it helpful:

For me, I had the same issue with the max height of the topic card not being large enough if there is a thumbnail – when installing this as a theme component on the Minima theme.

This is the relevant CSS that I used to fix it:

// Increase max height for topic cards with thumbnail
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(The default height seemed to be 210px when I checked in the inspector)

Might need adjusting though – haven’t checked on mobile widths.

Before

After

[Heliosurge (Dan DeMontmorency)]

I was wondering if this could be configured to choose which categories use the topic card would be great if this was used in theme as the topic thumbnails is not as friendly on mobile

Very nice component

[chapoi (Charlie)]

@bloomexperiment

For me, I had the same issue with the max height of the topic card not being large enough if there is a thumbnail – when installing this as a theme component on the Minima theme.

This is the relevant CSS that I used to fix it:

// Increase max height for topic cards with thumbnail
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(The default height seemed to be 210px when I checked in the inspector)

Might need adjusting though – haven’t checked on mobile widths.

Yes, this is what I meant with what I said before: depending on other parameters, 210px might be too small, or 275px might be too large. It’s difficult to have a one-size fits all solution.

I might add in some more settings (such as choosing with category as requested by @Heliosurge) , including maybe a max-size setting so each forum can play with it.