Topic Cards

[JammyDodger]

FWIW Entering safe mode to do the bulk actions may be an alternative to disabling the theme component for everyone. Obviously still an extra faff, but possibly less impact on everyone else?

[tknospdr (David Muszynski)]

Yes, that’s what I figured out after I learned about safe mode…

But I’d still rather have the widget exposed.

[DenisDoroshchuk]

Hello,

Thank you for your component! We noticed a problem when using your component on the forum https://community.escapecollective.com/. If you click on the topic title, the SPA reloads (I attached gif with this problem), but if you click on the card outside the title, everything works fine. The problem was discovered because the Guest Gate component was not working properly due to the page reloading.
Here is a suggestion: Guest Gate Theme Component - #154 by Don
Could you please take a look at this issue?

Thank you,
Denis D.

[tknospdr (David Muszynski)]

@tknospdr

Thanks, I added:

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

And it works perfectly with stock ‘Shades of Blue’ palette.

Alright, part 2. How do I edit it to work with 2 color palettes? Looked good till the browser switched to dark mode.

Answering my own question again…

I learned about @media (prefers-color-scheme: light/dark) last night, so all good.

So it appears something has changed with the last round of Discourse updates.
Only the very left edge of my topic cards are now respecting this CSS, I’ve been poking around to try and find what will fix it but so far have been unsuccessful.
Can anyone else confirm and see if they can track down the needed changes?

[Moin]

The problem is the recently added variable for the background color on topics you have read.

I don’t think there is a dev-news about this change. But you can find some information here:

Styling Discourse with variables: Show & Tell

We’ve recently added a lot of css variables to Discourse. These variables make theming and customizing aspects of the UI much easier. For many changes, you will no longer need to target super specific elements in the html, and instead only change a variable. If you are curious about what variables are able to be changed, I suggest you look through the app using this regex → --([a-zA-Z0-9\-_]+): If using a code editor and searching for all instances of the above regex, you should see something …

[tknospdr (David Muszynski)]

So is there a way to suppress that CSS? This has destroyed the way my site looks and as I’m not really a coder in any sense of the word, I don’t know how to get around it.
I looked through the element inspector, and I see the word ‘visited’ on all the broken topics and I see that it’s missing on the one that still looks right.
How do I fix this?

Topic I have not visited yet (no hover):

And with a mouseover:

And the others are broken.

[tknospdr (David Muszynski)]

That was harder to track down than it should have been. (I’m quite sure it’s due to my shortcomings, but still…)

It appears that adding:

.topic-list-item-background-color--visited {
    background: none
}

Has fixed it without any undesired side effects.

[jordan.vidrine]

In your styles, you now only need to change these two variables:

--topic-list-item-background-color
--topic-list-item-background-color--visited

So something like this should work:

:root {
--topic-list-item-background-color: YOUR COLOR HERE;
--topic-list-item-background-color--visited: YOUR COLOR HERE;
}

[tknospdr (David Muszynski)]

How would that account for the differences when changing between light and dark?
Also, I don’t want it to be different once visited, and that doesn’t cover the hover color change.

[jordan.vidrine]

@tknospdr

How would that account for the differences when changing between light and dark?

You can use the css function light-dark()

--variable-name: light-dark(#efedea, #223a2c);

@tknospdr

I don’t want it to be different once visited

You can set them both to the same thing.

@tknospdr

doesn’t cover the hover color change.

Nothing has been done to :hover in core. You’ll just need to make sure to set the variable to what you want when hovering.

[tknospdr (David Muszynski)]

This still isn’t working for me.
This is what originally worked:

// Blend topic card colors with theme
@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

Then after the latest update I added this is it seemed to work, but then stopped:

.topic-list-item-background-color--visited {
    background: none
}

Then, based on what you said here I tried both adding to the current and replacing everything with this:

:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}

There must be another variable that I need to cover hover-visited, because unread threads work right, but visited ones are busted.

[jordan.vidrine]

@tknospdr

--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);

This variable does not exist.

.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}

This should be what you need, hope that helps!

[tknospdr (David Muszynski)]

This is the least amount of lines I could come up with that seems to be working correctly.

// Blend topic card colors with theme
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}

.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}

@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

[RGJ (Richard - Communiteq)]

I have made a PR to this theme component with two additions:

Feature: Suggested topics switch

Adds the setting Show for suggested topics

Makes use of topic cards for suggested topics optional (as described in this feature request)

Feature: Limit to categories

Adds the setting Show on categories

If non-empty, uses topic cards on selected categories only.