User stream item templates needs some update

Hello,

I noticed on these plugins the user-stream-item templates need some update (maybe there are other plugins too)… to fit to the core changes.

Discourse Follow plugin
https://github.com/discourse/discourse-follow/blob/main/assets/javascripts/discourse/templates/components/follow-feed-post.hbs

Discourse Reactions plugin

Now it looks like this :arrow_down_small:

This is the expected :arrow_down_small:


There was a fix on the core user-stream-item template few month ago which changed the elements order and added some new classes.


Thank you :slightly_smiling_face:

3 Likes

If someone need a quick workaround I made some css modification to order these elements to the correct place. :slightly_smiling_face:

Common > CSS

.user-stream {
  .item, 
  .user-stream-item {
    // adding the exclusion doesn't matter much
    // except that it won't add these to the current core style
    .info:not(.user-stream-item__header) {
      display: flex;
      align-items: flex-start;
      .stream-topic-details {
        order: 1;
        flex-grow: 1;
      }
      .expand-item,
      .collapse-item {
        order: 2;
      }
      .time {
        order: 3;
      }
    }
  }
}
1 Like

Thanks for the report @Don! It looks like the reactions/follow plugins originally copy/pasted the HTML structure from core, and so they were both depending on the old CSS.

I think we can make things cleaner by re-using core’s <UserStreamItem> component in both plugins:

This will add a bit of extra core customizability: DEV: Add `{{yield}}` to user-stream-item for plugins/themes by davidtaylorhq · Pull Request #20791 · discourse/discourse · GitHub

Fix for reactions: UX: Re-use UserStreamItem from core by davidtaylorhq · Pull Request #217 · discourse/discourse-reactions · GitHub

Fix for follow: UX: Re-use UserStreamItem from core by davidtaylorhq · Pull Request #91 · discourse/discourse-follow · GitHub

4 Likes

This topic was automatically closed after 37 hours. New replies are no longer allowed.