When new items are added to a masonry grid or the topic-list in this case the current items need to be “reshuffled” and resized in some sense so that everything fits.
Masonry handles that with a native function or .layout() which recalculates the grid and arranges the items when called.
In order to make masonry aware of new items or topics being added to the topic list, I would like to trigger .layout() when this is clicked:
and I would have stopped right there, however @angus was kind enough to provide what I believe is a more orthodox / targeted method for doing this in the context of Discourse here:
This feels like the right way to go about this, thank you so much @angus
I’m not sure how to go about this part:
probably wrapped in Ember.run.scheduleOnce('afterRender', () => {})
But will read further about Ember Voodoo and try again.
For now here’s what I ended up with based on your generous help and my basic understanding:
I’ve been messing with TLP and CSS to try and create a similar effect … but kept coming up against the limitation of the table layout (particularly the row alignment restriction). The use of masonry is great!
Are you able to share the complete inventory of changes for this look, @Johani?
This is a lot more than the images gallery (love that too, though, btw) This is an alternative for the topic list feed, no? Is there a public repository for what’s shown here?
I think the key thing here is that TLP uses a table, just like vanilla discourse, … so looks like I just have to modify topic-list-item and topic-list :
masonry uses css grid presumably, which uses div tags … so I’m going with the assumption these were altered to use div tags … having a go myself but all pointers appreciated! (but I did find this guide which is very handy!)
OK I’ve reached a bit of an impasse:
I’ve edited both
topic-list.hbs: (added to TLP plug-in so I can change tbody to div)