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.

[Truest]

1. What about sliding the photo to the right?
   The placement with and without the photo is different and inconsistent.
2. it seems like the bottom text tends to get cut off as some of the content is displayed.

[icaria36]

I was wondering how this theme component looks on the ☁️ Discourse Air Theme, also combining topics with and without images. It looks promising but not there yet. Maybe CSS alone can fix the problems or maybe deeper work is needed.

Looks good on mobile!

I will uninstall it for now, but I’ll keep an eye on this topic because looks very good as intended.

And yes it would be a nice addition taking the category image when the topic doesn’t have an image on its own.

[icaria36]

What would it take for the Topic Cards component to show not only the s of a topic (as it does already now) but also views and comments, like the official Topic List Thumbnails in blog mode does?

Topic List Thumbnails

Topic Cards

Also, I think Topic List Thumbnails’ use of the last activity date (“1d” above) is better than the Topic Card’s “Published” date. Activity date is consistent with Discourse’s default and it provides more information to users. Also, the design implementation fits very nicely next to views, likes, and posts.

In case you care, here’s some additional thoughts after many hours testing combinations between the Default theme, ☁️ Discourse Air Theme, Topic Cards and Topic List Thumbnails, plus quite some CSS tinkering.

I’m settling on Topic Cards + Default theme, spiced up with the Modern Category + Group Boxes which brings cards for categories and fits with the topic cards.

Reasons:

• Topic Cards handles elegantly posts with and without images.
• The Air theme is very cool but Topic Cards plus Modern Category gets pretty much there.
• Staying with the Default theme ensures compatibility with any official theme component out of the box.

[icaria36]

Ok, maybe this question is simpler:

Currently the Suggested topics at the end of any page also shows the topics as cards. While I love the cards in the main pages, I think they are overblown at the end of all pages, and distract from the actual page content or discussion.

Is there a way to show a plain list of Suggested topics (as close as possible to the Default theme) without affecting the topic cards in the main pages?

[chapoi (Charlie)]

Not at the moment, no. But it’s a good ask imo so you can always try making a feature request for it and maybe it will get picked up that way.

[icaria36]

@chapoi

But it’s a good ask imo so you can always try making a feature request for it

Ok, thank you. Done, also for my other request above:

• Don't show Topic Cards' style in the Suggested topics
• Add icons for Views and Replies, and Last Activity date in Topic Cards

And by the way, yesterday I tried this, because I ran into the same problem of content bleeding outside of the cards:

@bloomexperiment

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;
}

Didn’t this mess the mobile view? I just tried it, and it messes it in my case.

[chapoi (Charlie)]

I’ll have a look at that. At the minimum I’ll add a setting for the height, to make tweaking easier. Will set a reminder so I don’t forget.

[icaria36]

Some observations that may help limiting the height of topic cards. I haven’t tested this thoroughly, but it seems that…

• While the description is always limited to three lines, the title might jump to two lines or more. It’s relatively easy for a title to need a second line, and the design could account for this.
• When there are many tags and they don’t fit next to the category, they all jump to a new line below. It would be more natural and space efficient if the tags would always start rendering next to the category, and then let flow in the second line the tags not fitting in the first one.
• “Published [date]” and the are current in a new line under the author. However, the “Published” element could be next to the aligned to the right, in the same row as the author. This would save vertical space on every entry and would reduce the risk of content bleeding out.

Just in case the explanation about the tags isn’t clear. Here you can see how they start in a new line instead of starting next to the category as they do by default:

[eisammy (Dreadwhole)]

This is happening here

[icaria36]

I was wondering whether it is technically possible to force a limit of 1 line to tags, just like there is a limit of 2 lines enforced on the title and of 3 lines on the description.

Most Discourse instances will use 0-5 tags and one line is more than enough for them. Some (like ours) might use tags extensively but we don’t need to see them all on the topic cards. Just seeing the first ones is enough to give an idea.

Adding constraints to the number of lines would make the topic cards more reliable with different image sizes and aspect ratios:

• 1 line for category and tags
• Up to 2 lines for title
• Up to 3 lines for description
• 1 line for author, published, and likes.

[icaria36]

@icaria36

“Published [date]” and the are current in a new line under the author. However, the “Published” element could be next to the aligned to the right, in the same row as the author. This would save vertical space on every entry and would reduce the risk of content bleeding out.

FYI, we are going to tackle this on Add icons for Views and Replies, and Last Activity date in Topic Cards.

[bloomexperiment (Tracey)]

@icaria36

@bloomexperiment

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;
}

Didn’t this mess the mobile view? I just tried it, and it messes it in my case.

Ahh yes I forgot to comment here with my update on that: I had to add that code to just the desktop.scss rather than common.scss

I can’t edit my original comment anymore but I did update it in my theme component: Minima Adjustments for Topic Cards