masonry - z layout #106

app/static/js/scripts.js

@@ -14,6 +14,40 @@ document.addEventListener("DOMContentLoaded", function () {
     setupLightboxGallery();
 });
 
+function renderMasonry(masonry, htmlSnippets) {
+      const mainPane = document.querySelector('.main_pane');
+      const mainPaneWidth = mainPane.offsetWidth;
+      let numColumns;
+
+      if (mainPaneWidth < 600) {
+          numColumns = 2; // 2 columns for mobile
+      } else if (mainPaneWidth < 992) {
+          numColumns = 3; // 3 columns for phablet
+      } else if (mainPaneWidth < 1200) {
+          numColumns = 4; // 4 columns for tablet or laptop
+      } else {
+          numColumns = 5; // 5 columns for larger screens
+      }
+      const columns = [];
+
+      // Create and append column divs
+      for (let i = 0; i < numColumns; i++) {
+        const column = document.createElement('div');
+        column.classList.add('column');
+        masonry.appendChild(column);
+        columns.push(column);
+      }
+
+      // Distribute HTML snippets to columns
+      htmlSnippets.forEach(function(htmlSnippet, index) {
+        const columnIndex = index % numColumns;
+        const column = columns[columnIndex];
+        const item = document.createElement('div');
+        item.innerHTML = htmlSnippet;
+        column.appendChild(item);
+      });
+}
+
 function setupLightboxGallery() {
     // Check if there are elements with either "post_list_masonry_wide" or "post_list_masonry" class
     var widePosts = document.querySelectorAll('.post_list_masonry_wide');

app/static/structure.css

@@ -773,79 +773,73 @@ fieldset legend {
   align-items: center;
 }
 
-.post_list_masonry, .post_list_masonry_wide {
+#masonry {
-  -webkit-column-count: 2;
+  display: flex;
-  -moz-column-count: 2;
-  column-count: 2;
-  -webkit-column-gap: 5px;
-  -moz-column-gap: 5px;
-  column-gap: 5px;
-  clear: both;
 }
-@media (min-width: 992px) {
+#masonry .column {
-  .post_list_masonry, .post_list_masonry_wide {
+  flex: 1;
-    -webkit-column-count: 3;
+  padding: 0;
-    -moz-column-count: 3;
+  padding-right: 5px;
-    column-count: 3;
-    -webkit-column-gap: 5px;
-    -moz-column-gap: 5px;
-    column-gap: 5px;
 }
+#masonry .column:last-child {
+  padding-right: 0;
 }
-.post_list_masonry .post_teaser, .post_list_masonry_wide .post_teaser {
+#masonry .item {
-  margin-bottom: 5px;
   position: relative;
+  margin-bottom: 5px;
 }
-.post_list_masonry .post_teaser img, .post_list_masonry_wide .post_teaser img {
+#masonry .item img {
   width: 100%;
+  display: block;
   height: auto;
+  /* Ensure aspect ratio is maintained */
 }
-.post_list_masonry .post_teaser .masonry_thumb a, .post_list_masonry_wide .post_teaser .masonry_thumb a {
+#masonry .item .masonry_thumb a {
   border: none;
 }
-.post_list_masonry .post_teaser .masonry_info, .post_list_masonry_wide .post_teaser .masonry_info {
+#masonry .item .masonry_info {
   position: absolute;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.3);
   width: 100%;
   text-align: center;
 }
-.post_list_masonry .post_teaser .masonry_info .voting_buttons_masonry, .post_list_masonry_wide .post_teaser .masonry_info .voting_buttons_masonry {
+#masonry .item .masonry_info .voting_buttons_masonry {
   width: 100%;
   display: flex;
 }
-.post_list_masonry .post_teaser .masonry_info p, .post_list_masonry_wide .post_teaser .masonry_info p {
+#masonry .item .masonry_info p {
   margin-bottom: 0;
 }
-.post_list_masonry .post_teaser .masonry_info p a, .post_list_masonry_wide .post_teaser .masonry_info p a {
+#masonry .item .masonry_info p a {
   color: white;
   text-decoration: none;
   line-height: 40px;
 }
 @media (min-width: 1280px) {
-  .post_list_masonry .post_teaser .masonry_info p a, .post_list_masonry_wide .post_teaser .masonry_info p a {
+  #masonry .item .masonry_info p a {
     line-height: 30px;
   }
 }
-.post_list_masonry .post_teaser .masonry_info .row, .post_list_masonry_wide .post_teaser .masonry_info .row {
+#masonry .item .masonry_info .row {
   margin-left: 0;
   margin-right: 0;
 }
-.post_list_masonry .post_teaser .masonry_info .row .col, .post_list_masonry_wide .post_teaser .masonry_info .row .col {
+#masonry .item .masonry_info .row .col {
   padding: 0;
   flex-direction: row;
   display: inline-flex;
 }
-.post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a {
+#masonry .item .masonry_info .row .col a {
   color: white;
   padding-top: 6px;
 }
 @media (min-width: 1280px) {
-  .post_list_masonry .post_teaser .masonry_info .row .col a, .post_list_masonry_wide .post_teaser .masonry_info .row .col a {
+  #masonry .item .masonry_info .row .col a {
     padding-top: 0;
   }
 }
-.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button {
+#masonry .item .masonry_info .row .col .upvote_button, #masonry .item .masonry_info .row .col .downvote_button {
   display: inline;
   color: white;
   padding-top: 10px;
@@ -853,58 +847,47 @@ fieldset legend {
   position: relative;
 }
 @media (min-width: 1280px) {
-  .post_list_masonry .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button {
+  #masonry .item .masonry_info .row .col .upvote_button, #masonry .item .masonry_info .row .col .downvote_button {
     padding-top: 5px;
   }
 }
-.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button .htmx-indicator, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button .htmx-indicator {
+#masonry .item .masonry_info .row .col .upvote_button .htmx-indicator, #masonry .item .masonry_info .row .col .downvote_button .htmx-indicator {
   position: absolute;
   width: 20px;
   height: 20px;
   left: 7px;
 }
-.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_up, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_up {
+#masonry .item .masonry_info .row .col .upvote_button.voted_up, #masonry .item .masonry_info .row .col .downvote_button.voted_up {
   color: #00b550;
 }
-.post_list_masonry .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry .post_teaser .masonry_info .row .col .downvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .upvote_button.voted_down, .post_list_masonry_wide .post_teaser .masonry_info .row .col .downvote_button.voted_down {
+#masonry .item .masonry_info .row .col .upvote_button.voted_down, #masonry .item .masonry_info .row .col .downvote_button.voted_down {
   color: red;
 }
-.post_list_masonry .post_teaser .masonry_info .row .col-8, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 {
+#masonry .item .masonry_info .row .col-8 {
   justify-content: center;
 }
-.post_list_masonry .post_teaser .masonry_info .row .col-8 p, .post_list_masonry_wide .post_teaser .masonry_info .row .col-8 p {
+#masonry .item .masonry_info .row .col-8 p {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.post_list_masonry .post_teaser .masonry_info .row .reply_col, .post_list_masonry_wide .post_teaser .masonry_info .row .reply_col {
+#masonry .item .masonry_info .row .reply_col {
   justify-content: right;
   padding-right: 5px;
 }
-.post_list_masonry .post_teaser .masonry_info_no_image, .post_list_masonry_wide .post_teaser .masonry_info_no_image {
+#masonry .item .masonry_info_no_image {
   background-color: rgba(0, 0, 0, 0.2);
   width: 100%;
   text-align: center;
 }
-.post_list_masonry .post_teaser .masonry_info_no_image p, .post_list_masonry_wide .post_teaser .masonry_info_no_image p {
+#masonry .item .masonry_info_no_image p {
   margin-bottom: 0;
 }
-.post_list_masonry .post_teaser .masonry_info_no_image p a, .post_list_masonry_wide .post_teaser .masonry_info_no_image p a {
+#masonry .item .masonry_info_no_image p a {
   color: var(--bs-body-color);
   text-decoration: none;
 }
 
-@media (min-width: 992px) {
-  .post_list_masonry_wide {
-    -webkit-column-count: 5;
-    -moz-column-count: 5;
-    column-count: 5;
-    -webkit-column-gap: 5px;
-    -moz-column-gap: 5px;
-    column-gap: 5px;
-  }
-}
-
 @media (min-width: 992px) {
   .layout_switcher {
     float: right;

app/static/structure.scss

@@ -385,30 +385,24 @@ html {
   }
 }
 
-.post_list_masonry, .post_list_masonry_wide {
+#masonry {
-  -webkit-column-count: 2;
+  display: flex;
-  -moz-column-count: 2;
+  .column {
-  column-count: 2;
+    flex: 1;
-  -webkit-column-gap: 5px;
+    padding: 0;
-  -moz-column-gap: 5px;
+    padding-right: 5px;
-  column-gap: 5px;
+    &:last-child {
-  clear: both;
+      padding-right: 0;
-
+    }
-  @include breakpoint(tablet) {
-    -webkit-column-count: 3;
-    -moz-column-count: 3;
-    column-count: 3;
-    -webkit-column-gap: 5px;
-    -moz-column-gap: 5px;
-    column-gap: 5px;
   }
 
-  .post_teaser {
+  .item {
-    margin-bottom: 5px;
     position: relative;
+    margin-bottom: 5px;
     img {
       width: 100%;
-      height: auto;
+      display: block;
+      height: auto; /* Ensure aspect ratio is maintained */
     }
 
     .masonry_thumb a {
@@ -510,17 +504,6 @@ html {
       }
     }
   }
-}
-
-.post_list_masonry_wide {
-    @include breakpoint(tablet) {
-    -webkit-column-count: 5;
-    -moz-column-count: 5;
-    column-count: 5;
-    -webkit-column-gap: 5px;
-    -moz-column-gap: 5px;
-    column-gap: 5px;
-  }
 
 }
 

app/templates/community/community.html

@@ -69,13 +69,20 @@
         {% endif %}
         {% include "community/_community_nav.html" %}
         {% if post_layout == 'masonry' or post_layout == 'masonry_wide' %}
-            <div class="post_list_{{ post_layout }}">
+            <div class="masonry" id="masonry">
-                {% for post in posts.items %}
+              <!-- Masonry columns will be added here -->
-                    {% include 'post/_post_teaser_masonry.html' %}
-                {% else %}
-                    <p>{{ _('No posts in this community yet.') }}</p>
-                {% endfor %}
             </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 %}

app/templates/post/_post_teaser_masonry.html

@@ -1,8 +1,9 @@
+{# do not use any single quotes in the HTML produced by this template - javascript needs to load it as a string. See community.html #}
 {% set content_blocked = post.blocked_by_content_filter(content_filters) %}
 {% if content_blocked and content_blocked == '-1' %}
     {# do nothing - blocked by keyword filter #}
 {% else %}
-    <div class="post_teaser{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}"
+    <div class="item{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}"
         {% if content_blocked %} title="{{ _('Filtered: ') }}{{ content_blocked }}"{% endif %}>
         {% if post.image_id %}
             {% if post_layout == 'masonry' or low_bandwidth %}