User stream item templates needs some update

Contribute UX
,

AI-generated summary

Don reported that the user-stream-item templates in the Discourse Follow and Reactions plugins need updates to align with recent core changes, which altered element order and added new classes 18368. The current layout appears misaligned compared to the expected design. As a temporary fix, Don shared a CSS workaround to reorder elements correctly. david acknowledged the issue, noting that both plugins had copied outdated core HTML structures. He proposed a cleaner long-term solution: reusing the core <UserStreamItem> component in both plugins. This approach is being implemented via PRs: 20791 (core customization), 217 (reactions fix), and 91 (follow fix).

1

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
https://github.com/discourse/discourse-reactions/blob/main/assets/javascripts/discourse/components/discourse-reactions-reaction-post.hbs

Now it looks like this :arrow_down_small:

Screenshot 2023-01-31 at 11.49.46
Screenshot 2023-01-31 at 11.49.461102×190 8.54 KB

This is the expected :arrow_down_small:

Screenshot 2023-01-31 at 12.37.49
Screenshot 2023-01-31 at 12.37.491078×146 8.3 KB

There was a fix on the core user-stream-item template few month ago which changed the elements order and added some new classes.
https://github.com/discourse/discourse/pull/18368

Thank you :slightly_smiling_face:

3 Likes
2

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
9

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
10

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