From 5c1da0a0be2f6e45374504261cd61407ba7ee355 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Wed, 24 Apr 2024 19:41:12 +1200
Subject: [PATCH] masonry - on topics too #106

---
 app/templates/topic/show_topic.html | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/templates/topic/show_topic.html b/app/templates/topic/show_topic.html
index a88886f3..9531c9a1 100644
--- a/app/templates/topic/show_topic.html
+++ b/app/templates/topic/show_topic.html
@@ -29,13 +29,20 @@
         {% endif %}
         {% include "community/_community_nav.html" %}
         {% if post_layout == 'masonry' or post_layout == 'masonry_wide' %}
-            <div class="post_list_{{ post_layout }}">
-                {% for post in posts.items %}
-                    {% include 'post/_post_teaser_masonry.html' %}
-                {% else %}
-                    <p>{{ _('No posts in this topic yet.') }}</p>
-                {% endfor %}
+             <div class="masonry" id="masonry">
+              <!-- Masonry columns will be added here -->
             </div>
+            <script nonce="{{ session['nonce'] }}">
+              document.addEventListener("DOMContentLoaded", function() {
+                  const masonry = document.getElementById('masonry');
+                  const htmlSnippets = [
+                      {% for post in posts.items %}
+                        {% raw %}`{% endraw %}{% include 'post/_post_teaser_masonry.html' %}{% raw %}`{% endraw %},
+                      {% endfor %}
+                  ];
+                  renderMasonry(masonry, htmlSnippets);
+              });
+            </script>
         {% else %}
             <div class="post_list">
                 {% for post in posts.items %}