Discourse Topic Cards

[chapoi (Charlie)]

	Summary	Restyle the topic list to display as cards with a thumbnail
	Preview	Theme Creator
	Repository	Discourse Topic Cards
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

This component takes inspiration from Topic Thumbnails, simplifies the use, adds excerpts & full-card clicking, and sprinkles some extra CSS magic.

Notable features

• Make full card clickable (exception for the original poster avatar)
• Show the excerpt
• Show a topic thumbnail, if available
• Show published date
• Trim away some metadata and make likes more prominent

Desktop

Mobile

---

I haven’t widely tested the component yet so if you find bugs , please report (with browser/device specifications )

[Moin]

The vertical blue line covers parts of the text

(Seems not to depend on browser/device, I tried Edge/Windows, Chrome/Android and firefox/Android)

[frold]

worked out of the box in chrome on windows and chrome at iphone 8

[chapoi (Charlie)]

@Moin

The vertical blue line covers parts of the text

Right, forgot this. Will fix – thanks

[jayme]

how do I get rid of the “replies” and the “activity” tabs under the “+New Topic” button?
its making my topic exert really short and it looks bad haha

[Lilly]

Hi @jayme, it look like those tabs are not part of this component and are likely put there by another theme component or plugin. When I load a test forum with this component, those tabs don’t exist, nor do they show in the screenshots in the OP. You may have to disable other components to find which one, then if there is no setting for those tabs you may have to disable it.

[chapoi (Charlie)]

Border/box-shadow doesn’t work well with cards, so had to improvise a bit to get a replacement indication

UX: replace border with text colour on select with keyboard

[Moin]

@chapoi

so had to improvise a bit to get a replacement indication

Somehow I don’t see any indicator now

[chapoi (Charlie)]

Are you using the j/k commands to navigate?

[Moin]

No, I just used Tab. Well I actually used my tablet. After I used the back button, the post is usually highlighted. That didn’t happen here. I only tried this on the computer for the recording.

[derak (Cristian Deraco)]

awesome theme component!

[Gonerdot]

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

[chapoi (Charlie)]

Hmmm… difficult to say. It looks like somehow the height of the cards is constrained, and the content bigger than usual.

Can you first verify it’s not due to a conflict with other components or theme? I see you also have the right sidebar enabled and that could affect some size calculations maybe.

So please check that and let me know?

[Gonerdot]

I disabled all other components, but the problem did not solve.

[chapoi (Charlie)]

Odd! Can I have a look at the forum youve installed it on?

[Gonerdot]

BearBlog

But you need to change the theme to dracula in your profile settings.

[chapoi (Charlie)]

Thanks, Ill have a look!

[Gonerdot]

It seems to me that the problem can be solved by limiting the number of characters in the preview, but I don’t know how to do this

[chapoi (Charlie)]

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

I can’t say why yours is not fitting well, because in the example on theme creator I can also uses multi-line titles and still fits:

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.

A possible solution is, as you said, limiting the title to only take 1 line, which you could do by adding this css:

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;
      
     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}